前端领域2017年有哪些变化,2018年又有怎样的期待?

以下为我在知乎问题「2017年前端有什么样变化?即将来临的2018有什么样的期待?」下的回答,稍作整理分享给大家。如有遗漏欢迎在评论中指出。原文如下:

在即将过去的2017年里,我们回顾:

逃不过的三大框架

React继续在前端领域占据着主导地位,并在 2017 年发布了最受期待的版本之一 - React 16。 它包含了可以实现异步 UI 渲染的 fiber 架构。通过提供包括错误边界在内的很多其他特性。但 React 在这一年中所取得最重要的成就不是它推出的新特性,而是修改了它的开源协议:BSD 协议 -> MIT 协议。除此外,Jest、Flow、Immutable.js 和 GraphQL 授权也都改为 MIT 协议。

Angular市场占有率持续下滑(相较于 React ),发布了V4(3月23日)以及 V5(11月2日),在 V4 中看到了 Angular Universal 成为官方项目的一部分以及 Angular Animation 从核心包中被抽离出来,V5 中则对 PWA 支持进行了改进、对编译器优化达到更快地构建等。

即便 React 获得了巨大成功,Vue(作者尤雨溪)也仍然越来越受欢迎。该框架提供了非常友好、简单的 API,是 React 的主要替代方案之一。它已经被包括 GitLab在内的大公司所采用,该公司回顾了在过去的一年里使用该框架的故事。

注:上图为三大框架过去一年中在 NPM 的下载量对比图,以下类似的框架/包对比图均采用 npmtrends 一年内下载量进行对比,同时附有 GitHub 上 star/fork 等状态信息。

ECMAScript

在一个详尽的提案过程结束之后,六月份发布了 ECMAScript 规范的2017年版本,其中包括一些开创性的功能,如异步功能,共享内存和原子操作(atomic operations)。其中,共享内存将使 JavaScript 中的高性能并行计算更容易处理,而且效率更高。拥有共享内存的并行架构对于任何想用 WebGL 和 web worker 创建游戏的人来说都是巨大的诱惑。

该版本在2017年12月已经被所有主流浏览器所支持,Edge 表示将从 v16 版本开始对这些功能进行支持。由于 Node 不支持 web worker,所以他们也没有对共享内存的支持,但他们正在重新思考该项决定。

WebAssembly

所有主流浏览器现在都支持 WebAssembly,五月份 Chrome 开始支持,Firefox 则是从三月份就开始支持,Edge 是十月份。 Safari 则在第十一次发布中开始支持。Chrome for Android 和 Safari Mobile 也支持 WebAssembly。详情可以参考 WebAssembly support now shipping in all major browsers – The Mozilla Blog

Progressive Web Apps

我们一直在寻找弥补 web 和其他客户端之间体验差距上的解决方案。Google 一直主导通过将 web 应用转换为 Progressive Web Apps(PWA) 来增强它的能力,而这一方法在 2017 年迅速获得采用。一个 PWA 应用利用现代浏览器技术来提供更像移动应用程序的 web 体验。它提供了改进的性能和离线体验,以及以前仅可用于移动的功能,例如推送通知。 PWA 的基础是一个 文件和对 service workers的利用。详情见 Progressive Web Apps: Great Experiences Everywhere (Google I/O ‘17)。

包管理器

Bower市场占有率持续下降,它的最后一次发布在2016年11月,之后官方正式推荐用户使用 NPM 用于管理前端项目中的软件包。

NPM 自从最初发布以来已经有了相当长的一段时间,但它仍然缺少一些关键特性,而这正是 Yarn 希望补充的。Yarn的主要贡献是包缓存,一个确保确定性构建的锁文件,并行操作以及依赖关系。这些功能非常成功,以致于 NPM 在其 5.0 版本中实现了它们。Yarn 下载量超过 10 亿次(目前每月下载量达到了 125 万次)并拥有惊人的 29000 多个 GitHub stars。即使你没在使用 Yarn,JavaScript 的包管理整体上由于 Yarn 的发布也得到了显著地提升 。

针对 Yarn 的出现,NPM回击以 v5 版本的发布,这个版本显著提高了性能(包括上述的 Yarn 发布的功能) 。

