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
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励