2017前端发展回顾

译者按： 老技术日趋成熟，新技术层出不穷。

本文采用意译，版权归原作者所有



前端开发在 2017 年依然持续火热，本文将对热点事件做一个总结。

16 版的 React 和 MIT 协议

在前端领域，React 一直独占鳌头。2017 年又发布了一个重大的版本更新 version 16。在新版本中，引入了 fiber 结构来支持异步 UI 渲染。该版本也提供了一些错误机制方便处理未预料的应用失败，以及很多其它功能。

不过，最令人惊讶的不是它的新功能新特性，而是对开源协议的更改。Facebook新的协议使得很多公司不再使用 React。另外，Jest, Flow, Immutable.js 和 GraphQL 也使用了该协议。

Progressive Web Apps (PWA)

我们一直在寻找一个可以使用网页技术完美支持其它客户端的方法。谷歌专研于对网页应用增强，将它转换为 progressive web apps(PWA’s)。这一思路在 2017 年被大众迅速接受。PWA 使用现代的浏览器技术使得访问网页应用的体验和原生移动应用一样。并且在性能上有了大幅度的提升，而且支持离线访问，像推送通知这样原生 APP 才有的功能也支持了。PWA 主要是配合manifest.json使用了服务工作线程(service workders)。

Yarn 的出现完善了 JS 软件包系统

NPM 自从诞生以来已经成长巨大，但是却缺失一些很重要的特性，好在被Yarn支持了。Yarn 最主要的功能就是包缓存、一个保证构建确定的锁文件、并行操作、平铺依赖关系。这些功能非常有用，以至于 NPM 在 5.9 版本也实现了。Yarn 累计已经有 10 亿次下载(现在平均每个月 125 万)，在 Github 上有28000+的收藏。就算你没有使用 Yarn，Yarn 对整个包管理系统的提升也让你受益。

CSS 网格单元布局

CSS 终于支持网格单元布局，浏览器很快也会进行支持。在过去，我们需要使用表格(table),float,flex和inline-block来实现网格布局。如今，原生的 CSS 网格布局让我们可以定义行列。赶紧来学习吧: https://gridbyexample.com/。

主流浏览器支持 WebAssembly

WebAssembly(wasm)已经开始被所有主流浏览器支持。wasm 是一个针对浏览器的脚本，它是一种底层级(low-level)字节码格式。因为它的底层性，执行效率可以非常高。而且还提供了JavaScript API供前端开发者接入。火狐已经声明所有浏览器对 wasm 的支持。详情查看: WebAssembly support now shipping in all major browsers

Serverless 架构

2017 年 Serverless 应用持续增热，这是一种新的可以提高性能又减少资源耗费的架构。你的客户端完全从服务器从分离出来，这样就可以只关注应用本身而不是架构。一个常见的实现方法是用 AWS API Gateway 和 AWS Lambda 函数作为后台服务。如果想体验一下，从这篇博客开始吧：A crash course on Serverless with Node.js。

Vue.js 持续火爆

尽管 React 占据这主流市场，尤雨溪大神的Vue作为一个后起之秀大放异彩。Vue 基于组建的架构，它已经成为继 React 之后的首选。Vue 已经被大型公司使用比如GitLab。



Fundebug是全栈 JavaScript 错误监控平台，支持各种前端和后端框架，可以帮助您第一时间发现 BUG！

CSS-in-JS

JavaScript 的技术不断的演进，生态系统逐渐稳定。CSS 技术也不断在进步。2017 年，主要的进步一些单调的特性改进和吸收 CSS-in-JS，也就是说我们可以通过写 JS 代码来定义 CSS。现在还不清楚该技术是否能否主导未来的 CSS 走向，不多这种新颖的技术确实解决了基于组件开发的应用中很多的问题。

2017 年，Max Stoiber, Glen Maddern, Phil Plückthun 开发的styled-components占据了主导地位。Kye Hohenberger 开发的Emotion库被广泛使用。Glamorous也是一个不错的选择，由 PayPal 的 Kent C. Doods, 和一批充满激情的开发者维护。阅读这篇文章了解更多: CSS-in-JS Roundup: Styling React Components。

