【译】2018 年前端开发回顾

时间 2019-11-17

标签前端开发回顾繁體版

原文原文链接

原文地址：levelup.gitconnected.com/a-recap-of-…javascript

前端开发的世界移动快，很是快。本文将回顾 2018 年最重要的前端新闻，引人注目的事件，以及 JavaScript 的趋势。html

WebAssembly 主要版本的核心规范达到了 1.0

WebAssembly 一般被认为是互联网的将来。它的目标是经过提供在 web 上运行的二进制格式来最大化性能，减小文件大小，实现多语言 web 开发。前端

在 2017 年末全部主流浏览器宣布他们支持 WebAssembly。而后在 2018 年 2 月，WebAssembly 有三个主要的版本：vue

流行的前端库在 NPM 的下载量

React、jQuery、Angular 和 Vue 是最受欢迎的 4 大前端模块下载。请进一步阅读以了解库的最新发展。java

React 继续它的统治地位，随着库的发展

React 在 web 开发领域占据主导地位已有多年，并且在 2018 年期间丝毫没有放缓。根据Stackoverflow 的调查，它仍然是最受欢迎的库之一。react

核心 React 团队在更新库和添加功能方面很是活跃。在整个 2018 年，咱们看到 React v16 发布增长了许多功能，包括新的生命周期方法、新的上下文 API、指针事件、延迟函数和 React.memo。然而，最受关注的两个特性是 React hook 和 Suspense API。git

React hook 获得了一些强烈的反馈，许多开发人员都喜欢这个更新。Hooks 是一种使用 useState 函数向函数式组件添加状态的方式，它还将管理生命周期事件。github

在下面的视频中，Ryan Florence 展现了 React Hooks 让他的示例应用程序更干净了90%web

另外一个巨大的版本是 React Suspense，它是一种管理在 React 组件内部获取数据的方法。它在等待异步响应时暂停渲染数据。Suspense 指的是延迟函数背后用来管理组件的代码分割。最终的设想是可以经过 suspense API 管理全部异步加载，例如 API 请求。它还容许缓存来自请求的结果。macos

举的例子显示了许多加载中的旋转，当你的 isFetching 标记是 true 的时候。经过 Suspense，您能够对 UI 进行细粒度控制，以指定在等待时但愿显示什么回退组件、等待多长时间以及如何管理导航。许多人甚至认为 Suspense 能够移除 Redux 的须要。看看 Dan Abramov 谈论如何使用 Suspense API 创建一个应用程序 🔥.

Vue 继续在增加，经过 React 在 GitHub 的 Stars 数来看

在 2017 年实现爆炸式增加后，Vue 在 2018 年继续增加。事实上，它在 GitHub 上接收的 star 数量甚至超过了 React。

恭喜 @vuejs 超越了 React 的明星榜 GitHub！我好像不当心抓住了一个历史性的时刻。 ——@dan_abramov

虽然 Vue 深受欢迎，但它在实际使用中仍远远落后于 React 和 Angular。然而，Vue 拥有一个仍在增加的充满激情的用户群，并且这个库看起来将在将来几年成为一股强大的力量

Evan You（Vue 创造者）向咱们展现了将会发版的 Vue 3

Vue 正在向 3.0 版本努力。创造者 Evan You 在 11 月的 VueConf Toronto 和下面连接的一篇文章中对它进行了概述。他已经在网上发布了他的幻灯片，视频很快就会出来。

sliders

Angular 继续被积极利用，发布了 v7

今年 10 月，Angular 发布了另外一个重要版本，版本 7 是其流行的 UI 框架。Angular 已经见证了从早期的 AngularJS MVC 架构到更现代的使用组件的 Angular 包的大量成长。随着这种增加，它获得了进一步的采用。

虽然 Angular 没有咱们在 React 和 Vue 等库中看到的那么多狂热的粉丝，但它仍然是专业项目的热门选择。许多开发人员在使用 React 时都会感到疲惫，由于它须要工程师在管理构建流的同时作出许多依赖和架构决策。

另外一方面，Angular 从开发人员那里移除许多决策，并帮助确保了更常见的代码模式。Angular 是一个很是执拗己见的完整框架，CLI 管理全部构建步骤。专业的环境有另外一个好处是，Angular 须要 TypeScript。Angular 已经在 web 开发世界中挖掘出了它的价值，并继续被采用。

