聊聊大前端发展趋势以及 2020 年展望

近年来，Web 应用在整个软件与互联网行业承载的责任越来越重，软件复杂度和维护成本越来越高，Web 技术，尤其是 Web 客户端技术，迎来了爆发式的发展。

1.用Node做中间层的前端工程化方案2.Webpack、Rollup 这样的打包工具；Babel、PostCSS 这样的转译工具3.前端三架马车React、Angular、Vue 这样面向现代 web 应用需求的前端框架及其生态4.与APP结合的混合开发模式，内嵌单页webview，Hybrid App

当然了，所谓的趋势，不是一天两天就到来的，它是未来的一个技术方向，我们之所以关注趋势，是要关注变化，技术的发展与普及不是一日之功，一定是慢慢过渡的，但是你能够比其他人提前看到方向，真正的市场到来的时候，你就可以提前做好准备，提前发掘机会。

从 Facebook 的 Reactive Native，再到 Google 的 Flutter，足以看出，起码对这些科技巨头们来说，他们是认定这个方向，并且在投入的，只是当下技术还不够成熟，所以这类前端跨平台开发框架都还不够普及，但是你们得相信，这些巨头的判断与实力。

再说到国内各种平台的小程序，微信小程序、支付宝小程序等等，其实都是属于真正意义的大前端，所以前端开发人员，以后的要求会越来越全面，你别觉得不信，等着未来的发展就知道了，以后很可能一个前端开发必须是全栈前端。

TypeScript 使用率激增

2019 年是 TypeScript 之年。TypeScript 不仅成为了在 JS 代码中添加数据类型的事实选择，而且许多开发人员会经常在个人项目和工作中，用它来代替普通的 JavaScript。

在 2019 年初发布的 StackOverflow 调查中，TypeScript 与 Python 并列最受欢迎语言次席，仅次于 Rust。在 2020 年初将发布的新调查中，如果我们看到 TypeScript 的排名再进一步，应该也不会有什么奇怪。

TypeScript 已经席卷了整个 Web 开发世界——前端和后端皆是如此。一些开发人员认为 TS 只是跟风炒作的产物，觉得它会步 CoffeeScript 后尘；但 TypeScript 已被证明可以解决 JS 开发人员面临的一大核心问题，而且它的使用率看来只增不减。TypeScript 与所有主流文本编辑器的集成，为 Web 开发人员提供了更好的开发体验。JavaScript 开发人员将 TypeScript 视为一种工具，它可以减少错误，还可以通过（提供自带描述的）类型和对象接口更轻松地读取代码。

值得注意的是，TypeScript 在 2019 年的 NPM 下载量超越了 React，其流行程度可见一斑。此外，它的下载量也比 Flow 和 Reason 等竞争对手高得多。

下一代Web应用：PWA

老生常谈，我们先对比一下生活中WebAPP 和 原生APP的优劣

web APP 对比 原生APP 的优势，开发成本低，适配多种移动设备，不用IOS 安卓多套代码，迭代更新容易,省去了审核、发包、各种渠道发布带来的时间损耗，无需安装成本，拿来即用

当然原生APP也有它独到的优势，这些web app所没有的优势我们也不知道以后会不会有突破！

PWA解决的问题

能够显著提高应用加载速度

甚至让 web 应用可以在离线环境使用  （Service Worker）

web 应用能够像原生应用一样被添加到主屏、全屏执行 （Web App Manifest）

进一步提高 web 应用与操作系统集成能力，让 web 应用能在未被激活时发起推送通知 （Push API 与 Notification API） 等等。

推送Push Notification

Push API 的出现则让推送服务具备了向 web 应用推送消息的能力，它定义了 web 应用如何向推送服务发起订阅、如何响应推送消息，以及 web 应用、应用服务器与推送服务之间的鉴权与加密机制；由于 Push API 并不依赖 web 应用与浏览器 UI 存活，所以即使是在 web 应用与浏览器未被用户打开的时候，也可以通过后台进程接受推送消息并调用 Notification API 向用户发出通知

