2018 年前端开发回顾
作者：Treasure.y
链接：https://juejin.im/post/5c13760ee51d4545ca722d45
前端开发的世界移动快，非常快。本文将回顾 2018 年最重要的前端新闻，引人注目的事件，以及 JavaScript 的趋势。
WebAssembly 主要版本的核心规范达到了 1.0
WebAssembly 通常被认为是互联网的未来。它的目标是通过提供在 web 上运行的二进制格式来最大化性能，减少文件大小，实现多语言 web 开发。
在 2017 年底所有主流浏览器宣布他们支持 WebAssembly。然后在 2018 年 2 月，WebAssembly 有三个主要的版本：
核心规范发布 1.0https://www.w3.org/TR/wasm-core-1/
WebAssembly 的 JavaScript 接口https://www.w3.org/TR/wasm-js-api-1/
WebAssembly 的 Web APIhttps://www.w3.org/TR/wasm-web-api-1/
流行的前端库在 NPM 的下载量
React、jQuery、Angular 和 Vue 是最受欢迎的 4 大前端模块下载。请进一步阅读以了解库的最新发展。
React 继续它的统治地位，随着库的发展
React 在 web 开发领域占据主导地位已有多年，而且在 2018 年期间丝毫没有放缓。根据Stackoverflow 的调查，它仍然是最受欢迎的库之一。
核心 React 团队在更新库和添加功能方面非常活跃。在整个 2018 年，我们看到 React v16 发布增加了许多功能，包括新的生命周期方法、新的上下文 API、指针事件、延迟函数和 React.memo。然而，最受关注的两个特性是 React hook 和 Suspense API。
React hook 得到了一些强烈的反馈，许多开发人员都喜欢这个更新。Hooks 是一种使用 useState 函数向函数式组件添加状态的方式，它还将管理生命周期事件。
在下面的视频中，Ryan Florence 展示了 React Hooks 让他的示例应用程序更干净了90%
另一个巨大的版本是 React Suspense，它是一种管理在 React 组件内部获取数据的方法。它在等待异步响应时暂停渲染数据。Suspense 指的是延迟函数背后用来管理组件的代码分割。最终的设想是能够通过 suspense API 管理所有异步加载，例如 API 请求。它还允许缓存来自请求的结果。
举的例子显示了许多加载中的旋转，当你的 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 已经被 GitHubhttps://developer.github.com/v4/等技术领导者采用。然而，它并没有像一些人预测的那样迅速发展。根据 JS 现状的调查https://2018.stateofjs.com/data-layer/overview/，只有 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 类的变量：
使用 CSS-in-JS，您不再管理 CSS 类。您只需将 props 传递给样式组件，它就可以处理动态样式。代码更加清晰，我们对样式和 React 的关注点有了更清晰的分离，并通过允许 CSS 管理基于 props 的动态样式来做出反应。这一切读起来就像正常的 React 和 JavaScript 代码：
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 年的成本https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
我们 11 月在 React Conf 了解了 React 的未来https://reactjs.org/blog/2018/11/13/react-conf-recap.html
Airbnb 分享了他们在 React Native 两年的经验https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1c
谷歌向我们展示了 Google Photos Web UI 的底层https://medium.com/google-design/google-photos-45b714dfbed1
微软正在为 Edge 浏览器采用 Chromiumhttps://techcrunch.com/2018/12/06/microsoft-edge-goes-chromium-and-macos/
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 年前端开发回顾https://levelup.gitconnected.com/a-recap-of-front-end-development-in-2017-7072ce99e727
●编号860，输入编号直达本文
●输入m获取文章目录
推荐↓↓↓
Web开发
更多推荐《25个技术类微信公众号》
涵盖：程序人生、算法与数据结构、黑客技术与网络安全、大数据技术、前端开发、Java、Python、Web开发、安卓开发、iOS开发、C/C++、.NET、Linux、数据库、运维等。
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20181225B0FF2Y00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
