2018年前端流行哪些技術？

知識 04-04

原文：https://www.zhihu.com/question/268528001/answer/338799288

我自己的經驗呢：

如果項目要求支持低版本的 IE 的話（比如 IE7，8），就用較傳統的jQuery，Bootstrap，jQuery插件/組件以及類似 Knockout.js 能夠提供數據綁定的 JS 庫，再加上 require.js + gulp 或者 fis3 做模塊化和自動化構建。

如果不需要支持低版本 IE 的話，我們主要使用 React：

React – 編寫頁面組件

Redux – 數據流和狀態管理，一般結合 redux-saga 使用

React-router v4 – 前端路由管理（Note：dva 整合了 redux, redux-router 以及 redux-saga。在熟悉了基本的 Redux, Redux-saga, Redux-router 的使用之後，可以嘗試用 dva 替代）

Webpack – 前端構建工具

前端開發我在用到的其他類庫，技術選擇和工具還包括：

SCSS – CSS 預處理，提供 Variables, Mix-in 等功能

ESLint – JavaScript 代碼質量工具，之前使用 airbnb 配置方案，現在使用 standard 配合方案

StyleLint – CSS/SCSS/Less 代碼質量工具

EditorConfig – 統一編輯器配置

git – 版本控制工具，結合 git-flow 做分支管理

oh-my-zsh – 提高終端操作效率

Ant Design – React 組件庫，適合中後台應用開發，極大提高開發效率。另外一個可以參考的是 Material UI，是 Google Material Design 的 React 實現。

Ant Design Pro – 基於 Ant Design 的中後台項目腳手架，提供了更高層的常用業務組件和最佳實踐，大大減少重複性工作

Animate.css – 流行的動畫樣式庫，實現了包括 Attention（吸睛？），Bouncing（彈跳），Fading（淡入/淡出），Flippers（翻轉），Lightspeed（光速？），Rotating（旋轉），Sliding（滑動），Zoom（縮放）等各種動效。

Alloy Touch – 絲般順滑的觸摸運動方案（官方原文），支持緩動效果，使用了 matrix-3D（transformjs），requestAnimationFrame 以及針對 touchmov 事件的優化（{ passive: false, …}），體驗與原生非常接近。同時支持各種觸控場景：2D/3D 旋轉，翻頁，步進。我還用它實現了無限滑動的效果。還有一個非常流行的 swiper（ nolimits4web/swiper ），但是我沒有用過。不知道跟 Alloy touch 的區別。

AutoPrefixer – PostCSS 插件，構建時根據 caniuse-lite 資料庫以及你設置的或者默認的瀏覽器列表（browserslist）給 CSS 屬性自動增加瀏覽器廠商前綴。一般結合 gulp 或者 webpack 等 Task runner 使用。這樣我們寫 CSS 樣式的時候只需要寫純 CSS 而不需要考慮廠商前綴的問題。

Async Flow Control – JavaScript 的非同步流程式控制制，大概經歷了 callback -> Async.js -> Promise(bluebird -> 原生 Promise 支持) -> yield/generator -> async/await(ES7) 這樣一個過程。推薦 async/await + promise 的解決方案，Node.js 現在(8+)也可以用 Util.promisify() 對原先的 callback API 進行封裝成 Promise。

Axios – 基於 Promise 的 HTTP 客戶端，可以運行於瀏覽器和 Node.js 環境。我主要是在 Node.js 中使用 Axios，替代了 request；瀏覽器中還是使用 Fetch API，還沒有在瀏覽器中嘗試使用 Axios。

Babel + ES6/6+ – 現代 JavaScript 語法和編譯器，Babel 可以讓你使用目前主流瀏覽器尚未全面支持的新的 JavaScript 語法來編寫代碼，同時幫你編譯成現代瀏覽器都支持的 ES5 語法，還提供了一些 polyfill （通過 core.js）實現了瀏覽器不支持的 feature。

Ava, Chai.js, Jest, Enzyme, Headless Chrome – 測試框架，runner，斷言庫，單元測試，組件測試，端對端測試的一些工具。我用 Ava 替代了 Mocha 用來做測試框架和 Runner，Headless Chrome 替代了 PhantomJS 做端對端測試，斷言主要用 Chai 裡面的 expect 以及 jsonschema 等 Chaijs插件。

CSS Modules – CSS 模塊化方案，避免全局作用域/衝突，實現顯式依賴。暫時沒有使用 css-in-js 方案。

Data Visualization – 數據可視化和一些圖表工具，使用最多的還是 ECharts，支持各種圖表，交互和渲染模式，PC 端移動端通吃，文檔很全，最近還成為了 Apache 孵化項目。另外還用過 g2，感覺也不錯，現在也能看到源碼了。g2 是 grammer of graphic 的縮寫，算是 g2 的理論基礎。自己從基礎做起的話，可以使用 d3.js，提供了可視化的很多基礎模塊，基於 SVG。

