最近做了两个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的一些特性以及与其他跨平台技术的对比:
关于性能
跨平台开发第一个考虑的就是性能问题
关于开发体验
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设计师薄弱中小公司更是福音;
其他
按照惯例,学习一门语言和工具,总需要搭建一个环境和写一个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中,选择调试,在没有选择配置的情况下,直接同步到我的模拟器安装了
试了一下热更新.瞬间同步到模拟器,爽歪歪;
本人技术博客
http://zhangzeshuai.com/2018/04/13/flutterguid/