静态网站生成

2017 年静态网站生成也开始热起来。像Gatsby这样的网站可以使用 React 等现代工具来构建静态网页。不是所有的网站都需要复杂的网页技术。静态网站生成会给您更加极致的网页访问速度。如果您在寻找合适的例子，React 官方文档就是使用 Gatsby 生成的。

静态网站生成有一套工具简称为 JAMStack：JavaScript，APIs，Markup。JAMStack 使用预编译好的 HTML 文件，可复用的 APIs 以及 JavaScript 代码来处理请求。Netlify是一个很好的工具并且提供免费的 Host 服务。Brian Douglas 写了一篇很好的文章：通过实现 Hacker News 来对比 JAMStack 和服务端渲染 APP 的优劣。

GraphQL

GraphQL日趋火爆，有胜过 REST 之势。Samer Buna 甚至宣传REST 已死。GraphQL 允许客户端自定义数据，然后一次获取。而 REST 方案需要维护获取很多无效数据。Github 的新版 API 已经使用 GraphQL 重写。Johannes Schickling 为此开发了 Graphcool(GraphQL Backend Development Framework)框架。

React Router 4

由 Ryan Florence 和 Michael Jackson 开发的 React Router 最开始仅仅是 React 中可以使用的一个 router 包，而现在已经完全变成真正的 React Router，成为 React 的部件之一。所有的 API 都基本稳定，React Training Team 承诺该项目不会有大的变动，可以放心使用。

Angular 快速发布了 v4 和 v5

在悄悄地跳过 Angular 3 之后，Angular 4 在 3 月 23 号正式发布。在 Angular 4 中，Angular 团队吸收了社区项目 Angular Universal。Angular Universal 提供了服务端渲染 Angular 应用的机制。Angular Animation 从@angular/core中移出。如果你需要使用，需要手动引入。Angular 的 AOT 编译(Ahead Of Time compilation)经过重构，性能提升。而生成的代码的体积也大幅缩小，最多可达 60%。

在版本 5 中实现了一些等待了很久的改进功能。Angular 5 提供了@angular/service-worker，因此创建 PWA 变得非常简单。Angular 的编译器经过优化，编译时间缩短。Angular Router 将所有生命周期 Hook 暴露，包括 ActivationStart, ActivationEnd, ResolveStart, and ResolveEnd。

TypeScript 和 Flow

TypeScript有大量的开发者拥泵，Flow提供了一个灵活地引入类型的方法可以避免对现有代码进行大量的重构。很多开发者都抱怨 JavaScript 没有类型，微软设计的 TypeScript 应运而生，在最新版本的 Angular 中，TypeScript 已经是默认配置。Flow 是 Facebook 实验室研发的一个类型检查工具。

2018 年我们期待什么

  • 在找到基于组件架构 APP 适合的 CSS 方式之前，CSS 技术还将持续发酵；
  • 越来越多的公司会使用统一的代码库来处理移动端和网页端，比如React Native和Flutter；
  • 随着离线能力和和移动的无缝衔接，网页 APP 会更加接近原生；
  • WebAssembly 将会前进一大步；
  • GraphQL 持续挑战 REST；
  • Flow 和 TypeScript 使得 JavaScript 更加地结构化；
  • 容器技术会影响到前端架构的设计；
  • 虚拟现实会继续成熟，依托于大量成熟的库A-Frame，React VR，Google VR；
  • 将会有人使用区块链和web3.js开发出很酷的应用；

关于Fundebug

Fundebug专注于JavaScript、微信小程序、支付宝小程序线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了80亿+错误事件。欢迎大家免费试用！

版权声明

转载时请注明作者 Fundebug以及本文地址：
https://blog.fundebug.com/2017/12/25/a-recap-of-frontend-dev-2017/

您的用户遇到BUG了吗？

体验Demo 免费使用