2018 年前端技术总结

[FrankFang128]

还有十几天，2018 年就结束了。

今天我就来和大家一起回顾一下 2018 年的前端技术趋势。如果你赶时间，可以直接看文章末尾的总结。

关键词：JavaScript

我们在 2017 年前端技术总结里总结的关键词是「状态管理」；

今天我们给出的关键词是「 JavaScript 」，含义主要有两点：

一、CSS 失宠

如今，大部分前端已经不再对 CSS 有很大的关注度了，只要会用 flex 和 grid，几乎就可以解决大部分需求。即使是目前最潮的 CSS Houdini 技术，也是在用 JS 而已。

这在一方面说明前端对 JS 的重视，另一方面又说明 CSS 的易用性，不需要花太多时间，就能快速搭建页面。不过大部分前端并不想要深入了解 CSS，能用就行。

二、JS 还是原来的 JS 吗

虽然所有前端都在关注 JS，但是并不是所有前端都在写 JS。已经有很多前端在用 TypeScript 了，还有一些前端在用 Reason、Elm、ClojureScript 和 Dart。

尤其是 TypeScript 的发展势头最猛，JS 学得好的前端很快就能上手 TypeScript，很多大公司的前端对 TypeScript 更是爱不释手。

反观 JS 自身的发展，最近 TC39 将 class private field （#x ）移入了 stage3 阶段，令很多 JS 使用者不满。不满的原因大部分都是觉得这个语法太奇怪了（而如果使用 TypeScript 就能愉快地使用 private 关键字了，虽然两者并不完全一样）。

相信在不久的将来，JS 这门语言会越来越无法满足前端的技术需求，这给其他语言带来了机会。

接下来说说其他发展趋势。

趋势：前端 == 全端

移动 App、移动网页、PC 应用、PC 网页、微信小程序、支付宝小程序、百度小程序、各种小程序……

现在各大 App 纷纷模仿 Vue 或 React 发布自己的小程序，开发的重任自然摆到前端开发者的肩上了。（不然让后端来做吗？）

但是问题在于，这些端并不完全一致，有很多细微差别。于是「一次编写，端端运行」的需求就提上了日程，因此很多大公司的前端都在开发自己的全端方案（如 taro.js 、mpvue 等）。

再加上 Electro 对桌面端的支持，React Native 和 Flutter 对手机端的支持，前端实质上就是全端，几乎所有需要图形界面的地方都被前端占领了。

趋势：前端框架趋于平稳

Angular / React / Vue 三者的粉丝已经不怎么争论了，公司用哪个开发者就用哪个，毕竟很多公司都已经有了 Angular / React / Vue 的一年以上的项目了，想换框架也是难事。

而且三者的生态环境也都比较完备和稳定了。不存在你能做而我做不到的点，所以大家都已经专注于业务开发，而不是框架的选择了。

所以只要你会其中任何一个框架，都有饭吃。如果一个都不会，就很难找到工作了。

趋势：函数式编程

React 带起了一股函数式编程的风潮，然而如果你问大部分前端「什么是函数式」，肯定有人还是一知半解支支吾吾的。这是学习能力强的人的一个大机会。

前端的函数式还处于初级阶段，由于 JS 这门语言虽然有函数式的影子，但是依然缺失很多函数式语言必须具备的特性，这也是一些 JS 开发者转向 ReasonML 的原因。

趋势：自家组件库

今年各大公司均有自家的组件库（阿里的 Ant Design、饿了么的 Element UI、TalkingData 的 iView、滴滴的 Cube UI、有赞的 Vant 和 Zent ），这得益于 Angular / React / Vue 的成熟的组件化能力。这也意味着对前端开发者的要求提高了，不仅需要会用别人的 UI 库，还需要自己能开发 UI 库。

组件库的兴起也使得前端终于开始重视「单元测试」这一基本的测试手段了，很多人都会使用 jest 和 mocha 来进行单元测试。

趋势：对 Node.js 的使用更为理智

现在前端开发者不像之前几年对 Node.js 趋之若鹜了，而是只在必要的时候使用 Node.js 。因为前端已经理解就算学会了 JS 也不代表能手上 Node.js ，而且 Node.js 也越来越专业化了，其领域知识跟前端几乎没有重合的部分。

趋势：Webpack 的封装

由于 webpack 配置的复杂性，越来越多的工具都把 webpack 进行了简化和封装，如 Vue CLI 3、Angular CLI 和 create-react-app。因此新人在创建项目的时候几乎不会遇到复杂的 webpack 配置问题，一个成熟的前端团队也只需要一两个人维护 webpack 的配置即可。

相信不久之后，这些配置会进一步简化。

总结

总之，前端在经历了一两年的百花齐放后，逐渐趋于稳定，大家分别使用自己喜欢的框架，打造趁手的 UI 组件，并且开始使用 TypeScript 和单元测试来提高代码的质量，以做出更好的产品。对后端知识没有了解的前端也不再盲目投入 Node.js 的怀抱了，而是认真做好前端业务； Node.js 的使用者也更专注于后端开发，这是双方都在朝着专业化方向进步的体现。

如果你对文章中提到的 React、Vue、TypeScript、UI 框架和单元测试等知识感兴趣，可以我们的 Vue 交流群 5 或者 React 交流群 2（请尽量只加一个群）

以上就是我们在 2018 年观察到的一些前端技术趋势，不一定全面，如有错误欢迎指正。

typo: Electro -> Electron

[cuixiao603]

m

[whyrookie]

mark

[FrankFang128]

各位收藏的麻烦点个赞让大家也看到如何？

[jirenguyuanyuan]

先收藏

[gkiwi]

辛苦楼主了。

不过我觉得这这个 2017 年，2018 年，2019 年感觉都可以用。如果能多补充下 2018 年增量的东西就更棒了！

[kakudesu]

mark

[civet]

我老是把 electron 打成 eletron ...

[jecvay]

看完啦 很棒写的