WebAssembly

什么是WebAssembly

WebAssembly 是由主流浏览器厂商组成的 W3C 社区团体 制定的一个新的规范。

它的缩写是”.wasm”，.wasm 为文件名后缀，是一种新的底层安全的二进制语法。

可以接近原生的性能运行，并为诸如C / C ++等语言提供一个编译目标，以便它们可以在Web上运行。它也被设计为可以与JavaScript共存，允许两者一起工作。

能突破前端3D game  、 VR/AR 、 机器视觉、图像处理等运行速度瓶颈

WebAssembly 是一种新的字节码格式，目前主流浏览器都已经支WebAssembly。和 JS 需要解释执行不同的是，WebAssembly 字节码和底层机器码很相似，可以快速装载运行，因此性能相对于 JS 解释执行而言有了极大的提升。也就是说WebAssembly 并不是一门编程语言，而是一份字节码标准，需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行， 浏览器厂商需要做的就是根据 WebAssembly 规范实现虚拟机。

有了 WebAssembly，在浏览器上可以跑任何语言。从 Coffee 到 TypeScript，到 Babel，这些都是需要转译为 js 才能被执行的，而 WebAssembly 是在浏览器里嵌入 vm，直接执行，不需要转译，执行效率自然高得多。

举个例子，AutoCAD 软件是由美国欧特克有限公司（Autodesk）出品的一款自动计算机辅助设计软件，可以用于绘制二维制图和基本三维设计。使用它时，无需懂得编程，即可自动制图，因此它在全球被广泛应用于土木建筑、装饰装潢、工业制图、工程制图、电子工业、服装加工等诸多领域。

AutoCAD 是由大量 C++ 代码编写的软件，经历了非常多的技术变革，从桌面到移动端再到 web。之前，InfoQ 上有一个演讲，题目是《AutoCAD & WebAssembly: Moving a 30 Year Code Base to the Web》，即通过 WebAssembly，让很多年代久远的 C++ 代码在 Web 上可以运行，并且保证了执行效率。

hrome 的核心 JavaScript 引擎 V8 目前已包含了 Liftoff 这一新款 WebAssembly baseline 编译器。Liftoff 简单快速的代码生成器极大地提升了 WebAssembly 应用的启动速度。2019年，很多的公司都开始投入人力进行WebAssembly的学习个改造，相信2020年WebAssembly会经历爆发式期。

Serverless

Serverless 的火爆是乎可以归因于前端。因为 Serverless 能够较完美的⽀持Node.js，使⽤ Serverless 帮助前端开发者解决了使用Node.js 过程中的诸多问题。当前的前端工程师大多都是科班出身，虽不能和正宗的服务端开发同学比，但也可写很多服务端层的业务逻辑。当前已经有很多公司在做 BFF 层，来满足这部分诉求，但依旧摆脱不掉运维、机器分配 这条拦路虎。随着 Serverless 的逐步落地，BFF 这层的代码会摆脱运维、机器分配等复杂的问题，同时大概率会由前端同学写这部分代码，服务端同学专注中台系统的实现。从业务上说，业务的试错成本也会大幅度降低。

随着 Node.js 成为前端开发者必备技能之后，云计算的不断普及会让Serverless 触不可及。当越来越多的开发者尝到研发⾼效的甜头之后，Serverless 必将对前端的研发模式产生变化

同时，使用Serverless的同学一定会使用 TS。这也意味着，2020 不写 TS 可能真的就 Out 了。

2020 年展望

① TS 一定会在火的，现在用 TS 的感觉，让我感觉跟 vim 很像，刚开始用的时候很难受，一旦习惯了就离不开了。未来项目会越来越复杂，用了 TS 项目的风险会可控很多。

② 多注重框架原理，夯实深度，现在对于前端工程化，注重原理才能很好的应对未来的发展。

③ 眼界放宽、拓宽自己知识的广度，多做一些产品以及方向上的探索。