【译】2018 年前端开发回顾

2,250 阅读12分钟

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


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

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

WebAssembly 通常被认为是互联网的未来。它的目标是通过提供在 web 上运行的二进制格式来最大化性能,减少文件大小,实现多语言 web 开发。

在 2017 年底所有主流浏览器宣布他们支持 WebAssembly。然后在 2018 年 2 月,WebAssembly 有三个主要的版本:

流行的前端库在 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 已经被 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文件,从而实现单页体验。

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

Serverless 架构和 JAMStack

随着静态站点越来越受欢迎,我们也看到了后端对它们的不断增长。在过去的几年里,Serverless 架构已经成为 web 开发中的一个流行词,因为它能够在降低成本的同时解耦客户端和服务端的代码。

Serverless 理念的一个扩展是 JAMStack (JavaScript、APIs、Markup)。JAMStack 理念基于上一节讨论的静态站点概念。通过预构建标签,它允许减少加载时间,并通过使用服务器上可复用的 APIs,从而在客户端上成为一个动态的单页应用。在 2018 年,我们甚至看到了有史以来的第一场 JAMStack 黑客马拉松freeCodeCampNetlifyGitHub 联手举办了一场面对面和在线的黑客马拉松,人们可以在 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 NativeFlutter
  • 集装箱化的影响(如 Docker, Kubernetes)在前端过程中变得更为普遍
  • GraphQL 在采用方面有了飞跃,并被更多的公司使用。
  • TypeScript 开始成为标准 JavaScript 的默认选择。
  • 虚拟现实技术利用 A-FrameReact VR谷歌 VR 等库取得了长足的进步。

附:2017 年前端开发回顾