前端未来发展¶
统计信息：字数 10133 阅读21分钟
本文发布于 2019 年
PWA 进入稳定期，尤其是 PWA 桌面版，可以让我们更好的看清楚 PC 桌面版开发的全貌。移动端还是以强运营为主，各大公司都开始不再 all in 移动，开始重视多端并进，到了开始拼细节的阶段了。TypeScript 全面开花，GraphQL 蠢蠢欲动，WebAssembly 更是打开了浏览器上多语言的大门。
应用层封装进入爆发期¶
Umi 前端框架: React 全家桶 + dva + jest + antd (mobile) + less + eslint
另外，在 create-react-app（cra）项目里使用的是 react-scripts 作为启动脚本，它和 egg-scripts 类似，也是通过约定，隐藏具体实现细节，让开发者不需要关注构建。在未来，类似的封装还会有更多的封装，并且更偏于应用层面。
PWA 进入稳定期¶
PWA 和 native app（移动应用）的核心区别在于以下几点：
- 安装：PWA 是一个不需要下载安装即可使用的应用。
- 缓存使用：native app 主要是对 sqlite 缓存，以及文件读写操作，而 PWA 对缓存数据库操作支持的非常好，足以应对各种场景。
- 基本能力补齐，比如推送。
现在 PWA 已经支持的很好了，唯一麻烦的是缓存策略和发版比较麻烦，应用轻量化的趋势已经很明朗了。下面讲一下 PWA 的一些关键点。
\1. 通用本地存储的解决方案 Workbox
Workbox 是 GoogleChrome 团队推出的一套 Web App 静态资源和请求结果本地存储的解决方案，该解决方案包含一些 JS 库和构建工具，Workbox 背后则是 Service Worker 和 Cache API 等技术和标准在驱动。在 Workbox 之前，GoogleChrome 团队较早时间推出过 sw-precache 和 sw-toolbox 库，但骂声很多，直到 Workbox 才真正诞生了能方便统一的处理离线能力的更完美的方案。
Workbox 现在已经发布到了 3.0 版本，不管你的站点是用何种方式构建的，它都可以为你的站点提供离线访问能力，几乎不用考虑太多的具体实现，只用做一些配置就可以。就算你不考虑离线能力，它也能让你的站点访问速度更快。
比如星巴克的 PWA 应用，对缓存的应用高达 41.3mb。这是浏览器端非常大的突破，尽管没啥新技术。
2.PWA 桌面版
纵观 PC 桌面端的发展过程，早期 Delphi/VB/VF/VC 等构建起的 c/s 时代，即使到今天依然有很大的量。最近两年，随着 Atom/VSCode 的火爆，带动了 node webkit 相关模块的爆发，比如 NW.js 和 Electron 等。通过 Web 技术来构建 pc client，确实是省时省力，用户体验也非常好，比如钉钉客户端、石墨文档客户端等，最主要的是可以统一技术栈，比如某些算法，用 JS 写一次，之后可以到前端、node、pc client 等多处复用。当然更好的是使用 Web 技术进行开发，不需要加壳打包，PWA 桌面版就是这样的技术。
接下来就具体聊一下桌面端的 3 个发展阶段。
第一阶段：原生开发 Native
早年的 VB/VF/VC/Delphi 等原生开发方式，到后来出现 QT 类的跨平台软件，但依然可以理解成是原生开发。
第二阶段：混搭开发 Hybrid
谷歌于 2008 年 9 月 2 日首次发布了 Chrome 浏览器，Node.js 是 Ryan Dahl 于 2009 年发布的，他把 V8 引擎（Chrome 核心 JavaScript 引擎）搬到了后端，使用 js 编写服务器程序变为现实。随后 npm 发展极为迅猛，跨平台技术也突飞猛进，出现了 NW.js 这样的轻量级跨平台框架，基于 Chromium（Chrome 开源版本） + Node.js，使得 PC 桌面端能够通过 Web 开发技术开发，最终打包编译成各个平台支持的应用格式，给 PC 桌面开发带来了太多的可能性。
而 Atom 是 GitHub 在 2014 年发布的一款基于 Web 技术构建的文本编辑器，其中 atom-shell，也就是后来的 Electron，是和 NW.js 类似的技术。它允许使用 Node.js（作为后端）和 Chromium（作为前端）来完成桌面 GUI 应用程序的开发。Chromium 提供了渲染页面和响应用户交互的能力，而 Node.js 提供了访问本地文件系统和网络的能力，也可以使用 NPM 上的几十万个第三方包。在此基础之上，Electron 还提供了 Mac、Windows、Linux 三个平台上的一些原生 API，例如全局快捷键、文件选择框、托盘图标和通知、剪贴板、菜单栏等。
Erich Gamma 老爷子设计的 Monaco／VS Code，同样基于 Electron，但性能比 Atom 强多了。VS Code 会先启动一个后台进程，也就是 Electron 的主进程，它负责编辑器的生命周期管理、进程间通讯、UI 插件管理、升级和配置管理等。后台进程会启动一个（或多个）渲染进程，用于展示编辑器窗口，它负责编辑器的整个 UI 部分，包括组件、主题、布局管理等等。每个编辑器窗口都会启动一个 Node.JS 子进程作为插件的宿主进程，在独立进程里跑插件逻辑，然后通过事件或者回调的方式通知 Renderer 结果，避免了 Renderer 的渲染被插件中 JS 逻辑阻塞。
演进过程：chrome > Node.js > nw.js > atom(electron) > vs code
在第二阶段里，我们可以看到 PC 桌面端以 Web 开发技术作为核心，以浏览器内核作为跨平台核心，最终将 Web 开发的代码和浏览器内核打包。这样做的好处是前端开发相对简单，相对于 C++ 等语言更为方便，另外从成本上考虑，也是极为划算的。
如今，很多应用都开始基于 Electron 构建，比如微信小程序 ide、微信 pc 版本等，另外非常令人激动的是，2018 年 10 月 18 日，迅雷论坛发文称新版（从迅雷 X 10.1 版本开始）采用 Electron 软件框架完全重写了迅雷主界面。使用新框架的迅雷 X 可以完美支持 2K、4K 等高清显示屏，界面中的文字渲染也更加清晰锐利。从技术层面来说，新框架的界面绘制、事件处理等方面比老框架更加灵活高效，因此界面的流畅度也显著优于老框架的迅雷。
第三阶段：PWA 桌面版
王国维在《人间词话》中提出“隔与不隔”这一文学命题，这个问题在开发领域也是存在的。明明是 Web 开发的，为什么还要打包加壳呢？除了体积非常大以外，使用安装也极为麻烦。
Spotify 的 PWA 桌面版应用体验是非常好的，在 mac 上丝般顺滑。
2018 年 Google IO 大会上，微软宣布 win10 全力拥抱 PWA，通过爬虫爬取 PWA 页面，并将其转换为 Appx，继而在其应用商店里提供应用，体验和原生 Native 应用非常相近，对此我非常看好。
浏览器有着超强的缓存能力，外加 PWA 其他功能，使得浏览器上的 PWA 应用能够取得媲美 Native 应用的性能。在浏览器里可以直接打开，无需加壳，很明显这是极为方便的。
PWA 必然会改变前端与移动端之间的格局，再加之 AOT(ahead-of-time) 与 WebAssembly 为 JS 带来的性能上的突破，JavaScript 将撼动所有领域，从移动端（PWA）到桌面应用、物联网、VR、AR、游戏乃至人工智能等等。
Google 接下来会大力推进 PWA 的桌面版，再加上 win10 和 Chrome 加持，Web 应用无需加壳就能达到近乎原生的体验，前端的领域再一次被拓宽，未来真的可以大胆的想想。
很多人问 PWA 在国内为什么感觉不火，原因很简单，PWA 在弱网环境下表现极好，但中国的网络是全球最好的，所以 PWA 其实没有给我们带来那么大的收益。不过当做一个补位方案也挺好的，毕竟 2G/3G 还有点量，另外在服务器渲染 SSR 上，PWA 也能够起到很好的效果。
小程序火爆¶
今年还冒出了微信小程序之外的头条小程序、支付宝小程序、百度智能小程序等，未来还会有很多。同时，手机厂商大概是看到了小程序对其应用商店的威胁，小米、华为、OPPO、vivo 等九大国内手机厂商联手成立了“快应用联盟”，基于 react-native 技术栈，整体也很不错，尤其是天猫调用菜鸟裹裹的快应用，安卓下有非常好的体验。相较而言，微信是基于 Webview 的，而快应用使用的是原生渲染方案，其他家也大抵如此。
TypeScript¶
我之前就非常关注 TypeScript，但迟迟未下定决心在团队内落地。今年 1 月份北京 Node Party 上组了个局，和几位嘉宾一起聊了一下，确认提效非常明显，落地难度也不大，大家一致认为 2019 年 TypeScript 将有非常大的增长。本身前端团队变大，规模化编程也必然依赖类型系统和面向对象的，从这点上看，TypeScript 也是完胜的。
这里再简单介绍一下 TypeScript，它是有类型定义的 JavaScript 的超集，包括 ES5、ES5+ 和其他一些诸如反射、泛型、类型定义、命名空间等特征的集合，为了大规模 JavaScript 应用开发而生。复杂软件需要用复杂的设计，面向对象就是一种很好的设计方式，使用 TypeScript 的一大好处就是 TypeScript 提供了业界认可的类（ ES5+ 也支持）、泛型、封装、接口面向对象设计能力，以提升 JavaScript 的面向对象设计能力。市面上的框架也对 TypeScript 提供了非常好的支持。
React 对.tsx 支持非常好，比如我在 Midway controller 里支持 tsx 写法，这是非常大胆的，对于后面 react ssr 来说是一个极大便利；Vue 从 v2.5.0 之后对 ts 支持就非常好；Node.js Web 框架，尤其是 Egg.js 对 ts 支持非常好，当然还有更高级更专注的的 Midway 框架，Midway 基于 Egg 生态，同时提供 IoC 等高级玩法；
在使用 Webpack 编译前端应用式，通过 TypeScript-loader 可以很轻松地将 TypeScript 引入到 Webpack 中。有了 TypeScript-loader，就可以一边使用 TypeScript 编写新代码，一边零碎地更新老代码。毕竟 ts 是 js 超集，你有空就改，非强制，特别包容。