注意:@angular/core 表明新的 Angular， Angular 表明旧的 Angular

GraphQL 在“学习欲望”中有所增加，但并无超过 REST

GraphQL 已经被 GitHub 等技术领导者采用。然而，它并无像一些人预测的那样迅速发展。根据 JS 现状的调查，只有 1/5 的前端开发人员使用过 GraphQL，可是使人吃惊的是，62.5% 的开发人员据说过并但愿使用它。

CSS-in-JS 得到了更多的采用

Web 开发彷佛已经走上了在 JavaScript 下统一全部的道路，这一点在 CSS-in-JS 的采用中获得了体现，其中样式是使用 JavaScript 字符串建立的。这容许咱们经过 import/export 使用普通 JS 语法共享样式和依赖项。它还简化了动态样式，由于 CSS-in-JS 组件能够将 props 插入到它的样式字符串中。下面是一个经典的 CSS vs CSS-in-JS 的例子。

要使用 CSS 管理动态样式，您必须管理组件中的类名，并基于状态/属性更新它。你还须要一个 CSS 类的变量:

// 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 的关注点有了更清晰的分离，并经过容许 CSS 管理基于 props 的动态样式来作出反应。这一切读起来就像正常的 React 和 JavaScript 代码：

const Header = styled.div`
      color: ${({ isActive }) => isActive ? 'green' : 'red'};
    `;
    const MyComp = ({ isActive }} => (
      <Header isActive={isActive}>HI</Header>
    )
复制代码

CSS-in-JS 的两个领先的库是 styled-components 和 emotion。styled-components 已经存在了很长一段时间，而且被愈来愈多的人采用，可是 Emotion 正在迅速获得普及，许多开发人员发现它是首选库。事实上，Kent C. Dodds 甚至不同意他的 CSS-in-JS 库，由于它颇有魅力，更倾向于 Emotion。

当使用单个文件组件时，Vue 还支持开箱即用的 scoped CSS。经过将 scoped 属性添加到组件的样式标记，Vue 将会使用 CSS-in-JS 技术来使这些样式在 scope 中，这样它们就不会渗透到其余组件中。

此外，Angular 经过“视图封装”支持 CSS 的做用域。这是默认打开的。

开发人员能够从 CLI 工具的疲劳中获得缓解

跟上最新的库、正确配置应用程序并作出正确的架构决策，这些都不是什么秘密。这种痛苦催生了管理工具的 CLI 包的建立，让开发人员可以专一于应用程序。这种工具已成为开发人员在 2018 年建立应用程序的主要方式。流行的框架包括 Next.js （React SSR）， Create-React-App（客户端 React）， Nuxt.js（Vue SSR）、Vue CLI（客户端 Vue）、Expo CLI（用于 React Native），默认状况下支持 Angular。

静态站点生成器在增加，随着咱们试图简化前端和寻求性能上

随着 JavaScript 革命的发生，每一个人都喜欢学习最新最好的库，可是如今事情已经解决了，咱们意识到并不是每一个网站都须要成为一个复杂的单页面应用程序（SPA），这致使了静态站点生成器的增加。这些工具容许您在本身喜欢的库（如 React 或 Vue）中编写代码，在构建期间生成静态 HTML 文件，容许咱们当即为用户提供完整的构建好的页面。

静态站点很棒，由于它们提供了性能与简单性的理想结合。使用构建好的 HTML 文件，咱们能够当即向用户发送一个页面，而不须要 SSR 或 CSR 代码，容许他们几乎在瞬间加载站点。而后在客户端上下载必要的 JavaScrip t文件，从而实现单页体验。

静态站点很是适合构建我的网站或博客，可是它们能够很容易地扩展到更大的应用程序。咱们已经看到了构建静态网站的流行框架的兴起，好比 Gatsby 和 React static 对于 React应用，以及 VuePress 对于 Vue 应用。事实上，静态站点已经变得如此流行，以致于 Gatsby 实际上已经成立了一家公司，并在去年得到了风险投资。

Serverless 架构和 JAMStack

随着静态站点愈来愈受欢迎，咱们也看到了后端对它们的不断增加。在过去的几年里，Serverless 架构已经成为 web 开发中的一个流行词，由于它可以在下降成本的同时解耦客户端和服务端的代码。

