【前端】92-2018 年前端开发回顾

转载

pingan8787 2022-10-13 14:34:11

文章标签 css javascript 开发人员 文章分类 前端开发

作者：Treasure.y

前端开发的世界移动快，非常快。本文将回顾 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 大前端模块下载。请进一步阅读以了解库的最新发展。

【前端】92-2018 年前端开发回顾_javascript

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

【前端】92-2018 年前端开发回顾_开发人员_02

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

GraphQL 已经被 GitHub https://developer.github.com/v4/等技术领导者采用。然而，它并没有像一些人预测的那样迅速发展。根据 JS 现状的调查https://2018.stateofjs.com/data-layer/overview/，只有 1/5 的前端开发人员使用过 GraphQL，但是令人吃惊的是，62.5% 的开发人员听说过并希望使用它。

【前端】92-2018 年前端开发回顾_javascript_03

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。

【前端】92-2018 年前端开发回顾_开发人员_04

当使用单个文件组件时，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 看起来正在从一个狂热的追随者转变为广泛的采用者。

【前端】92-2018 年前端开发回顾_开发人员_05

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/