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 不是框架）。

希望你我都能參與其中，並享受其中！

謝謝大家。