Flutter介绍

Flutter是Google推出的开源移动应用开发框架。开发者可以通过开发一套代码同时运行在iOS和Android平台。

它使用Dart语言进行开发,并且最终编译成各个平台的Native代码,这样既保证了开发效率,也保证了各个平台的运行效率。其相当于从头到尾重写了一套UI框架,不依赖具体平台的组件。其所有的组件都是"Widget"。渲染引擎则依靠高效渲染库Skia实现。

下面我们对比一下H5、React Native、Flutter这些跨平台的解决方案。

移动端的跨平台技术

H5技术

常被人提起的H5技术,其实就是网页+JavaScript。比如目前的一些流行的JS框架Vue,React,AngularJS等都是为了构建网页。针对移动端构建出来的网页可以实现在跨平台的功能,但是其缺点也很明显:

  • 渲染效率低下,用户体验差。很多H5在iOS平台表现尚可,但是在Android上特别是一些低端机上的表现确实让人不敢恭维。
  • 网页调用设备硬件相关API比较困难,而且支持的功能较少,实现此类需求是H5的短板。

React Native

React Native(RN)发布于2015年,也是使用JavaScript语言进行跨平台APP的开发。与H5开发不同的是,它使用JS桥接技术在运行时编译成各个平台的Native代码,其使用的技术Facebook的Flux技术。
其优点是目前的生态比较成熟,目前也有很多跨平台应用使用React Native。它也是跟Flutter对比的主要对象。
其特点是:

  • 使用JavaScript语言,由于JS被广泛地使用,所以RN也很容易被接受。
  • RN依赖JS的运行时环境,也就是JS桥接技术。其使用Facebook的Flux架构。
  • RN仅提供了UI渲染和设备访问的API,很多功能必须依赖第三方库来实现对本地组件的使用。
  • 生态目前比较完善,使用的公司也比较多,特别是对JS比较熟悉的同学容易上手。
  • 支持热部署,开发过程中可以节约很多时间。

但是它也并不是完美的:

  • 它的渲染方式还是调用各个平台的原生控件,有时需要针对不同的平台做不同的优化。
  • 其性能相对于H5有很大的提高,但是并没有完美解决,白屏,丢帧问题依然存在。

Flutter

Flutter也看到了目前的跨平台解决方案并不完美,所以它借鉴了React Native的一些思想,做出了很大的优化。它将代码编译成原生代码,并且直接在各个平台中使用其高效渲染引擎Skia进行渲染,没有桥接,不调用平台相关控件。

这种设计思想完美解决了不同平台的性能问题。

归功于其设计思想,我们可以真正实现一套代码,运行不同的平台。在其推出之后,关注的开发者数量和相关的教程的增长速度远超当时的React Native。

其特点包括:

  • 使用Google自主开发的Dart语言。Dart语言是一个强类型的语言,很好地支持面向对象,并且易于学习和使用。
  • 使用谷歌自己的Skia渲染引擎,Android自带Skia引擎,iOS平台上Flutter也会把Skia引擎打包到APP中,实现高效渲染。
  • 目前有非常丰富的视图组件,可以点击这里查看其组件目录,包括Android上常用的材料设计(Material Design)的UI风格,和iOS风格(Cupertino)。由于其渲染不依赖各平台相关组件,所以运行在不同平台上的效果是一致的。
  • 同样支持热部署,开发时可以像网页开发一样实时看到效果。

目前它存在的一些问题是:

  • 国内学习资源目前并不丰富,使用Flutter的公司也比较少。
  • 相关的生态还没有React Native那样丰富,但是其发展速度大大超过了React Native。

总结

虽然Flutter目前并不是非常流行,但是笔者相信它是跨平台解决方案的未来。
如果谷歌的新系统Fuchsia OS能像当今的Android这样如日中天,甚至替代掉Android的话,Flutter的发展也会迎来它的顶峰。

本系列博客我们就来深入学习和探讨使用Flutter。

后面的文章我们会逐步深入学习Flutter的功能与实战。
我的博客中关于Flutter的所有文章可以点击这里找到,欢迎关注!

如果有问题可以留言,或者给我发邮件lloyd@examplecode.cn,期待我们共同学习与成长!

