最近做了两个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设计师薄弱中小公司更是福音;
-
-
其他
- Dart Flutter使用了新的开发语言,这个语言相信大家都没听说过,这个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命令,检查系统环境
| 1 |
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) [!] Android toolchain - develop for Android devices (Android SDK 26.0.2) ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses [!] iOS toolchain - develop for iOS devices (Xcode 9.2) ✗ ios-deploy not installed. To install: brew install ios-deploy ✗ CocoaPods not installed. CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side. Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS. For more info, see https://flutter.io/platform-plugins To install: brew install cocoapods pod setup [✓] Android Studio [!] VS Code (version 1.21.1) [!] Connected devices ! No devices available ! Doctor found issues in 4 categories. |
3:配置开发环境
我这里选择的是VSCode开发,一切按照文档配置好之后,运行Create Project没有反应,原因是忘记配置VSCode的SDK了.大家选择一下Locate SDK,设置成解压后的path路径即可”/Users/[XXX]/development/flutter”
4:创建第一个项目:
| 1 2 3 4 5 6 |
Start VS Code Invoke View>Command Palette… Type ‘flutter’, and select the ‘Flutter: New Project’ action Enter a project name (e.g. myapp), and press Enter Specify a location to place the project, and press the blue OK button Wait for the project creation to continue, and the main.dart file to appear |
注意大家不好选择SDK的目录为项目目录,程序是禁止的;
创建好的目录如下: 结构是不是 有些眼熟,和RN类似.main 主类又有些陌生,谁让这货是dart语法呢;
5:运行调试
神奇的地方出现了,在VSCode中,选择调试,在没有选择配置的情况下,直接同步到我的模拟器安装了
试了一下热更新.瞬间同步到模拟器,爽歪歪;
本人技术博客