前端跨端方案介绍

前言

目前主流的客户端主要分为3种

1. Native app
   即原生app，安卓和IOS使用不同语言开发，这种方式性能最好，用户体验最佳，并且可以完整的使用所有native端的功能，但是他的上手成本相对会高一些，安卓与IOS使用不同的语言，不同端之间互不相通，开发成本相较于web会更高，并且发布更新无法做到像web一样随时发版，需要通过app市场的审核，发版周期大约在一周左右，更新较慢
2. Web app
   即web站点，使用H5开发，通过浏览器访问，多端展示一致，但是web app功能受限，无法使用native端诸如蓝牙等功能，用户留存也不像原生app那么好，目前市面上很少有将web app做为公司唯一app的情况，通常是使用web app站给app引流
3. hybrid app
   即混合app，用H5开发，但是运行在app内部的webview中，通过app端提供的jsbridge，来调用一些原生的方法，这样就可以使用一套代码，同时运行在安卓和IOS上，同时达到多端一致的效果，并且不用受制于app发版的限制，可以做到随时发布，但是hybrid app的性能无法与native app比拟，用户体验方面会比native app差一些

正是由于这3种方案或多或少都存在一些问题，从而衍生出了一些新的跨端方案

跨端框架介绍

目前，市面上比较有名的跨端方案有Flutter，React Native，Weex，下面会对这些框架分别介绍

Flutter是谷歌公司的一套跨端方案，他使用dart语言开发，从开发体验上更像原生app的开发。

Flutter的Framework层使用Dart来实现，提供了包括Material和Cupertino 2套设计方案针对IOS和安卓，Widgets提供的各种基础的组件库，Rendering提供的渲染层，以及Dart UI层，提供了包括动画，控制，手势等各种功能，直接对接底层
他的Engine层使用c++，整合了Skia开源二维图形库，适配了多平台的api，渲染并不是直接使用原生组件渲染，而是重写了一套跨平台的渲染引擎，只使用了底层绘图相关的api，从而使他在多端的表现是一致的，抹平了安卓和IOS的一些差异，并且也是他的性能极为优秀

Flutter的性能是目前各个跨端方案中最好的一个，并且他的多端一致也是做的最好的，从目前所有框架整体的一个发展曲线上来看，Flutter应该是目前最有潜力的一款跨端框架。
但是他也存在着一些不足，因为使用Dart语言，而不是前端的拿手活javaScript，从而使他的上手难度相对于其他的一些框架，会更高一些，他的UI控件使用起来不像其他的跨端框架那么直观，有一些晦涩，而且他的打包后的包体积也相对比较大

React Native是FaceBook公司旗下的跨端框架，使用自家的React开发，整体开发体验上和Web类似，但会有一些细节上的不同

React Native的上层由React支持，运行在JSC中，Bridge部分提供了最主要的功能，将js和native连接起来，2者通过Bridge进行通讯。Bridge的shadow tree负责UI以及页面交互，Native Modules打通了Native端，提供了各种Native端的能力，而这2者通过异步JSON格式的消息来传递命令和指令

React Native是市面上出现比较久的一款跨端框架，他的各种组件以及api都较为丰富，并且社区非常活跃，整个社区生态由FaceBook掌舵，社区划桨，可以找到非常多相关的轮子以及成熟的解决方案，许多第三方的组件甚至直接取代了React Native官方自己的组件，而且因为使用前端熟悉的React，也使他的上手难度相对较低，运行在jsc中使得他的调试非常方便，在开发时可以直接在浏览器中调试

但他同时也有一些劣势，由于底层实际上是将React编译成原生的组件，这使得他在安卓和IOS上存在着一些差异，这些差异官方并没有抹平，在开发时要自己兼容，并且由于使用Bridge模式进行通讯，也使得他的性能相较Flutter会有一些不足，在动画方面表现的尤为明显，他的组件各种各样的属性非常之多，有一些官方文档说明并不详细，而这些属性对于前端开发者来说可能是比较陌生的，所以要从Web迁移至React Native，前期还是有一定的学习成本的

Weex是阿里旗下的跨端框架，可以使用Vue或者类似React的Rax开发，是开发体验上最接近Web的一套跨端框架，同时他也是唯一可以跨安卓，IOS，Web 三端开发的框架，代码可以直接编译为Web代码

Weex使用Vue或者Rax作为DSL，然后将代码编译为虚拟DOM，通过渲染层将虚拟Dom根据平台渲染为不同的组件，这种方式类似React Native，这也使得他在多端的表现上会存在一些不一致的地方

Weex目前存在着比较多的问题，包括但不限于

1. 官方文档非常简洁，甚至有一些简陋
2. 提供的组件和api非常有限，需要native端的开发人员配合来提供原生的能力
3. 官方不更新，社区不活跃，框架整体处于一个没人管的状态，一些问题在网上比较难找到解决方案，指望官方来修复也是不太现实
4. 框架本身存在很多坑，仅仅是官方提供的为数不多的api和组件，都有不少的坑，如果使用它完整的开发一个项目，要做好碰到各种奇奇怪怪的问题的准备

框架对比

从目前各大框架的状况来看，Flutter和React Native都各有千秋，具体使用哪个，要看公司实际的情况
如果公司想让安卓和IOS工程师进行跨端开发，并且愿意给一段学习适应的时间，那么Flutter在上手后是一个不会让你后悔的选择，但是如果是前端工程师要上手跨端开发，并且没有或者只能提供很少原生端的支持，大部分需要前端工程师自己解决，那么React Native相对就是好的选择，丰富的组件和API使得他即使没有安卓和IOS的开发经验，也可以使用React Native官方提供的组件和API，以及社区丰富的解决方案完成绝大部分的功能
当然如果你只想用Vue，并且做好了踩坑的准备，本身也有安卓和IOS开发经验或者会有安卓和IOS开发工程师协助，那么可以大胆的尝试一波Weex，体验从入门到入土的快感…