样式布局

网格布局最终被 CSS 采纳为标准,浏览器也正在快速地采用它。过去,网格系统在 CSS 中曾被 、、 以及 实现过。

2017 年见证了 styled-components(由 Max Stoiber、Glen Maddern和 Phil Plückthun创建) 在流行程度上逐渐占据主导地位。Emotion(由 Kye Hohenberger创建)是最新的 JavaScript 库之一,但它已经被迅速采用。另一个可选方案是 glamorous(由 PayPal、Kent C. Dodds 和一群热情的贡献者创建),它封装了 glamor库。

在过去的几年里,像SASS,Less和Stylus这样的CSS预处理器已经流行起来。PostCSS 于2014年推出,而在2017年真正火爆起来,成为目前最受欢迎的 CSS 预处理器。

另一方面,在 2017 年,主要的进步来自 CSS-in-JS 的明显改进与采用,其中所有样式都是通过代码而不是样式表进行构建的。目前还不清楚这是否将成为前端社区的最终方向,但这是目前最新的方法。

PostCSS 仍然是首选的 CSS 预处理器,但是很多都在切换到 CSS-in-JS 解决方案。

注:评论中有同学谈到 PostCSS 是后处理器,根据定义,CSS 后处理器是对 CSS 进行处理,并最终生成 CSS 的预处理器,它属于广义上的 CSS 预处理器。由于本人回答时的定位以及参考的文献中所指,故这里不做细分,认定 PostCSS 为预处理器。细致的同学可以做进一步的细分。

工程模块化工具

Webpack2 于今年2月份发布。 它带来了诸如 ES6 模块(不再需要 Babel 转换 import 语句)和 tree shaking (消除了打包中未使用的代码)等重要功能。 此后不久,V3 发布了一个名为“scope hoisting”的功能,将所有的 webpack 模块放入一个单独的 JavaScript 包中,从而大大缩小了它的尺寸。

7月份,Webpack 团队从 Mozilla 开源支持计划获得了一笔赠款,以便为 WebAssembly 提供一流的支持。

Parcel作为一个有趣的项目,在短短十天内便在 GitHub 上获得了 10000 个 star。 它主要通过利用多个 CPU 内核和一个高效的文件系统缓存来实现。 它还基于抽象语法树进行操作,而不像 Webpack 使用字符串。

除此外,Rollup 的发展也不容小觑。4月 React 团队从 Gulp 切换到了 Rollup 进行开发。除此外,Webpack 团队也推荐在某些方面使用 Rollup 而不是 Webpack。

TypeScript

JavaScript 中缺少类型一直是很多人的抱怨所在。为了解决这些问题,TypeScript 出现。它由微软创建,TypeScript - JavaScript that scales.JavaScript 中缺少类型一直是很多人的抱怨所在。为了解决这些问题,TypeScript 出现。它由微软创建,由于其出色的表现赢得了很多 JavaScript 开发者的追捧,而 Flow提供了一种在不需要激进的重构下更为灵活的方式来引入类型,后者是 Facebook 的成果。

应用状态管理

Redux 仍然作为 React 项目推荐的状态管理解决方案,并在 2017年获得了五倍的增长速度(NPM 下载量)。

Mobx 成长的也很快,并被一些高利润公司所使用,例如 IBM,美国银行以及 Lyft。

除此外,MobX 团队正在努力,希望在新项目—— mobx-state-tree(MST) 中结合 Redux 和 MobX 的优点。

GraphQL

GraphQL 似乎在 REST 之上迅速占据了一席之地,Samer Buna甚至声称 REST 已经死亡。GitHub已经使用 GraphQL 编写了最新版本的 API,与此同时为了使 GraphQL 对所有开发人员可用,许多公司正在开发产品,例如 Johannes Schickling开发的 Graphcool框架。

静态网站生成方案

2017 见证了静态网站卷土重来。像 Gatsby这样的框架使您能够使用 React 和其他现代工具构建静态网站。不是每个网站都需要或应该成为一个复杂的现代 web 应用。由于采用与预构建标记(原文 prebuilt markup),静态网站生成方案使你获得服务器端渲染的好处和绝无仅有的速度。如果你正在寻找一个很好的例子,React 官方文档就是用 Gatsby 构建的。

