近年来，Web 应用在整个软件与互联网行业承载的责任越来越重，软件复杂度和维护成本越来越高，Web 技术，尤其是 Web 客户端技术，迎来了爆发式的发展。
在过去的一年中，前端开发的世界再次迅速发展，本文总结了2019年以来前端和Web开发的主要事件和趋势。
关键词：TypeScript、PWA、WebAssembly、Serverless、Flutter、CSS-in-JS
TypeScript 使用率激增
2019年是TypeScript的一年。TypeScript不仅成为在JS代码中添加数据类型的最佳选择，而且许多开发人员会选择在个人项目和工作中使用它。在年初发布的StackOverflow调查中，TypeScript与Python并列第二，成为最受欢迎的语言，仅次于Rust。可以预见，在2020年，它的地位将进一步攀升。
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成为连接Web的第四种语言
什么是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，直接执行，不需要转译，执行效率自然高得多。
WebAssembly成为连接HTML，CSS和JavaScript的Web第四种语言。经过一年的平静之后，WebAssembly在12月初被 W3C 联盟正式收编，并推荐的Web语言。
2019年，很多的公司都开始投入人力进行WebAssembly的学习个改造，相信2020年WebAssembly会经历爆发式期。
Serverless火爆
Serverless 的火爆是乎可以归因于前端。因为 Serverless 能够较完美的⽀持Node.js，使⽤ Serverless 帮助前端开发者解决了使用Node.js 过程中的诸多问题。当前的前端工程师大多都是科班出身，虽不能和正宗的服务端开发同学比，但也可写很多服务端层的业务逻辑。当前已经有很多公司在做 BFF 层，来满足这部分诉求，但依旧摆脱不掉运维、机器分配 这条拦路虎。随着 Serverless 的逐步落地，BFF 这层的代码会摆脱运维、机器分配等复杂的问题，同时大概率会由前端同学写这部分代码，服务端同学专注中台系统的实现。从业务上说，业务的试错成本也会大幅度降低。随着 Node.js 成为前端开发者必备技能之后，云计算的不断普及会让Serverless 触不可及。当越来越多的开发者尝到研发⾼效的甜头之后，Serverless 必将对前端的研发模式产生变化。
同时，使用Serverless的同学一定会使用 TS。这也意味着，2020 不写 TS 可能真的就 Out 了。
Flutter爆炸发展元年，挑战React Native跨平台框架王者地位
Flutter在React Native发行2年后发布，目前Star数已81.1k, 超过React Native的83.2k指日可待。 但其的issue数，已稳定保持了多年的5000+。Flutter没有像React Native那样与React Web开发人员一样拥有开发人员社区来实现共同进步，所以这个受欢迎程度是实打实的：Flutter正在使自己成为最佳的跨平台框架。
CSS-in-JS势头强劲
如前所述，Facebook甚至可能将CSS-in-JS视为前端的未来，并将发布自己的库。 在传统应用中，我们添加样式需要这么做：// Component JS file
const MyComp = ({ isActive }) => {
const className = isActive ? 'active' : 'inactive';
return <div className={className}>HI</div>
}
// CSS file
.active { color: green; }
.inactive { color: red; }
使用CSS-in-JS，你将不再管理CSS类，只需传递props给样式化的组件，它便使用声明性语法处理动态样式。代码更加简洁。 现在，所有内容都像正常的React代码一样读取：
const Header = styled.div`
color：$ {（{isActive}）=> isActive吗？'green'：'red'};
`;
const MyComp =（{isActive}} =>（
<Header isActive = {isActive}> HI </ Header>
）
CSS-in-JS两个主要的库是：styled-components和emotion。
2020年的趋势预测
- TypeScript成为创业公司和新项目的默认选择。未来项目会越来越复杂，用了 TS 项目的风险会可控很多。
- 随着代码拆分和PWA的进一步利用，性能仍然是Web上最重要的一部分。
- WebAssembly变得越来越普遍，得到了实际采用，并被用于产品中。
- Flutter可能会取代React Native成为构建跨平台移动应用的最佳方式。
- CSS-in-JS可能会成为默认的样式设置方法，而不是普通的CSS。
后记： 小伙伴们，如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果觉得本文还不错，记得点个赞哦！ 本文首发地址为： Vae's Blog
