【闲聊】大前端揭秘

这是一篇标题党，真正的标题叫

GMTC 2017 一些感想和收获 ​

GMTC 2017 已经于 6 月 9 - 10 日在北京召开。这个会议的全称叫作“全球移动技术大会”，今年是第二届。第一届的内容以 App 为主，今年则在大前端的趋势下同时涵盖了 App 和 Web 的主题。

我也非常荣幸地被工程化专场出品人裕波邀请作为演讲嘉宾，讲了富途在 web 前端组件化方面的一些实践经验。

不过，本文的重点还是想以听会者的角度来讲一讲本次参会的一些感想和收获。

大前端 ​

大前端这个概念很多年前就被提出来了，我自己的个人简介也多年来一直写的“关注大前端生态圈”。最近两年，这个概念已变得炙手可热。

什么是大前端呢？这得从端这个概念讲起。端其实是来自英文单词“end”，终端的意思，通俗地理解成设备。而前端则是指用户手上的设备。具体到 web 前端而言，就是指用户访问 web 所使用的设备，那基本上就是 PC / 手机等设备……上面安装的浏览器。而如果去掉 web 的概念，前端其实还可以指用户手机上的 App 。只不过在翻译的时候，我们有意识做了区别，web 的叫前端，native app 的叫终端，事实上，它们都是“end”，或者“front-end”。

所以到这里大前端的概念就呼之欲出了，就是指 web 前端 + native app 这个范围内的东西。之所以这个概念会火，当然不是因为两个概念被相加这么简单，而是大家越来越发现在端上，不同的技术是有充分融合的可能性的。

早些年，谈到 web 和 native 的融合，大家可能唯一能想到的方式就是 webview ，基于这个方案，也有很多成型的框架，最著名的就是Cordova。但是因为 webview 先天在体验和性能上的缺陷，这种方案一直没有成为主流。

近年来，在 webview 的体验改进上，行业内的专家们都付出了相当多的努力，产生了很多具体的方案，比如使用 native UI + webview 结合，将 webivew 不好处理的像滑动、页面切换等交给 native 处理。

在本次 GMTC 大会上，也有听到手Q对 webview 中加载性能的极致优化。他们通过 webview 池、接管 webview 网络、server + native + web 三者结合的增量更新机制等，非常好地提升了 webview 的性能，从现场的展示来看，优化效果非常明显。据说该解决方案将在近期全面开源，可以关注手Q团队的微信公众号“小时光茶社”。

除了使用 webview 之外，还有两个方向，也是大前端的方向：native 动态化和 web native化。

所谓 native 动态化，是指以 React Native 为代表的，使用 JS 驱动 Native UI 的技术。这种方案的好处是可以使用成熟和庞大的 web 生态圈资源，辅助 Native 的开发。比如 JS 的热加载、热更新，JS 框架 React / Vue ，使用 CSS 来进行布局和样式编写等等。目前来看，这仍然是大前端领域一个非常大的热门主题。

web native 化则主要有几个方向：

一个方向是以 AMP 为代表的轻量化 web 方案。在【重发】To A Dark Futuer 一文中，我提到了现行的 web 在移动端其实是有点格格不入的，它太繁重，不适合移动端轻量化的特征。而 AMP 则是要从 web 中挑出一个适合移动端使用的子集，然后加以修饰，让 web 更轻更快，变成移动设备上的一个更漂亮的公民。GMTC 上，来自百度的工程师也提到了他们家的 MIP 方案，和 AMP 如出一辙。特别值得关注的是现场有听众提问，以后我们是否需要准备一个 AMP 版本，再准备一个 MIP 版本，带来新的兼容性适配负担？百度的工程师表示他们会兼容 AMP 。但是现场使用百度搜索了一下一些 AMP 页面，并没有什么神奇的事情发生……

另一个方向是为现有的 web 增加一些 App 才有的能力，这方面的代表技术是 PWA。Google 表示未来 PWA 将在 Android 系统上拥有和 App 同样的地位。目前 PWA 已经支持了将 web 应用放到桌面，有独立图标和独立进程管理，支持使用 Service Worker 进行离线，并具备了消息推送的能力（至于天朝……你懂的）。GMTC 的现场也有来自 Google 的工程师讲解了 PWA 的能力和基本使用方式。不过个人觉得介绍得还是比较浅。对于我更关注的 PWA 未来的计划基本上只字未提。

第三个方向则是以小程序为代表的“再造一个 web 生态”。本次会议上来自小米的工程师分享小米正在研发的框架，基本上可以看作是“MIUI 上的小程序”，这是本次听会感受最强烈的一个主题，跟微信小程序有相似之处，下一篇专门来讲。

其他 ​

1. Instagram 表示他们的 App 至今仍然是单 dex 的结构，也就是方法不超过 65535个，这个比较震惊，对一个用户量如此之大的程序仍然能如此克制，心怀敬意。
2. 微信团队现场开源了他们的 SQLite 包装库 wcdb ，看起来还不错。
3. 路遇图灵的同学也在现场，很贴心地送了两本书。不得不说图灵在作译者关系方面还是照顾得相当好的，赞。