2017年前端技术总结

2017年前端技术总结

2017 年是前端异常活跃的一年,各种工具和「框架」你方唱罢我登场,好不热闹。

饥人谷已经专注前端知识学习三年有余了,今天我们就来总结一下 2017 年前端的发展历程,若有写得不好的地方,望不吝赐教。

2017 年的关键词——状态管理

2017 年前端最关心的技术是什么?以下给出几个候选词:

  1. Rx.js
  2. Webpack
  3. PWA
  4. TypeScript
  5. Redux、MobX

其中 Webpack 其实不能算作 2017 年的新技术,因为年初 Webpack 发布了 2.x 使用人数已经很多了,年中升级为 3.x,只是更新和升级而已,所以它其实是 2016 年的新技术。

PWA 不能当选第一则是因为还太小众,国内只有几个前端团队在几个业务上尝试使用了而已,大部分中小公司的团队并没有马上使用 PWA 的计划。TypeScript 也是一样,依然小众,期待明年的后续发展。

再看 Rx.js、Redux 和 MobX,这些工具都在关注一件事情:状态管理。

所有使用了前端三大「框架」(React、Vue、Angular)的团队都会非常关注状态管理,这其中的逻辑很好理解:

  • 框架使用虚拟 DOM 使得状态变化直接反映到页面上
  • 于是前端不用关心 DOM,只关心状态就好
  • 状态越来越多,结构越来越复杂,异步操作也来越多,就需要状态管理

所以今年各大前端团队都在探寻状态管理方案,因此我们认为「状态管理」便是今年的前端关键词。


哪些技术过时了

在我们关注新技术的同时,有一个同样重要的东西需要关心,那就是哪些知识过时了。下面给出候选词及理由:

  1. IE 兼容。IE 兼容已经不是前端关心的技术了,理由有
    1. 现在是智能手机时代,根据互联网女王的报告,人们使用手机来上网早已成为主流,哪里有流量哪里就有商机,所以几乎所有公司都把主要阵地转移到手机网页、手机 App 和微信上了。
    2. 前端流行框架早已不支持 IE 8 及以下浏览器。所以现在还在支持 IE 的商业网站要么就是年久失修不好改版,要么就是不怎么赚钱不想改版。
  2. Seajs 已死。Seajs 已经有两年没有更新代码,处理的最后一个 issue 也是半年前了
  3. AMD 模块定义(requirejs) 已过时。不过 CommonJS 模块定义一时半会儿还不会过时,有必要学习一下。ES Modules 已是 ES 标准,是最有必要学习的模块定义。
  4. Grunt 已过时。
    1. 一是因为 Grunt 的任务组织方式过度依赖文件系统,导致速度相比 Gulp 慢很多。
    2. 二是因为 Grunt 已有一年半没有更新了。
  5. Gulp 一时半会儿还不会过时,可以学习。不过如果是新项目,还是推荐使用 Webpack。因为 Gulp 的配置,比 Webpack 的还要难。
  6. jQuery 已过时。因为 jQuery 只是一个 DOM 和 AJAX 的封装库,不足以承载复杂的项目,不过 jQuery 的实现原理依然有必要了解,理由是 jQuery 的 API 设计十分优雅,它的 Slogan: Write Less, Do More 吸引了当时全世界的所有前端开发者,值得学习。如果你要写自己的库,那么可以从 jQuery 中获得非常多的灵感。
  7. AngularJS 1.x 已过时。虽然 AngularJS 1.x 依然在持续更新,但是 Angular 比 AngularJS 1.x 更「现代」,能学习 Angular 的话就优先学习 Angular

2017 年前端的误区

2017 年前端最大的误区就是对「框架」的理解。

用过框架的人都知道,Vue 和 React 不是框架,只是 UI 层面的库而已。Angular 和 Ember.js 是框架。

为何前端不知框架为何物呢?因为前端还没有发展到框架时代。

  1. 一开始 JS 被发明的时候,JS 的定位是提前验证表单字段,节约带宽。所以任何一个后台程序员都能搞定 JS。
  2. 后来微软发明了局部刷新的 API,使得 AJAX 广为流传。
  3. 至此 JS 的两大功能确定:DOM 和 AJAX。
  4. jQuery 的出现使得 DOM 操作十分方便,不过依然麻烦。Vue 和 React 利用虚拟 DOM,使得 DOM 操作变得「无痛」。
  5. Promise 和 Fetch 的出现使得 AJAX 有了最佳实践。
  6. 最终前端唯一需要关心的就是数据(状态)

那么 2017 年是前端的什么阶段呢?(注意不包括 Node.js 后端)

是「工具链整合」阶段。

  1. 标准库方面的工具基本统一:lodash、momentjs
  2. 构建工具基本统一:webpack
  3. DOM 操作基本统一:虚拟 DOM
  4. 工具开发平台基本统一:Node.js
  5. DOM 库基本统一:Vue 或 React
  6. 组件化方案基本统一:类似自定义标签的形式(但并不是自定义标签)
  7. CSS 布局方案基本统一:Flex & Grid