在即将到来的2018年中,我们期待:

基于组件应用中的样式是否是组织 CSS 的最佳方式?有关该内容的讨论或许会激化。

越来越多的公司采用具有统一代码库的移动端解决方案,如 React Native,Flutter或 Weex。

因为离线能力和无缝的移动端体验,web 变得更加原生,再加上苹果对 Service Worker 的表态 Release Notes for Safari Technology Preview 46, PWA 在2018年可能会被全面支持。

WebAssembly 可以取得长足的进步,提供一个更好的 web 体验。

GraphQL 正在并继续挑战 REST。

由于不再有对开源协议上的争议,React 强化了它的地位。

Flow 和 TypeScript 采取更强大的举措,使 JavaScript 更具结构。

虚拟现实使用类似 A-Frame、React VR和 Google VR这样的库正在向前迈进。

人们使用区块链和 web3.js(由 Marek Kotewicz 和 Fabian Vogelsteller 创建)构建了一些非常酷的应用程序。

构建方案的持续发展,Webpack ,Rollup 以及后起之秀 Parcel 等在构建方案份额中扮演这一种合久必分、分久必合的轮回。

本答案在撰写过程中参考了以下内容:

Frontend in 2017: The important parts

A recap of front-end development in 2017

本文来自企鹅号 - 全球大搜罗媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

一个独立开发者总结的App 迭代设计思路

Overcast3发布了,这是一个巨大的版本迭代,主要体现在界面的设计和流程。根据两年多的测试、使用和用户反馈,从上个夏天开始,我一直在为这个版本而努力工作。 ...

36790
来自专栏腾讯社交用户体验设计

滑屏 H5 开发实践九问 - 腾讯ISUX

作为一个 UI工程师,接过很多类似的项目,也曾写过滑屏的插件,在经历了不同的需求的“洗礼”并踩过若干个坑之后,不禁反问自己...

39040
来自专栏MixLab科技+设计实验室

如何用代码控制浏览器下载知乎大v的粉丝数据?

欢迎用户在后台留言需解答的问题, mixlab 将会不定期的从中选择提供解决方案。同时 mixlab 微信群已经汇集了机器学习、自然语言处理、前端、后端、产品经...

11830
来自专栏一个会写诗的程序员的博客

前端技能汇总 知识结构Frontend Knowledge StructureFE-learning

★越少越简单,越适合入门,★多的要么是难度比较高,要么是比较适合在后面看,比如讲性能之类的书.

28930
来自专栏企鹅号快讯

web前端工程师入门须知,你全部了解吗?

划重点 一名合格的web前端工程师必须得掌握HTML、CSS和JavaScript。只懂其中一个或两个还不行,你必须对这三门语言都很熟悉。也不是说必须对这三门语...

397110
来自专栏腾讯大讲堂的专栏

滑屏 H5 开发实践九问 - 腾讯ISUX

滑屏的交互形式自从在 H5 中流行起来,便广泛应用在产品宣传、广告、招聘和活动运营等场景中,作为微信朋友圈广告惯用的形式,其影响力更是得到了强化与放大。如今滑屏...

55770
来自专栏PPV课数据科学社区

【学习】15个最棒的JavaScript图形/图表库

阅读目录 D3.js — Data-Driven Documents Google Charts ChartJS Chartist.js n3-charts E...

51540
来自专栏前端迷

react技术问题十问十答

最近在开源中国搞了个问答活动,收到了不少网友关于React的提问,本文挑选出一些比较典型的问题总结一下,对问答感兴趣的同学可以移步这里

17920
来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(二):设计策略 - 腾讯ISUX

18220
来自专栏即时通讯技术

微信团队分享:iOS版微信的高性能通用key-value组件技术实践

本文要分享的是iOS版微信内部正在推广和使用的一个高性能通用key-value 组件的技术实践过程,该组件在微信内部被命名为MMKV(以下简称MMKV)。

14420

扫码关注云+社区

领取腾讯云代金券