Docker – 嗯，前端應用部署也可以使用 docker，基於 Nginx image 或者 Node.js image。我以前寫過一個構建 docker 的 shell 腳本：分享一個自動構建 docker 並導出 image 的 shell 腳本

esprima, espree, acorn, babel-parser – 進行 JS/JSX 語法解析和句法分析的 JS 庫。espree 是 ESLint 使用的 parser，最初 fork 自 Esprima，後來基於 Acorn。Esprima 是最老牌的 js parser，現在使用 TypeScript 實現；Acorn 使用 ES6，特點是模塊化，但是 Esprima 的文檔比 Acorn 相對要全一些。babel-parser 的解析器 fork 自 Acorn。

Express.js/Koa2/Egg.js/Strongloop – Express 和 Koa 都是 Node.js 的 Web 框架，主要用來實現 API 網關，也可以 serve 一些靜態內容。我用過時間最長的是 Express, koa2 也在幾個項目中用過，也了解過 loopback, hapi, kraken 等。推薦直接使用 Egg 或者 Strongloop 這種封裝了最佳實踐的企業級 Node.js 框架，而不是自己基於 express 或者 koa 攢一堆組件。

Functional Programming – 函數式編程，這個真的是前端流行… 還有純函數，pure render, pure component，immutable 等概念。參考：lodash 中的 FP 實現。嫌 immutable.js 太重可以試試 immer。

GraphQL/thrift/RESTful API/OpenAPI – 各種介面方案。REST 有一種明日黃花的感覺，雖然還在用，但是感覺早晚被 GraphQL 等取代，畢竟我們真的越來越不關心數據是如何獲取的，而應該關注在 store 如何設計上，專註在領域分析上面。Thrif 支持跨語言 RPC 調用，比如跨 Node.js 和 Java 等。嗯，Thrif 支持自動生成樁代碼，什麼定介面、JSON、MOCK 就都是浮雲了，不需要糾結是否符合 RESTful 規範了。NOTE：Github 提供的 API 之前是 RESTful 的，現在都是 GraphQL 了。

Homebrew – MAC 軟體包管理工具，brew 相當於 Ubuntu 的 apt，RedHat/CentOS 的 yum。

lodash/moment.js – 最常用的兩個 JS 庫了，lodash 是一個現代、高效、模塊化的 JS 功能包，moment.js 主要用來處理日期時間相關的操作。都是即可運行在瀏覽器環境，也可以運行在 Node.js 環境。

MongoDb/MySQL/Nginx/Redis – 這些都是常用的伺服器應用。MongoDB 使用 mongoose，MySQL 使用 sequelizer（都是非常優秀的 Node.js 的 ORM 實現），Nginx 會配置反向代理，URL 重寫，緩存設置等即可。

npm/yarn – 包管理工具。我傾向於還是使用 npm，搞清楚 npm 的常用 script；搞清楚npm install 時候依賴安裝的流程，以及 package-lock 的作用；能維護和發布自己的 npm 包；知道 npx 是幹什麼的就可以了。

Performance – 前端性能，善用 Chrome Devtool 中的各種功能，包括 lighthouse。

PostCSS – 本身是一個 CSS 的 parser，最早是從 AutoPrefixer 中抽取出來的，現在已經是 CSS 的瑞士軍刀了。可以結合 gulp, Webpack 等 task runner 使用，能夠解析 CSS/SCSS/Less 等各種語法，提供了 AutoPrefixer（加瀏覽器前綴）, cssnano（各種嚴壓縮，各種配置）, cssnext（用未來的 CSS 語法規範寫當前瀏覽器支持的代碼）, css moudles（模塊化）,variables, mix-in（類 SCSS 的預處理支持）等各種豐富插件…沒有你還可以自己寫（提供插件 boilplate）！

React Native/Flutter – 跨端方案。最近關於 RN 是否涼了？如何評價 Flutter？的問答挺多的，我更關注的可能還是了解他們是如何實現的，以及解決了什麼問題吧

source maps – 了解 js、css 的 source maps 是如何生成的，相應的規範，在瀏覽器、生產環境調試、以及異常追蹤系統裡面的使用。

TypeScript – 用 TS 實現的項目越來越多了，特別是一些大型項目，流行程度也是越來越高

WebSocket – 需要長連接、實時通信的場景

WebStorm/VS Code – IDE/編輯器，使用最多的就是用這兩種了

另外，我覺得大家關注討論比較多的但是我自己還沒有實踐過的前端技術還包括：

rx.js

mobx

小程序 – 包括 wepy, mpvue 等

rollup（側重 JS library 的打包構建）

parcel（約定式的打包構建工具）

服務端渲染（SSR）