还有哪些没有统一呢?

  1. 设计思想没有统一:函数式与面向对象混用
  2. CSS 的组织形式没用统一:CSS in JS 怎么用才对,大家都无法说服对方
  3. 数据管理套路没有统一:要不要用 Redux 单向数据流、要不要用 Reactive 响应式编程
  4. 部署流程没有统一:目前前端的部署都是依附于后台系统,并没有自己的想法
    1. 单一入口还是多入口
    2. 用 webpack 配置长期缓存还得费一番功夫(这理应是默认配置)
    3. 没用到的 JS 代码要不要打包
    4. 要不要 HTTP/2.0
  5. 零配置方案没有统一:2017 年前端被吐槽最多的点应该就是配置复杂,2018 年必然会出现零配置的方案。如果你不理解零配置是如何适应各种使用场景的,推荐看看 Rails 这个框架是怎么做的。

等上面几个东西基本统一了,前端的框架时代就会到来了。

这也是为什么后端喜欢 Angular,前端不喜欢 Angular。

因为后端开发人员早就进入了框架时代,无法适应目前前端的工具整合时代。而前端,还不知道框架应该长什么样子,可能未来框架就是类似 Angular 这样的,但是前端从业人员没有到那个地步就无法理解 Angular 的好处,现在用 Angular 就只能用一个「重」字来评价。

2017 年哪些技能是一个合格前端必须具备的?

为了赶上 2018 年的前端发展潮流,作为一个前端,有哪些技能是必须具备的呢?

饥人谷讲师 @方应杭 的答案或许可以给大家一个参考:

  1. 了解 ES6 的所有新特性
  2. 熟练使用命令行,包括 gulp、webpack、vue-cli、create-react-app、git
  3. 理解前端常用词汇,如闭包、面向对象、MVC、MVVM、单项数据流、路由、单元测试、意大利面条、模块化、组件化、函数式、纯函数、高阶函数、不可变数据
  4. 能熟练使用至少一种前端框架,如 vue、ng 或 react
  5. 熟悉 HTTP,了解请求、响应、缓存、代理、反向代理、HTTPS 等

前端发展太快了?

从饥人谷的教学内容的变化来看,前端发展很快:

  1. 两年前,饥人谷还在讲双飞翼布局
  2. 一年前,饥人谷删除双飞翼布局内容,改为 Flex 布局
  3. 一年前,饥人谷还在讲 require.js
  4. 今年,饥人谷删除 require.js,改为 webpack
  5. 一年前,饥人谷还在讲 PC 页面开发
  6. 今年,饥人谷优先讲移动端页面开发
  7. 今年,饥人谷直接讲 ES6 语法

从「技」的角度来讲,前端发展很快。

但是从「术」的角度看,前端基本没有什么新的内容:

  1. 前端 MVC 思想借鉴自后端 MVC
  2. 前端 MVVM 思想借鉴自微软的 WPF
  3. 前端 FLUX 思想则与 CQRS(Command Query Responsibility Segregation)很像
  4. Reactive 编程则来自 Linq(C# 社区)
  5. Grunt 借鉴了传统构建工具
  6. Gulp 借鉴了命令行的 pipe 思想
  7. 函数式编程也已经存世几十年了

前端作为编程领域的后起之秀,自然需要吸取其他社区的各种优势。所以如果你没有接触过其他编程社区,就会觉得前端各种「新」东西。

一旦你视野广了,就会看清 JS 的发展脉络:不断借鉴其他优秀思想,以图自立。

但由于不同的前端借鉴的思想不同,导致现在前端社区看起来百家争鸣,实则是没有找到最佳方案。

近日 Rails 社区的领袖 DHH 发表了一些对前端社区的看法

这些年 JavaScript 世界有着大量的进步, 但我们也看到了倒退的世界, 而这些正在 Rails 前年就为大家解决掉了.

Rails 的约定大于配置核心原则能够有效帮助开发者减轻选择轮子的痛感. 通过减少无意义的选择, 接受社区的约定, 和按照 web 开发中基本问题的约定, 你将变的更出色, 更高产. 少一些无意义的独特性, 不必关注最小剪裁, 这些东西根本没有意义.

可以看到,前端社区在考虑的事情,其他社区早就考虑清楚了,前端社区没必要重新思考,只需要在前人的基础上改进即可。

总结

撇开 Node.js 后端领域不谈,2017 年,是前端工具爆发后逐渐整合的一年。

我们在很多问题上已经统一了意见,在另外一些问题上还没有统一。

等我们想好了,就会创造出真正的零配置前端框架(Vue 和 React 不是框架)。

希望你我都能参与其中,并享受其中!

谢谢大家。

编辑于 2018-01-01