最近做了两个React Native(以后简称RN)的项目,重新Review一下相关的项目代码,期望下次使用的时候可以有更好的结构,更好的规范和约束已帮助大家减少bug,提高开发效率;
在做了一些原生Android开发,iOS开发和基于Cordova的混合开发之后,对React Native的开发还算比较满意,他解决了原生开发工作量大的问题,也解决了混合开发效率比较低,特别是低端Android卡顿的问题;但也有些不满意的地方,比如ListView渲染有内存泄露,替换的解决方案FlatList又渲染过慢,低端机卡顿,同时升级困难,有时候升级会牵涉到很多改动,如果改动的原生代码,升级更麻烦,同时RN的安装环境也异常复杂,安装好一个可以真机调试的环境有时候一天都搞不定;
正在对RN又爱又恨的时候,Google 在吸收了React的思想之后,Google 在2018年的世界移动大会上发布了新的跨平台开发框架Flutter的bate版本,来解决大家的痛点问题;虽然Flutter在一年前就有了,但备受关注和发展还是近几个月的事情,目前Star数量已经超过两万,而且持续快速增长中;目前RN的Star数量是六万多,基于cordova的ionic解决方案是三万多,可见大家多Flutter的期待程度,当然Google 也不负众望,版本更新速度达到了令人发指以天为单位,当然还都是beta版本;
下面大概介绍一下Flutter的一些特性以及与其他跨平台技术的对比:
关于性能
跨平台开发第一个考虑的就是性能问题
- Cordova的基础是html和js运行在webview容器里面,通过Cordova提供的接口与硬件通讯;所以它的效率天生收到限制,而且也受到了各个厂商对webkit内核的好坏;比如之前基于国产某Cloud的程序,在华为手机上显示就不正常,花费了不少精力修改;
- RN的效率由于是将View编译成了原生View,所以效率上要比基于Cordova的HTML5高很多,但是它也有效率问题,RN的渲染机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加.比如我们渲染一个复杂的ListView,每一个小的控件,都是一个native的view,然后相互组合叠加.想想此时如果我们的list再需要滑动刷新,会有多少个对象需要渲染.所以也就有了前面所说的RN的列表方案不友好;
- Flutter吸收了前两者的教训之后,在渲染技术上,选择了自己实现(GDI),由于有更好的可控性,使用了新的语言Dart,避免了RN的那种通过桥接器与Javascript通讯导致效率低下的问题,所以在性能方面比RN更高一筹;有经验的开发者可以打开Android手机开发者选项里面的显示边界布局,发现Flutter的布局是一个整体.说明Flutter的渲染没用使用原生控件进行渲染
关于开发体验
Hot Reload(热重载),这个对于原生开发者是一个福音,特别是Android开发者,Android原生改一个东西运行需要好久时间;对于Cordova和RN,差别不大,两个基本都可以支持热重载
Widget(组件)
这点和RN的component有些类似,但是比RN更彻底,Flutter自身提供了很多基于 Material Design and Cupertino (iOS-flavor) 风格Widget,这点也和Google对它的定位有关(Flutter is Google’s mobile UI framework),大家在开发的时候更简单,特别对于美工UI设计师薄弱中小公司更是福音;
其他
- DartFlutter使用了新的开发语言,这个语言相信大家都没听说过,这个google推出的新的编程语言,属于动态语言,”结构化的web编程”语言,语法与Javascript 的ES6标准有些类似,有Java和C#语言基础,理解起来不难.缺点是程序猿们又要学习一门新语言了;
- 除了效率和Widget之外,最期待的还是Flutter的渲染方式,不说跨平台的开发语言,就单单Android原生开发,不同的手机对不同控件的渲染可能就有不同,希望Flutter自己的渲染平台能解决这个问题;
- 作为一个新的框架,而且使用了一门新的语言,虽然功能很强大,github很火,但是实际应用还是很少,招聘网站上甚至找不到一个相关的职位,相关的插件比如分享支付,估计也没有,需要自己封装插件调用,实际中也会增加工作量和成本; 但作为一个技术人员,关注这个优秀的开源框架还是很有必要的;
- 我始终相信世界应该是大而统一的世界,android和iOS就割裂了两个世界,造成了两个体系.终极时代可能就像传统的WinForm被web代替,在这个过程中,还需要Cordova,RN,Flutter这样的过渡解决方案,希望这一天早些到来;在没有到来之前,还是需要好好学好目前的开发;
按照惯例,学习一门语言和工具,总需要搭建一个环境和写一个Hello Word程序,下面记录下我的点点滴滴;
文档地址 :https://flutter.io/setup-macos/#system-requirements
我的是mac环境,上面的是mac安装环境,Flutter的文档比较友好,MAC,windows的安装说明都有,而且还有Android Studio,VSCode 等不同开发工具的配置,开发者可以选择自己熟悉和喜欢的工具;详细步骤请参考官网,我这里只是记录安装过学习程中遇到的问题
1:下载解压后,把它放在你喜欢的目录,指定一下PATH路径
|
1
|
export PATH=/Users/[XXX]/development/flutter/bin:
$PATH
|
2:运行doctor命令,检查系统环境
flutter doctor
|
第一次安装一般环境都会有些问题,需要按照提示说明一步一步进行处理,提示说明很清楚,命令copy到终端执行 一遍即可;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
[✓] Flutter (Channel beta,v0.2.8,on Mac OS X 10.13.3 17D102,locale zh-Hans-CN)
|
3:配置开发环境
我这里选择的是VSCode开发,一切按照文档配置好之后,运行Create Project没有反应,原因是忘记配置VSCode的SDK了.大家选择一下Locate SDK,设置成解压后的path路径即可”/Users/[XXX]/development/flutter”
4:创建第一个项目:
|
1
2
3
4
5
6
|
Start VS Code
|
注意大家不好选择SDK的目录为项目目录,程序是禁止的;
创建好的目录如下: 结构是不是 有些眼熟,和RN类似.main 主类又有些陌生,谁让这货是dart语法呢;
5:运行调试
神奇的地方出现了,在VSCode中,选择调试,在没有选择配置的情况下,直接同步到我的模拟器安装了
试了一下热更新.瞬间同步到模拟器,爽歪歪;
本人技术博客
