认识Flutter

Flutter中文论坛 上线啦&＃xff0c;包含大家各种踩坑心得&＃xff0c;是学习交友的必备网站&＃xff0c;欢迎大家注册加入&＃xff01;

Flutter框架&＃xff0c;一言以蔽之就是能够使用一套相同的Dart语言代码同时实现android和ios跨平台应用的框架&＃xff0c;同时兼备高性能和快速开发。

跨平台应用的框架&＃xff0c;眼下相似的轮子也有很多例如&＃xff1a;Phonegap&＃xff0c;Xamarin&＃xff0c;大热的react native&＃xff0c;还有weex等等&＃xff0c;这里有一篇好文就比较详尽的介绍了目前各种技术优缺点&＃xff0c;包括这里安利的Flutter框架&＃xff08;这货之前叫Sky&＃xff09;传送门。
目前比较流行的跨平台技术主要有HTML5和react native&＃xff08;欢迎补充&＃xff09;&＃xff0c;虽然HTML5足够灵活&＃xff0c;但是移动端网页的性能始终不如人意&＃xff0c;用户体验不高&＃xff0c;在不同浏览器下也有不同程度细微的差异&＃xff1b;而react native刚好在性能和灵活性上达到了一个平衡&＃xff0c;但对于只撸前端的同学&＃xff0c;要灵活运用这个框架&＃xff0c;也有相当的难度。
假设你已经阅读过上面的文章&＃xff0c;Flutter有一个特点就是UI是自绘的并不依赖系统提供的控件&＃xff0c;那跟浏览器有啥区别尼&＃xff0c;没错你确实可以把它当成一个简化版的浏览器&＃xff0c;刚才文章也提到代码组织有Chromium风格&＃xff0c;个人粗略学习后分析&＃xff0c;在某些概念上都跟Chromium如出一辙。
请看图&＃xff0c;来自官网的视频&＃xff1a;

来自Chromium,传送门

上图的Element可以和下图的div,p等对应起来&＃xff0c;所以Element左边Rectangle green就是我们平常基于div&＃xff0b;css构建的组件&＃xff0c;右边Render Rectangle green 可以和下图 Render Object对应起来。Render Layer层上图虽然没有体现&＃xff0c;但在框架代码里确实也有这样的存在。

好继续接着说&＃xff0c;自绘UI有好处也有弊端&＃xff0c;好处就是能够最大限度在android和ios上统一UI&＃xff0c;这样就不单止在业务代码上统一&＃xff0c;用户体验也能统一&＃xff08;什么&＃xff1f;产品说要显示出不同平台的差异性&＃xff0c;框架的开发者早就想到了&＃xff0c;所以demo里面也提供一键切换android和ios的示例&＃xff09;&＃xff1b;弊端&＃xff0c;没有利用系统提供的组件&＃xff0c;基本只能自力更生了&＃xff0c;幸好框架也提供了一套基础组件&＃xff0c;能够满足一些简单的页面需求&＃xff0c;这些组件当然也是有坑的啦&＃xff0c;毕竟没有相当严谨的测试。
再说说框架的其他方面&＃xff0c;主要的开发语言就是Dart&＃xff0c;Dart曾经有一个宏伟的目标就是取代JS&＃xff0c;但是很可惜失败了&＃xff0c;也渐渐消失在人们的记忆中&＃xff0c;但是为啥要挖出这样非主流的语言作为这个框架开发的主力语言&＃xff0c;其实我也不知道为啥&＃xff0c;可能那群大神不死心吧&＃xff0c;明明那么好的语言。不过尼&＃xff0c;作为目标替代JS的语言&＃xff0c;Dart设计更加严谨&＃xff08;JS好像是十天就造出来的&＃xff09;&＃xff0c;从一开始时就考虑很多使用场景&＃xff08;浏览器&＃xff0c;服务端&＃xff0c;移动端&＃xff09;&＃xff0c;基本就像java一样的泛用型语言&＃xff08;JS是后天不停加buff&＃xff09;&＃xff0c;所以能构建更为稳定可靠的应用。对于前端和android的同学&＃xff0c;这门语言的学习成本其实并不高&＃xff0c;大概一两周就能掌握。
框架的开发体验&＃xff0c;框架是受到react的启发&＃xff0c;构建组件的代码方式也有react的风格&＃xff08;前端的同学看看&＃xff09;&＃xff0c;但这并不是重点&＃xff0c;重点是开发时支持hot reload&＃xff08;足矣&＃xff09;&＃xff0c;不过也有不足&＃xff0c;并不支持jsx&＃xff0c;UI比较复杂的话&＃xff0c;代码就太难看了&＃xff0c;以后应该会有改进。

目前框架的性能&＃xff0c;已经无限接近原生&＃xff0c;这是个人的使用感受&＃xff0c;之后再补上视频和体验的demo。
兼容性方面&＃xff0c;官网提到是android 4.1以上 和 ios8以上&＃xff0c;这还需要进一步验证

再说说项目本身&＃xff0c;是相当有节操的&＃xff0c;应该并不是玩票性质&＃xff0c;个人观察这项目有一段时间&＃xff0c;开发者几乎在不停持续的commit&＃xff0c;每次跑demo都能看到比较明显的改进&＃xff08;这也是让我一直观察的动力&＃xff09;&＃xff0c;提出的问题一般当天就有回复&＃xff08;好像项目上还有1000多的问题还是打开着&＃xff0c;哈哈&＃xff09;但是这个项目真的关注度相当低&＃xff0c;对比RN低的可怜。
好吧&＃xff0c;为啥今天才发文章安利&＃xff0c;因为看到它终于支持Windows了&＃xff08;其实我也不知道他们啥时候搞出来&＃xff09;&＃xff0c;之前只能在mac&＃xff0c;linux下体验&＃xff0c;现在也提供idea的插件&＃xff0c;非常方便调试和开发&＃xff08;之前是atom&＃xff0c;真的卡的不行&＃xff09;。

个人认为&＃xff0c;如果你是前端&＃xff0c;还没有接触react native或者已经接触过&＃xff0c;都不妨体验一下这个框架&＃xff0c;另外研究这个框架的代码也是很有价值&＃xff0c;框架已经把layout&＃xff0c;paint&＃xff0c;composite&＃xff0c;事件如何传递的过程都呈现给我们&＃xff0c;这是我们前端很少接触到。So&＃xff0c;最后当然还有一个安利&＃xff0c;如果你对框架有兴趣&＃xff0c;请务必加入我们的一个小群qq:482462550。
如有错漏&＃xff0c;欢迎指正。