Flutter介绍 - Flutter,H5,React Native之间的对比的更多相关文章

  1. Flutter,H5,React Native

    Flutter介绍 - Flutter,H5,React Native之间的对比   Flutter介绍 Flutter是Google推出的开源移动应用开发框架.开发者可以通过开发一套代码同时运行在i ...

  2. Flutter vs React Native vs Native:深度性能比较

    老孟导读:这是老孟翻译的付费文章,文章所有权归原作者所有. 欢迎加入老孟Flutter交流群,每周翻译2-3篇付费文章,精彩不容错过. 原文地址:https://medium.com/swlh/flu ...

  3. 携程React Native实践

    React Native(下文简称 RN)开源已经一年多时间,国内各大互联网公司都在使用,携程也在今年 5 月份投入资源开始引入,并推广给多个业务团队使用,本文将会分享我们遇到的一些问题以及我们的优化 ...

  4. React Native 从入门到原理

    React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...

  5. 关于React Native 火热的话题,从入门到原理

    本文授权转载,作者:bestswifter(简书) React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原 ...

  6. iOS原生项目集成React Native模块

    今天周末,弄弄Native和React Native之间的交互.首先,先在iOS原生项目中集成React Native模块: 注意事项: 1.因为react native的版本问题,部分细节可能有所不 ...

  7. 【RN - 基础】之Windows下搭建React Native开发环境

    前言 React Native由Facebook公司于2015年F8大会上开源,其主张“Learn once, write everywhere”.React Native的核心设计理念是:既拥有Na ...

  8. React Native 架构演进

    写在前面 上一篇(React Native 架构一览)从设计.线程模型等方面介绍了 React Native 的现有架构,本篇将分析这种架构的局限性,以及 React Native 正在进行的架构升级 ...

  9. 深入浅出React Native 1: 环境配置

    该教程主要介绍如何用react native来开发iOS,所以首先,你需要有一台mac,当然黑苹果也是可以的~ 创建一个react native的项目只需要安装以下五个组件~~(但....坑爹的是,不 ...

随机推荐

  1. JavaSE基础知识(6)—异常和异常处理

    一.异常的理解及体系结构图 1.理解 异常:程序运行过程中发生的不正常现象.java中的错误: 语法错误 运行异常 逻辑错误 2.体系图 java程序在执行过程中所发生的异常分为两类: Error:J ...

  2. C#多线程--信号量(Semaphore)[z]

    百度百科:Semaphore,是负责协调各个线程, 以保证它们能够正确.合理的使用公共资源.也是操作系统中用于控制进程同步互斥的量. Semaphore常用的方法有两个WaitOne()和Releas ...

  3. Linux 学习笔记 4:Shell 编程

    1.简单过滤器 a. pr [OPTION] [FILE] 功能:改变文件打印格式 选项 功能 -l n 设定页面长度为n行 -w n 设定页面总宽度为n个字符(不够会被砍掉) -h str 设定页眉 ...

  4. oracle数据导出以及导入

    导出 1.服务器上mkdir创建一个真实目录/home/oracle/dump 2.sqlplus /nolog 3.conn /as sysdba; 4.SQL> create directo ...

  5. spring multipart源码分析:

    1.MultipartResolver MultipartResolver接口提供了spring mvc的上传视图,MultipartResolver实例在请求转交给handlermapping之前. ...

  6. delphi fastreport 动态加载图片

    (frxReport1.FindObject('picture1') as TfrxPictureView).Picture.LoadFromFile('d:\c.jpg'); frxReport1. ...

  7. PYTHON基础入门(内置函数、推导式)学习

    **内建函数**1.通过使用dir()函数可以列出所具备的方法 例:num = 10 dir(num) 例:myList = [1,2,3,4,5,6] dir(num)2.通过使用help()函数可 ...

  8. 编写一个javscript函数 fn,该函数有一个参数 n(数字类型),其返回值是一个数组,该数组内是 n 个随机且不重复的整数,且整数取值范围是 [2, 32]。

    function fn(n){ if(n<2 || n>32) { return; }  if(!n) { return;}  //判断n是否为数字  if(!/^[0-9]+.?[0-9 ...

  9. easy-ui treegrid 实现分页 并且添加自定义checkbox

    首先第一点easy-ui  treegrid 对分页没有好的实现, 因为在分页的过程中是按照 根节点来分页的  后台只能先按照 根节点做分页查询  再将子节点关联进去, 这样才能将treegrid 按 ...

  10. 五分钟让你读懂UML常见类图

    相信各位同学在阅读一些源码分析类文章或是设计应用架构时没少与UML类图打交道.实际上,UML类图中最常用到的元素五分钟就能掌握,经常看到UML类图但还不太熟悉的小伙伴赶紧来一起认识一下它吧:)   一 ...