资讯专栏INFORMATION COLUMN

Flutter介绍 - Flutter,H5,React Native之间的对比

宋华 / 1614人阅读

摘要:介绍是推出的开源移动应用开发框架。使用谷歌自己的渲染引擎,自带引擎,平台上也会把引擎打包到中,实现高效渲染。如果谷歌的新系统能像当今的这样如日中天,甚至替代掉的话,的发展也会迎来它的顶峰。

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,期待我们共同学习与成长!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/14829.html

相关文章

  • Flutter介绍 - Flutter,H5,React Native之间对比

    摘要:介绍是推出的开源移动应用开发框架。使用谷歌自己的渲染引擎,自带引擎,平台上也会把引擎打包到中,实现高效渲染。如果谷歌的新系统能像当今的这样如日中天,甚至替代掉的话,的发展也会迎来它的顶峰。 Flutter介绍 Flutter是Google推出的开源移动应用开发框架。开发者可以通过开发一套代码同时运行在iOS和Android平台。 它使用Dart语言进行开发,并且最终编译成各个平台的Na...

    jackzou 评论0 收藏0
  • 5G到来,App未来,是JavaScript,Flutter还是Native

    摘要:优点其优点是目前的生态相对比较成熟缺点开发和发布成本高举个栗子网易管家,应用技术,,常被人提起的技术,其实就是网页。个人看来,最具有发展潜力的其中一个,虽然目前并不是非常流行,但是笔者相信它是跨平台解决方案的未来。 Native App React Native(RN)发布于2015年,也是使用JavaScript语言进行跨平台APP的开发。与H5开发不同的是,它使用JS桥接技术在运行...

    church 评论0 收藏0
  • 5G到来,App未来,是JavaScript,Flutter还是Native

    摘要:优点其优点是目前的生态相对比较成熟缺点开发和发布成本高举个栗子网易管家,应用技术,,常被人提起的技术,其实就是网页。个人看来,最具有发展潜力的其中一个,虽然目前并不是非常流行,但是笔者相信它是跨平台解决方案的未来。 Native App React Native(RN)发布于2015年,也是使用JavaScript语言进行跨平台APP的开发。与H5开发不同的是,它使用JS桥接技术在运行...

    dackel 评论0 收藏0
  • 浅谈跨平台框架 Flutter 优势与结构

    摘要:针对上述两个问题,跨平台框架应运而生。是于年月开源的跨平台移动应用开发框架,是开源的框架在原生移动应用平台的衍生物。实现跨平台的功能,主要由和三层所构成的。是跨平台的,并提供了非常友好的。它能够让各平台的体验一致,并且让用户体验达到更优。 作者:个推ios工程师 伊泽瑞尔 一、背景 目前,移动开发技术主要分为原生开发和跨平台开发两种。其中,原生应用是指在某个特定的移动平台上,使用平台所...

    peixn 评论0 收藏0
  • 浅谈跨平台框架 Flutter 优势与结构

    摘要:针对上述两个问题,跨平台框架应运而生。是于年月开源的跨平台移动应用开发框架,是开源的框架在原生移动应用平台的衍生物。实现跨平台的功能,主要由和三层所构成的。是跨平台的,并提供了非常友好的。它能够让各平台的体验一致,并且让用户体验达到更优。 作者:个推ios工程师 伊泽瑞尔 一、背景 目前,移动开发技术主要分为原生开发和跨平台开发两种。其中,原生应用是指在某个特定的移动平台上,使用平台所...

    Cc_2011 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<