移动开发漫谈

移动开发在IT开发行业算是一个比较年轻的门类，2008年苹果公司才发布了iOS SDK，2009年谷歌发布了Android SDK，分别基于Objective-C和Java两门比较古老的语言开发，后来双方陆续推出了swift和kotlin两门现代语言来普及自己的优势。在原生开发的领域之外，也有各种各样的跨平台开发技术层出不穷。下面我们简单聊一下各自的特点。

webview

第一种解决方案是基于JavaScript and WebViews来实现的，其中的代表为PhoneGap, Apache Cordova，他们将项目内需要动态展示的页面（新闻、商品之类）通过原生的webview控件来加载出来，这样一来，这个模块不需要经过发版，审核一个比较漫长的过程也可以实现一次代码，两个平台运行。

在iOS SDK和Android SDK的帮助下，我们可以访问该平台下的所有功能。但是webview不同，本质上仍然是运行在一个受限的沙盒环境，对于蓝牙，通讯等必须由该平台才能完成的功能，通常我们需要借助bridge来实现，webview 通过 jsbridge 这个桥梁来实现js和原生之间的通讯，开放相应的接口，实现上下文的切换。参照下图

但是由于多了一层通讯和本身的问题，webview的解决方案在性能方面并没有太出色。对于复杂的界面和动画，都不是很理想。

RN 和 Weex

webview的解决方案将业务和绘制都交给了自己来解决再加上有限的环境，所以很多场景不堪重任，于是出现了js开发+原生渲染的解决方案。

React Native 是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和Android两个平台。RN利用js构建在iOS和安卓上运行的应用，它使用与React相同的设计，以数据变化驱动ui变化，通过js core 将虚拟DOM映射为安卓和iOS上原生的控件，相对于webview来说，RN是原生控件渲染，所以在性能上的表现要好很多（rn是react在原生平台的衍生产物，同样的flutter也借鉴了react很多东西，在很多思想上有很多相似的地方）。

weex是国内阿里巴巴退出的跨平台开发解决方案，也是用js开发+原生渲染，但是生态环境和rn比还有些差距，和rn最大的地方在于语法层面上的不同。

这部分的通讯流参照下图

总的来说，这种方式已经很成熟了，采用web开发技术栈，前端人员好上手。原生渲染，性能上明显提升。有热更新动态化技术解决方案。但是渲染上需要和原生通信不断拖动的场景下仍然有时候会出现卡顿等不好的体验，

Flutter

Flutter采用了自绘UI+原生的方式来解决了跨平台开发方案，它没有用脚本语言而是采用了不同的方案，通过编译语言Dart加上自绘引擎来避免了绘制UI时候的频繁通信（解决了UI的通信，如果需要平台下的其他能力仍然需要通信）Dart编译成本平台代码，无需频繁切换上下文，避免了性能消耗，缩短了启动时间。我们下面着重说明一下Flutter。

Flutter简介

flutter是什么？Flutter是Google发布的一个用于创建跨平台、高性能的移动应用程序SDK。他包括了一个现代的响应式框架、一个2D渲染引擎、现成的widget和开发工具，通过这些我们可以快速的实现构建，调试，还原一个精致的应用。我们可以书写一份精简的代码，同时开发iOS和Android，通过大量的多是多样的widget组合构建Material Design和Cupertino风格的APP。

跨平台自绘

我们上面提到过，flutterUI绘制方面没有采用原生的控件，而是通过了自家的跨平台2D渲染引擎skia来绘制UI，直接调用的系统界别的api，避免了大量的上下文切换通信带来的性能损耗问题，也可以避免对原生控件的依赖。

开发语言Dart

Dart也是谷歌自家的语言，Flutter采用了Dart来开发而不是用js。Dart是一门现代语言，你可以看到很多现代语言拥有的优点，简单易学，易于上手。更重要的是Dart支持开发阶段的的JIT和发包时候的AOT，在开发周期时候的热重载特点可以大量提高你在开发时候的效率，而发包时候，可以通过AOT生成高效的ARM代码以保证应用性能，想对应的js就不能实现。

Dart语法就参考官网了，例如可选类型、闭包、库、词法作用域、顶层函数、命名参数、async/await等等。一些优秀的设计都有，话说你从swift1学到了swift4还有什么不易学呢哈哈，开个玩笑。

widget

这个概念在flutter里很重要很重要！可以说理解了widget对于你书写flutter有着至关重要的作用。在flutter的世界里，万物皆widget。

与其他将视图、控制器、布局和其他属性分离的框架不同，Flutter具有一致的统一对象模型：widget。widget本身就分很多种，有布局类的，基础控件类的，功能性的，手势，帮助类的等等等等，可以说凡是你看到的都是widget。

Widget根据布局形成一个层次结构。每个widget嵌入其中，并继承其父项的属性。没有单独的“应用程序”对象，相反，根widget扮演着这个角色。你可以想着整个应用，每一个页面都是一个widget套着一个widget。在flutter中，自定义widget的时候相比原生开发来讲并不多，更多时候我们是将不同的widget组合起来来拼成我们想要的模样。

Flutter结构

我们可以看到分为Framework 和Engine两层。

Engine层面是有c++写的，其中包括了 Skia引擎、Dart运行时、文字排版引擎等。在代码调用 dart:ui库时，调用最终会走到Engine层，然后实现真正的绘制逻辑。

通常我们用的更多的是Framework层面的东西，这是由Dart实现的。从高到底，依次深入，我们可以用更少的代码来实现更多的事情，也可以深入到下面自绘view。

这篇文章就聊到这里，接下来简单对比下flutter和iOS里面一些概念的对比。