Serverless 理念的一个扩展是 JAMStack （JavaScript、APIs、Markup）。JAMStack 理念基于上一节讨论的静态站点概念。经过预构建标签，它容许减小加载时间，并经过使用服务器上可复用的 APIs，从而在客户端上成为一个动态的单页应用。在 2018 年，咱们甚至看到了有史以来的第一场 JAMStack 黑客马拉松。freeCodeCamp、Netlify 和 GitHub 联手举办了一场面对面和在线的黑客马拉松，人们能够在 GitHub 总部编写代码，或者与世界各地的其余开发人员联系。

为了理解 JAMStack 网站在保持性能的同时能够扩展到多大，[Quincy LarsonQuincy_Larson 解释了 freecodecamp.org 是如何由 JAM 架构提供支持的。

TypeScript 多是 JavaScript 的将来（但不能说它是 Flow 的将来）

JavaScript 由于没有静态类型变量而受到批评。试图纠正这一问题的两个主要库是 TypeScript 和 Flow，但 TypeScript 彷佛是最受欢迎的。事实上，在 Stack Overflow 最受喜好的语言调查中，TypeScript 比分比 JavaScript 更高，达到了 67% vs 61.9%。根据 JS 的现状调查，超过 80% 的开发者想要使用 TS 或者已经在使用并享受它。而对于 Flow，只有 34% 的开发人员正在使用它或但愿使用它。

全部迹象代表，TypeScript 是 JS 静态类型的首选解决方案，许多人选择它而不是普通的 JavaScript。2018 年，TS 的 npm 下载量大幅增加，而 Flow 却很是平稳。TypeScript 看起来正在从一个狂热的追随者转变为普遍的采用者。

Webpack 4 在 2018 年初落地

Webpack 3 发布仅 8 个月后，版本 4 就发布了。Webpack 4 继续推进简单和更快的构建，声称改进了 98%。它选择了合理的默认值，在没有插件的状况下处理更多的开箱即用的功能，而且再也不须要开始使用配置文件。Webpack 如今也支持 WebAssembly，并容许您直接导入 WebAssembly 文件。

Babel 7.0 发布

自版本 6 问世后的近 3 年时间，Babel 7 于 2018 年发布。Babel 是一个库，它将 ES6+ JavaScript 代码转换为 ES5，使咱们的 JavaScript 代码跨浏览器兼容。Babel 发布的文章说 v7 的改进是“更快，建立了一个升级工具，JS 配置，配置 overrides，更多的 size/minification 选项，JSX片断，TypeScript，新提议，等等!” Babel 相关的一些包开始在 @babel 命名空间下。

2018 年最有影响力的文章

Addy Osmani 向咱们展现了 JavaScript 在 2018 年的成本

咱们 11 月在 React Conf 了解了 React 的将来

Airbnb 分享了他们在 React Native 两年的经验

谷歌向咱们展现了 Google Photos Web UI 的底层

微软正在为 Edge 浏览器采用 Chromium

Ryan Dhal（Node 创造者）告诉咱们他在 Node 上犯的错误，并简要介绍了 TypeScript 运行时 Deno

2019 年的预测

随着基础的创建和对改进 web 体验的不断推进，WebAssembly 将开始看到更多的生命力。
React 依然高居榜首，但 Vue 和 Angular 的用户数量仍在增加。
CSS-in-JS 可能会成为默认的样式方法，取代普通的 CSS
开发人员是否能够从新审视原生 Web 组件?
绝不奇怪，性能仍然是关注的焦点，诸如 PWAs 和代码分割之类的事情成为每一个应用程序的标准。
在采用 PWA 的基础上，web 变得更加本地化，具备离线功能和无缝的桌面/移动体验
咱们继续看到 CLI 工具和框架的增加，以继续抽象出构建应用程序的繁琐方面，容许开发人员专一于生成特性。
更多的公司采用具备统一代码库的移动解决方案，如 React Native 或 Flutter。
集装箱化的影响（如 Docker， Kubernetes）在前端过程当中变得更为广泛
GraphQL 在采用方面有了飞跃，并被更多的公司使用。
TypeScript 开始成为标准 JavaScript 的默认选择。
虚拟现实技术利用 A-Frame、React VR 和谷歌 VR 等库取得了长足的进步。

附：2017 年前端开发回顾