大前端的下一站何去何从？

   <p>近年来，移动互联网应用有着爆发式的增长，同质化 APP 层出不穷，人们对于产品体验的要求越来越高，渲染迟缓、交互卡顿的单体 Web APP 已经无法满足现有用户苛刻的使用标准；与此同时，井喷式的业务需求迫使 iOS、Android 两个移动平台不断提升迭代开发速度，缩短版本发布周期；如何既能利用 Web 门槛低、轻量级、跨平台开发的优势，又能尽可能最大化屏蔽其现存缺点成了大前端融合领域攻克的重点。</p>    <p>本文借用主流移动跨平台开发方案，向大家介绍移动平台开发的演变之路。</p>    <h2>Hybrid-App 的天下</h2>    <p>移动应用开发领域发展至今已基本被 Android、iOS 两大平台统治，每个平台仍在不断发展完善、壮大自己的生态系统；对开发者而言每个平台更像是一个巨大的 SDK，为我们抹平了设备硬件、系统内核所带来的差异，统一了平台设计、开发方式。</p>    <p><img src="https://simg.open-open.com/show/ab0ba108f6e4e72f6b62d60e304a29a4.png" alt="大前端的下一站何去何从？" width="550" height="522"></p>    <p>Figure 1 移动开发平台概览</p>    <p>为了追求极致的开发效率、降低研发成本，早期的开发者不断尝试利用新技术突破平台所带来的约束，PhoneGap 技术 (旨在让早期的 Web-App Written once, run everywhere ) 的出现让开发者们看到了 Hybrid-App 的雏形。</p>    <p>PhoneGap 技术基于 WebView 引擎中的 JS Core 解释器，其核心是 Cordova JavaScript 类库，这层 JavaScript Plugin 抹平了不同平台间的差异，为 Web 与 Native 交互提供了统一的抽象接口及完善的调用机制，其本质是将不同平台打造为一个接口统一的 Web 壳资源平台：UI 渲染依赖平台 Web Render 处理，统一使用 HTML+CSS 绘制；交互逻辑使用 JS Core 这种方式在早期大大降低了开发成本、同时也缓解了早期特定移动平台开发人员稀缺的问题，早期定义的 Hybrid-App 更像是基于移动平台开发的 Web App。</p>    <p><img src="https://simg.open-open.com/show/52cb0ccdea17a6e5ab1f23d2190b2bec.png" alt="大前端的下一站何去何从？" width="550" height="445"></p>    <p>Figure 2 基于 PhoneGap 开发的移动 APP</p>    <p>伴随业务规模的发展，人们发现这种方式虽然高效，但是用户体验却是一团糟；虽然实现了跨平台开发，但又被有限的插件资源所限制；移动开发领域初期，系统平台众多，一系兼容处理让整个框架变得臃肿，这令原本就性能堪忧的框架更是捉襟见肘。随着前端技术的进步，开发者们也在不断打磨 Cordova 框架：提升整体加载性能、增强插件扩展灵活性，从大刀阔斧到精雕细琢，Cordova 生态系统逐渐完善， 众多公司也纷纷开始围绕 Cordova 及一些主流的前端框架打造自己的专属移动开发平台，Hybrid-App 也从青涩步入成熟。</p>    <p><img src="https://simg.open-open.com/show/14b16602c0af8ce735de29f7dcbc8357.png" alt="大前端的下一站何去何从？" width="550" height="498"></p>    <p>Figure 3 基于 Cordova Plugins 的主流 Hybrid APP 框架</p>    <p>这里不得不提到影响了近几年前端设计思想的 UI 框架 React.js，其设计初衷是优化 web 在移动端的渲染性能、改变传统的 UI 开发方式：</p>    <p>组件的概念 - React 基于 UI 组件构建视图，每个组件负责维护自己的（State）展示状态，利用简单的 UI 组件创建复杂的 UI；利用组件组合后形成的单向数据流，根据 State 的变化来刷新 UI 展示；同时推出了更便于组件化开发的 JSX(JS 语法糖) 语言。</p>    <p>Visual DOM - React 一个颠覆性的创新就是引入了二进制 Visual DOM 树，其本质可以理解为在 JS 和 DOM 之间做了一个缓冲层用于保存 Virtual DOM 树，UI 状态变化时只比较新旧 Visual DOM，通过 Diff 算法找出节点差异，然后进行真实 DOM 操作。因为操作 HTML DOM 是非常耗费系统资源的，通过这种方式可以保证以最小代价刷新 UI。</p>    <p>轻量级的 UI 框架 - 可以和其他前端框架结合使用，React.js 只是单纯的 UI 框架，也就是常说的 MVC 框架中的 View 层，它借用了响应编程模式的特点来简化 Web 视图的创建过程；Model 层 和 Controller 层的缺失催生出了 Flux 和 Redux（Redux 可以视为 Flux 框架的精简版） 框架。</p>    <p>这里仅以使用比较广泛、知名度更高的 Redux 框架来介绍，Redux 框架的核心理念是严格的单向数据流，只能通过 dispatch(Action) 的方式修改 Store 数据 (Store 的概念源自 MVCS 框架，Store 不仅仅是 Model 的概念，理解为前端中的 DB 形式更为贴切)，其流程可以简单描述为：View -> Action -> Reducer(logic process) -> Store(change/write/delete state)。</p>    <p>Redux 的设计理念是不是看上去和 React.js 不谋而合？再加上 Redux 社区还基于异步流扩展了很多 Extensions 插件（redux-trunk、redux-promise、redux-saga、redux-observable 等），所以很多厂商纷纷选用 React+Redux 作为自己的 Web 支撑框架。</p>    <p>至此，也就形成了业内主流的 Hybrid-App 框架 Cordova+React+Redux，但是由于 Web 有着先天的局限性，前端框架只是从架构设计、算法层面对性能进行优化，仍然无法解决根本问题：</p>    <ul>     <li> <p>首次渲染效率及白屏问题</p> </li>     <li> <p>单线程的状态分发机制，无法满足复杂用户交互场景（滑动，拖动手势）</p> </li>     <li> <p>伴随着业务规模持续增长的 js plugin，基于单 Web 页面的注入机制，无法有效控制内存增长</p> <p>React.js 这种依托于算法优化渲染效率前端框架，也有着无法回避的缺陷：</p> </li>     <li> <p>首次创建 Virtual DOM 树的耗时相当于延迟了首屏渲染时间</p> </li>     <li> <p>每次 State 变化都会生产全量 Virtual DOM 树，和上一次结果做 diff，这其实是一次算法执行时间与 Real DOM 操作时间的博弈</p> </li>     <li> <p>需要编写大量的闭包函数（Redux 也有同样的缺陷）</p> </li>    </ul>    <p>随着业务爆发式的增长、交互复杂度提升、数据请求不断增多，如果要 Redux 承载整个 App 或大部分关联 Web 的数据处理已经非常困难：</p>    <ul>     <li> <p>Store 中存放的冗余数据越来越多，维护了多个 Web 页面的组件状态</p> </li>     <li> <p>直接在 reducer 中操作 View 与 Model，几层 reducer 之后很难明确 Model 已经被加工成何种形式</p> </li>     <li> <p>一直会有下一个基于 Redux 的改良封装 Extensions</p> </li>     <li> <p>异步、同步相互依赖场景，复杂 UI 交互，恐怕大部分精力都在考虑 reducers 怎么拆分了</p> </li>    </ul>    <p>不可否定的是，React 和 Redux 是伟大的框架，他们设计思想、核心理念对后续移动领域的发展有着深刻的影响；移动互联网技术的发展反而放大了它们的先天缺陷，这也加快了 Hybrid-App 的进化速度。</p>    <h2>不甘平庸的产物</h2>    <p>在 W3C 制定 HTML5 标准之初，FB 的创始人扎克伯格就曾口出狂言要用 HTML5 技术统一移动端，无奈宣告最终押注失败，随后 React、Redux Web 框架的相继推出表明了他们并未真正放弃，这也为 2015 年 非死book 发布 React Native 框架买下了伏笔。</p>    <p>一心想统一移动端开发的 非死book 在 2015 年宣布了只用 JS 语言开发 Native 应用的框架 React Native（后文称：RN），并提出了新的口号：Learn once write anywhere，新框架强调的是 UI 绘制、交互逻辑思想、开发方式的统一，与 Cordova 不同的是 RN 将 JS 中定义的组件标签都转义成了原生对应的 UI 组件，直接抛弃了 WebKit 中渲染、绘制功能，全部使用 Native 资源，其核心思想是基于 JavaScript 虚拟机将 JSX 编写的组件映射为 Native UI 组件。由于 RN 技术天生就引用了自家的 React.js 技术框架又有整合了 Native 平台 UI 组件，在发布之初让广大前端开发者看到了新的希望。</p>    <p>不同平台的 JS 虚拟机为 RN 提供运行时 JS Context 环境，其中注入了 RN 转义 Native UI 组件的接口，相较于传统的 Cordova 形式的 Hybrid-APP，不深究细节的话，可以认为 RN 使用了原生 UI 组件完美替换了 Web Core 中的 H5 + CSS 的绘制框架。</p>    <p><img src="https://simg.open-open.com/show/436c01edaa151077b5db051591d2e82b.png" alt="大前端的下一站何去何从？" width="550" height="527"></p>    <p>Figure 4 React Native 跨平台开发框架</p>    <p>由于使用了原生 UI 组件，其渲染速度和 UI 流畅度有了质的飞越，前期很多 Web 页面无法支持的效果也可以使用 RN 来实现；只使用 JS/JSX 开发，兼容 Web React.js、Redux.js 等主流框架，RN 自身也实现了大部分 UI 组件的集成工作，再借助活跃的社区，开发效率相比于原有的 Native+Web 形式的 Hybrid-App 有了显著提升。</p>    <p>虽然 RN 在发布早期备受关注，甚至一些互联网企业已经发布了 RN 的商业化平台，但是业内仍然出现了“RN - 由入门到放弃”的声音，究其原因，主要可以归结为以下几类：</p>    <ul>     <li> <p>无法完全抹平跨平台 JS Engine 的差异性，JavaScript Core 的不一致性，RN 的 Android 版本仍然不支持 ES6 的 JSC</p> </li>     <li> <p>发布快四年之久，仍为 0.x 版本，还不能满足 1.0 版本的稳定性（近期 非死book 又在对 RN 进行大规模重构）</p> </li>     <li> <p>RN 社区开源库质量参差不齐，很容易跳进坑里</p> </li>     <li> <p>很多基础框架的库还是不支持 RN，需要自己封装</p> </li>     <li> <p>学习成本高，为了输出一个稳定的版本既要熟悉 iOS 平台特性又要兼顾 Android 平台兼容性</p> </li>     <li> <p>启动时间长，向单一 JSC 中注入一段庞大的 js 插件仍然需要很长时间，即便只是注入基础插件库</p> </li>     <li> <p>RN 框架每一次版本升级所带来的接口向下兼容问题</p> </li>     <li> <p>JS 是单线程的解释性语言，手势、动画仍然是无法解决的痛点</p> </li>     <li> <p>Android 9.0 已经开始着手对插件进行主动封堵，这也会给各种形式 Hybrid 带来一定影响</p> </li>    </ul>    <p>非死book 起初正是考虑到不同浏览器 WebKit 内核的差异性以及 web view 所造成的内存、性能损耗，所以才决定仅仅基于 JS VM，只使用单一的 JavaScript 语言来完成跨平台开发的统一，却忽视了不同平台系统、版本所带来的差异；还有就是 JS 解释性语言先天的单线程执行所带来的硬伤，始终无法屏蔽 JS VM 的效率损耗；有没有哪种框架可以避免这种硬伤，又能满足跨平台开发的需求呢？搅局者 Flutter 出现了。</p>    <h2>搅局者</h2>    <p>Google 这种以创新为本的公司当然不满足于 RN 这种带有瑕疵的框架，Google 开启了 Flutter 框架的开发，至今已发布 1.0 Release 版本。Flutter 从设计初期就选用可编译成机器码的 Dart 语言开发并且决定将 UI 组件和渲染器从平台移动到应用层中，直接避免了由 JavaScript Bridge 引起的性能问题并最大可能降低了系统平台的差异。</p>    <p><img src="https://simg.open-open.com/show/167724881185bb4e6543a3f5fead030b.png" alt="大前端的下一站何去何从？" width="550" height="500"></p>    <p>Figure 5 Flutter 跨平台开发框架</p>    <p>Flutter 实际上是在已有移动平台中搭建了一套独立的开发系统，它也是至今为止唯一提供响应式视图而不需要桥接器的移动 SDK，Flutter 唯一要求是系统提供的 Canvas 、访问事件（触摸、定时器等）和服务（位置、相机等）。其整体架构设计可以总结为一下几点：</p>    <p>1. 一切皆为 Widget，这与 React 中一切皆为组件类似，不过 Widget 承载的定义更广泛一些；</p>    <p>2. 使用 Google 自家的 Dart 语言开发 Flutter Widget，Dart 语言的主要特性就是可编译为机器码，无需依赖桥接器；</p>    <p>3.Flutter 框架在设计上引入了分层结构，每一层都简历在前一层之上，并且开源全部框架代码（个人认为在 Preview 版本全部开源并不利于生态发展）；</p>    <p>4.Flutter 直接基于 GPU 引擎绘制，抛弃系统 UI 组件（原文引用：借助可移植的 GPU 加速的渲染引擎以及高性能本地 ARM 代码运行时以达到跨设备跨平台的高质量用户体验）；</p>    <p>5.Debug Mode 支持 hot reload，减少开发阶段编译、调试时间。</p>    <p>Flutter 框架因为直接基于 Canvas 开发，这也显著降低了在旧版本操作系统上进行兼容性测试的需求；Dart 也拥有和 NPM 类似的软件包仓库，这些软件包也可以扩展当前应用的能力。想为开发者打造一套独立的开发框架，当然你也会猜测到，Flutter 框架不会太完美：</p>    <ul>     <li> <p>Dart 语言的嵌套地狱</p> </li>     <li> <p>由于 Dart 编译器使用了 tree shaking 等技术，也因而在 Flutter 中禁止了 Dart 支持的反射特性</p> </li>     <li> <p>Flutter 无法使用 iOS、Android 自带的设计样式</p> </li>     <li> <p>将 Flutter 开发框架植入现有 iOS、Android 开发工程要做很多适配工作</p> </li>     <li> <p>完全开源的 preview 框架让人担忧其框架生态的健康发展</p> </li>    </ul>    <h2>涨乐现有 Web 容器方案</h2>    <p>涨乐 APP（华泰证券旗下的应用）受限于现有架构和业务需求，对于 RN、Flutter 等框架保持谨慎的态度。我们当前采用 Hybrid 形式进行开发，交互复杂、安全要求较高、内存资源占用高的业务（如：行情、交易、活体检测、双向视频等）均由 Native 开发；场景比较单一、样式频繁变更、交互简单的需求页面则使用 Web 开发。</p>    <p>涨乐 APP 中现有的 Web 框架并未采用 jsBridge 注入的方式，而是仿造 Spring 的设计思路，将现有 Native APP 打造为了一个 Local Server 平台，将 Native 功能打造为一个个独立的 Service 组件，仿造 Rest 接口统一 Native -> Service、Web -> Service 调用协议；Web 开发人员基于 Ajax 调用不同的 Service 组件，LocalServer 负责分发不同的 Service。</p>    <p>涨乐 APP 基于平台优势，拦截了现有 Web 资源加载、请求协议，扩展了 Web 资源的能力及生命周期，避免了传输重复资源耗时；也正是因为有了 Web 拦截机制，涨乐 APP 可以在 Web 容器 初始化的同时进行资源下载操作，这样有效缩短了先初始化容器再下载资源的时间损耗。</p>    <p>相比如 Cordova 方式的优点：</p>    <ul>     <li> <p>利用现有移动平台特点，牺牲 Service 调用分发时间换取对内存空间，尽可能减少注入 js 插件体积</p> </li>     <li> <p>仿 Spring 框架打造的 Local Server 平台，基于 Service 打造 Native 支撑</p> </li>     <li> <p>Web 资源加载协议拦截机制，避免冗余资源文件传输，加速</p> </li>    </ul>    <h2>总结</h2>    <p>本文借用几个主流框架简单介绍了大前端跨端技术框架的发展线路，随着移动应用开发技术的不断发展、成熟，最终会形成一套稳定、统一的跨平台开发体系； 开发者对于 web 容器增强、业务插件化、虚拟运行环境等技术框架的不断深耕、雕琢也都在推进大前端技术朝着一个统一的方向前进 – 多端融合。我们只能通过不断的技术积累、输出，才能追赶上大前端变革的浪潮，让业务更好地依托技术为用户提供更优质的产品体验。</p>    <p> </p>    <p>来自： <a class="cut cut70" href="https://www.infoq.cn/article/9*CZfjFghPVqZJlc7ScM?utm_source=tuicool&utm_medium=referral" style="display:inline-block;">https://www.infoq.cn/article/9*CZfjFghPVqZJlc7ScM</a></p>