標籤：

2017年前端有什麼樣變化？即將來臨的2018有什麼樣的期待？

01-14

在持續關注編程語言方向進展, 補充一些 WebAssembly 和 FP 相關方向的消息.

樓頂的提到了 WebAssembly 已經被各大瀏覽器(除了 IE)支持, 而且 Webpack 團隊收到捐款對 WASM 做了支持已經取得進展. 這方面的新聞還有不少, 比如說有人整理了個列表, appcypher/awesome-wasm-langs 各大編譯型語言陸陸續續都在開發編譯到 WebAssembly 的編譯器, 吃瓜群眾就等著看六大派圍攻光明頂的一幕了.

最積極的是 Rust, 前幾天 Rust 出了一個刷粉的 DenisKolodin/yew, 早以前還有一個 koute/stdweb Rust 社區對於用 Rust 作為瀏覽器開發語言簡直樂此不疲. 畢竟 Rust 是 Mozilla 未來重構 Firefox 搞出來的. 之前 Rust 編譯到 wasm 的支持也高調合併 rustbuild: Enable WebAssembly backend by default by alexcrichton · Pull Request #46115 · rust-lang/rust, 有興趣還可以看看 raphamorim/wasm-and-rust.

總體上 WebAssembly 在過去半年搞出來很多的新聞, 參考 Twitter https://twitter.com/webassemblynews?lang=en 除了 Rust, 另一門做得比較多的語言是 AssemblyScript, 這是個 TypeScript 語法的方言, 作者做了不少 wasm 相關工作, 目前 AssemblyScript 正在重構當中, 等待 2018 年更多新聞.

前端編程語言, Facebook 的 ReasonML 也在逐步完善當中, 下半年的消息看 https://twitter.com/reasonml, 成熟度是越來越高的. 而且在最近一個大版本 ReasonML 大改語法, 跟 ES6 越來越像, 也逐漸看到越來越多的教程和小項目, 接下來一年應該會有更多的工作被完成. 比較難估計, 有可能會火. 而且 ReasonML 基於 BuckleScript AST 實現, 意味著可以跟 OCaml 那樣往 WebAssembly 編譯. React 作者甚至提到一些可能性, 比如 React 用 ReasonML 重寫, 那樣 React 甚至可以編譯到 Native Code 在手機上跑, https://twitter.com/jordwalke/status/939373436782100480.

大家討論前端框架的時候容易忘掉 Emberjs, 但是 Emberjs 在 Glimmer 引擎重構以後, 幾乎走在了技術的前沿, Emberjs 社區直接把模板引擎編譯成二進位文件, 繞過 JavaScript 的運行原理, 強行提高性能. 隨著 WebAssembly 普及, Emberjs 很快可以用 WebAssembly 來做這個優化, https://twitter.com/wycats/status/930867473787756544 進展還是很讓人期待的.

然後 ClojureScript, 這邊也有不小的動靜. 夏天的時候出了個 thheller/shadow-cljs 編譯器, 也是德國人寫的, 對 JavaScript 開發者的使用體驗直接上了一個大台階. 然後在 ClojureScript 當中引用 npm 模塊的支持也終於初步可用了. 加上年初就搞定的 anmonteiro/lumo, 一個 ClojureScript 跑在 Node.js 上的 REPL, 可以說 ClojureScript 已經到前端開發者可以上手的程度了. 簡直是前端小年輕的第一台 Lisp.

除了 WebAssembly 還想起個值得關注的方向 binast/ecmascript-binary-ast, 字面的意思就是 JavaScript 不再以文本傳輸, 而是換成抽象語法樹的二進位文件, 這樣某些不好編譯到 WebAssembly 的代碼, 或者 JavaScript 舊代碼, 依然能獲得一些性能提升. 現在似乎還在提案(?)階段, 來年看進展吧.

不過這些呢, 也就是些念想. 估計 2018 年大概率還是敲著 TypeScript 寫著 React, Vue, 然後寫寫 Webpack 配置. 然後隔壁 Rust 程序員說你寫你的, 我寫我的.

暫時想到這些，持續更新（如果有遺漏請評論或私信告知我）。

在即將過去的2017年里，我們回顧：

逃不過的三大框架

  1. React 繼續在前端領域佔據著主導地位，並在 2017 年發布了最受期待的版本之一 - React 16。 它包含了可以實現非同步 UI 渲染的 fiber 架構。通過提供包括錯誤邊界在內的很多其他特性。但 React 在這一年中所取得最重要的成就不是它推出的新特性，而是修改了它的開源協議：BSD 協議 -&> MIT 協議。除此外，Jest、Flow、Immutable.js 和 GraphQL 授權也都改為 MIT 協議。
  2. Angular 市場佔有率持續下滑（相較於 React ），發布了V4 （3月23日）以及 V5 （11月2日），在 V4 中看到了 Angular Universal 成為官方項目的一部分以及 Angular Animation 從核心包中被抽離出來，V5 中則對 PWA 支持進行了改進、對編譯器優化達到更快地構建等。
  3. 即便 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 的基礎是一個 manifest.json 文件和對 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 發布的功能） 。

樣式布局

  1. 網格布局最終被 CSS 採納為標準，瀏覽器也正在快速地採用它。過去，網格系統在 CSS 中曾被 tables、float、flex 以及 inline-block 實現過。
  2. 2017 年見證了 styled-components（由 Max Stoiber、Glen Maddern 和 Phil Plückthun 創建） 在流行程度上逐漸佔據主導地位。Emotion（由 Kye Hohenberger 創建）是最新的 JavaScript 庫之一，但它已經被迅速採用。另一個可選方案是 glamorous（由 PayPal、Kent C. Dodds 和一群熱情的貢獻者創建），它封裝了 glamor 庫。
  3. 在過去的幾年裡，像SASS，Less和Stylus這樣的CSS預處理器已經流行起來。PostCSS 於2014年推出，而在2017年真正火爆起來，成為目前最受歡迎的 CSS 預處理器。
  4. 另一方面，在 2017 年，主要的進步來自 CSS-in-JS 的明顯改進與採用，其中所有樣式都是通過代碼而不是樣式表進行構建的。目前還不清楚這是否將成為前端社區的最終方向，但這是目前最新的方法。
  5. PostCSS 仍然是首選的 CSS 預處理器，但是很多都在切換到 CSS-in-JS 解決方案。

註：評論中有同學談到 PostCSS 是後處理器，根據定義，CSS 後處理器是對 CSS 進行處理，並最終生成 CSS 的 預處理器，它屬於廣義上的 CSS 預處理器。由於本人回答時的定位以及參考的文獻中所指，故這裡不做細分，認定 PostCSS 為預處理器。細緻的同學可以做進一步的細分。

再註：評論中有同學認為 PostCSS 由於可以搭配其他方案一起使用，所以認為如上描述其實不準確的。本人在作答時，想法是對比不同方案在今年的變化和流行程度，所以在嚴謹性方面可能會有欠考慮。具體細節希望同學們在使用的時候詳細考究。

工程模塊化工具

  1. Webpack 2 於今年2月份發布。 它帶來了諸如 ES6 模塊（不再需要 Babel 轉換 import 語句）和 tree shaking （消除了打包中未使用的代碼）等重要功能。 此後不久，V3 發布了一個名為「scope hoisting」的功能，將所有的 webpack 模塊放入一個單獨的 JavaScript 包中，從而大大縮小了它的尺寸。
  2. 7月份，Webpack 團隊從 Mozilla 開源支持計劃獲得了一筆贈款，以便為 WebAssembly 提供一流的支持。
  3. Parcel 作為一個有趣的項目，在短短十天內便在 GitHub 上獲得了 10000 個 star。 它主要通過利用多個 CPU 內核和一個高效的文件系統緩存來實現。 它還基於抽象語法樹進行操作，而不像 Webpack 使用字元串。
  4. 除此外，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 等在構建方案份額中扮演這一種合久必分、分久必合的輪迴。

本答案在撰寫過程中參考了以下內容：

  1. Frontend in 2017: The important parts
  2. A recap of front-end development in 2017

基於第二篇參考文章的譯文已經翻譯在我的知乎專欄，感興趣的同學可以查看 2017前端技術發展回顧。

最後

如果喜歡使用微信的同學可以關注個人公眾號，微信搜索「 黯曉 」或者掃描 二維碼 關注，會同步我在知乎以及個人博客上發表的文章，談談前端技術與日常有趣事。

生活中難免犯錯，請多多指教！

提一個目前非常熱門，卻目前距離前端界還很遙遠的領域，那就是機器學習。

JavaScript 能不能用來搞機器學習？當然可以。

JavaScript 適不適合搞機器學習？應該說目前的答案是不適合，但不適合原因並不是說 JavaScript 本身不適合，而是指周邊的生態仍然非常不完善。

2017年下半年，筆者花了大量的時間了解並嘗試了一些基於 JavaScript 的深度學習項目，比較著名的如 Google Brain PAIR 團隊的 deeplearnjs。

deeplearnjs 是目前最為完善的基於 JavaScript 的深度學習框架，不論是基礎的矩陣運算，還是常用的深度學習調優演算法，都提供了一套較為完善的解決方案。運算速度方面背靠 WebGL，從官方給出例子來看，在簡單模型的前提下速度也是可以信賴的。deeplearnjs 提供兩種使用方式，一種將它當作 JavaScript 版的 NumPy 來做實時計算，另一種是在瀏覽器端直接運行已經訓練好的模型。作為 TensorFlow 的同門師兄弟，deeplearnjs 也提供了良好的 TensorFlow 支持，甚至在 API 層面都非常相似。

另一個讓筆者非常感興趣的框架是 ConvNetJS，作者是目前 Tesla AI 部門的主管 Andrej Karpathy，斯坦福大學博士，原來和大名鼎鼎的李飛飛是同事。ConvNetJS 的代碼比較偏學術，對於沒有相關領域專業知識的朋友來說，可讀性相對來講要差一些。ConvNetJS 整體的封裝程度比較高，作者作為深度學習領域的專家，整體性地封裝了許多深度學習界常用的調優方法，卻也犧牲了一部分靈活度。而更可惜的是，作者目前因為個人工作原因，一年前開始就已經不再維護 ConvNetJS 了，不過 ConvNetJS 官方提供的幾個深度學習模型的例子還是非常不錯的，都做了非常簡單但詳細的可視化，可以幫助使用者了解整體模型的訓練過程，如著名的 mnist 數據集。

說完了框架，讓我們再來看一下阻止 JavaScript 向深度學習界發展的最大阻力：GPU。

因為所有的深度學習模型都涉及到大量的矩陣運算，所以能夠將這些運算跑在 GPU 上成為了訓練深度學習模型的先決條件。受益於 WebGL，瀏覽器中的 JavaScript 可以輕鬆地進行 GPU 加速，除了上面提到的 deeplearnjs 之外，在這方面也已經有了諸如 GPU.JS 等專註於做 JavaScript GPU 加速的框架。但另一方面，離開了瀏覽器環境，同步且單線程的 Node.js 卻在深度學習方面步履維艱。在 Node.js 方面目前看來比較可行的一個方案是 NOOOCL（Node.js Object Oriented OpenCL Bindings），也就是 OpenCL 的 Node.js 實現。不過目前看來仍然還沒有發展到可以直接拿來用的地步，所以 2018 年讓我們一起期待 Node.js 可以更好地擁抱並行計算，以至於最終也可以成為處理深度學習問題的一種選擇。

2018 年展望

雖然已經有了 deeplearnjs 等珠玉在前，筆者還是希望可以從更底層的方向為 Web 開發者提供另一種進入深度學習領域的方式，於是就有了：deeplearning-js。

這是一個筆者今年 12 月份才開始的個人項目，目前以幾乎零依賴（只用了一個小的第三方庫來實現正態分布）的方式完成了基礎的矩陣運算（自動 broadcasting 的加減乘除，點乘，轉置），訓練深度學習模型最基礎的初始化參數，正向傳播，反向傳播等方法，以及基礎的激活函數和損失函數如 relu，sigmoid，softmax，cross-entropy 等。目的是希望為 Web 開發者提供一個基於原生 JavaScript 的非黑盒的深度學習框架，在可以解決簡單的深度學習問題之上，揭開深度學習神秘的面紗。

接下來筆者希望可以基於 deeplearning-js 推出一系列從最基礎的矩陣，數據向量化講起的深度學習教程，幫助各位在熟悉的 JavaScript 體系內了解並學習深度學習。當然，目前的 deeplearning-js 仍處在一個非常初級的階段，筆者會儘快地完善它，補足目前缺失的但在深度學習界卻非常常用的一些調優演算法，如 mini-batch，動量，Adam 等。

最後簡單地列一下最近幾個月的開發計劃，也歡迎感興趣的朋友與我取得聯繫，一同建設 JavaScript 在深度學習領域的相關生態：

  1. 支持瀏覽器端 GPU 加速。
  2. 密切關注 Node.js 端 GPU 實現的進展，爭取第一時間讓 deeplearning-js 可以跑在 Node.js 環境下的 GPU 上。
  3. train 方法以 stream 的方式輸出當前模型的 cost，實現前端實時監控模型 cost。
  4. 支持更多的常用激活函數。
  5. 支持更多的常用損失函數。
  6. 實現 mini-batch，動量等常用調優演算法。
  7. 搭建 deeplearning-js 官網並將完成若干個深度學習界常見的例子，如貓狗識別（邏輯回歸），mnist（softmax 分類）等。
  8. 確定 deeplearning-js 的可視化方案，打通從數據輸入，到模型訓練，到訓練中可視化，到訓練結果可視化，再到預測模型實時監控的全鏈路。

==========

更新

項目官網：

deeplearning-jswww.deeplearning-js.com

正好最近正在翻譯 Google 開發者中心在 Youtube 發布的「HTTP203」系列視頻。

近期推出了 HTTP203 Advent 系列。Advent 就是「來臨」、「即將到來」的意思。這是 HTTP203 聖誕節的特別版！ Jake（@jaffathecake）和 Surma（@DasSurma）有 2 分鐘的時間來描述他們對 2018 年的興奮點。

我會不定期製作中文字幕，歡迎在 B 站或者優酷訂閱：

  • B站：HTTP 203 - 頻道
  • 優酷：HTTP 203 - 播單

其中包括：

  • Background fetch - 後台獲取。
  • Animation worklets - 動畫 worklet
  • Web locks - Web 鎖
  • Web architecture - Web 架構
  • Weightless CSS - Weightless CSS
  • Template instantiation
  • Flatmap flatten.
  • Async iterators generators - 非同步迭代器和生成器
  • Fetch observers.
  • Dynamic imports - 動態導入
  • Transform streams.
  • The benefits of web workers.

直接說 18 年的趨勢吧。

主要是三個方向：前端推動，架構推動，以及業務推動。

前端推動

18 年應該會是 Reason，wasm，以及 pwa 的應用年。

Reason 方面，目前已經具備可用性了，18 年應該會有更豐富的特性出來。鑒於 Reason 和 React 的特殊關係，這兩者的結合在 18 年應該會有些新東西出來，Reason 可能會成為一些新項目的標配。

wasm 目前已經被主流瀏覽器全面支持，18 年可能會出現大量依賴 wasm 應用。目前能想到的主要是三方面：

  1. web 應用添加 wasm 模塊執行計算密集操作或者作為既有 c/c++ 模塊的快速移植手段。這項技術配合 websocket 可能會促使大量行業應用全面 web 化。
  2. 其他語言積極開發到 wasm 的 transpiler，這些擁抱瀏覽器的語言，會把語言特色，best practice，以及有特色的庫都帶過來。所以前端技術棧的演變可能不會趨於收斂，反而會加速。
  3. wasm 在移動端應該會有一些新玩法，目前還看不清楚。

另外，pwa 是個大話題，現在蘋果對 pwa 的態度也挺積極。但是我個人感覺 pwa 目前還缺一個「傻瓜式」框架，就是那種讓你不用了解 pwa 是什麼，按照文檔做幾個頁面出來，就天然 pwa 的東西。

架構推動

主要是 graphQL 和微服務的推廣，導致前端開發順應趨勢的改變。具體的就不詳細說了。感興趣的可以了解下這兩點。

另外前端架構方面，http2，module js 這些技術可能會成為主流，前端部署方式也會相應的跟著走，但是具體落地還要看場景。相對來說我認為這是影響力比較小的一塊兒。

業務推動

首先，是有點「老生常談」的 WebVR/AR，如何真正形成生產力，其實 17 年並沒出現公認典範應用。18 年再等等看。目前基礎設施成熟度和豐富度又上了一個台階，但是產品層面的路還很長。我的感覺是 toB 應用可能會比 toC 應用走的快。

第二，區塊鏈。這是我個人的猜測，因為今年看到開始看到陸續有人在招懂區塊鏈的前端。明年這一塊兒可能會是一個人才需求增長點。區塊鏈和前端具體的結合點，我了解的不多，還要加強學習。

第三，IoT。很難說 IoT 到底會給前端帶來哪些新東西，或許不會有完全的新東西（這裡的「新東西」，不包含 ruff 那種寫板子的技術），但是新實踐，新技術組合，同樣是對前端工程師的新挑戰。另外 WoT 這事兒說了好幾年了，18 年有希望真正推廣起來。總之 18 年 IoT 一定爆發，這次是真的爆發，前端也要做相應的配套。

總結

視野不寬，能看到的主要就是上面這些。但是要說期待嘛，說實話大部分東西談不上期待，條件成熟了，有幫助就用，條件不成熟，或者性價比不高就不用。真正期待的，還是基於現有的技術做出什麼東西。

18 年我個人比較關注的是：

  • IoT，比如 Web SCADA 類應用，IoT 相關的可視化。
  • 複雜單頁，比如各種編輯器類應用，這東西不新，但是誰碰誰頭大，而且這東西非常有用。
  • 前端多媒體應用，比如最近在朋友那看到一個還在開發期的產品，挺有意思，基於 WebGL，使用瞭望視頻結合電子地圖，效果很炫。
  • 數據分析，這一塊主要是補課，學知識，當然能與前端有結合更好。

重點不在於新不新，也不在於一項技術是不是化腐朽為神奇（其實不太可能），而在於在開源基礎設施之上，業務之下，總有一些很麻煩卻又不得不做的工作，這些是需要重點關注的。因為這些工作決定了你能幫別人做什麼，而不是別人幫你做什麼。

今天用網頁做個 listview，明天改用 pwa 做個 listview，對業務當然可能是有價值的，但是在用網頁做 listview 的時代，期待用 pwa 做 listview 的時代到來，好像也沒啥必要。

以下是飢人谷的《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 不是框架）。

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

謝謝大家。

框架之戰趨於平靜，狀態管理各有優劣；類型系統大行其道，坐看來歲編譯元年。

還是要學好 JS 啊，多看看前端每周清單，掌握一手吹逼資訊

發現一個知乎小Bug...無法修改話題經驗...ORZ

2017年的時間餘額不多了，簡單聊聊。

以下內容多取自身邊的團隊或者我們公司自己的情況，可能存在偏頗，還請同為前端的同學們斧正。

工程質量和工程效率角度：

  • 越來越多的前端項目開始落實並使用 lock file ，來約束項目依賴，輸出結果的可控性有進一步提升。
  • 越來越多團隊在前端業務的開發和交付階段都引入了標準的CI/CD工具，前一陣 Node地下鐵沙龍中，不少公司都使用docker集裝箱的方式來進行交付，除了效率上的改進外，還進一步保障了生產結果的一致性，另外由於有CI這個角色，可以在這一步集成許多有用的服務，並在合適的時機集中展示：代碼風險掃描、自動化測試、告警監控。
    • 公司目前採用Gitlab CI/CD來進行項目的開發、測試、部署，配合Dockerize化的前端開發腳手架，可以使雲端構建環境和生產環境強一致，對於生產結果的可控性++
    • 個人看好未來Gitlab v10版本中的Auto Devops（Beta），等待摘掉Beta帽子可以試試看，或許能夠讓越來越多的公司的Web端軟體開發流程全面趨同。
  • 重要的項目基本全部upgrade es6。
    • 另外，語言通用的規範建設越來越好，在各種 .file 、IDE、三方平台和工具的配合下，開源項目也好，內部項目也罷，前端代碼倉庫風格差異化的勢頭總算有些緩解。

運行容器角度：

  • 傳統PC Web業務更加「偏後化」（遠離C端用戶），朝著企業服務的方向發展，但是分化特別嚴重。
    • 新型業務可以用現代瀏覽器運行，成為前端的實驗田和場景化組件的發源地。
    • 傳統業務，尤其是需要特定BHO支持的業務，讓業務鎖死在古董瀏覽器上。
  • 移動端瀏覽器
    • iOS Webview、Android Webview、微信、OV 瀏覽器等成為新的前端主戰場，小範圍遭遇戰可能根據用戶群體的不同發生在 華為、三星、小米、其他國產廠商的瀏覽器中。
    • 隨著PWA將被Safari引入，Android O的輕量化，前端可能又有一波小機遇（拉日活、獲客）。
    • 經歷了幾個框架的爭鬥後，一般的場景化組件建設日益成熟，業務快速拼裝成型的能力足夠，精細化打磨隱約浮現在日程上了，用戶體驗可不僅僅和功能設計有關。
    • 移動端新設備配置越來越變態，前端業務進一步豐富有了更多的可能性。
  • 大屏幕
    • 越來越多的公司建設了大數據團隊、基礎技術工程團隊，數據可視化呈現的需求不單單是大廠們獨佔的訴求了。

興趣擴展角度：

  • 不論是智能家居中控也好，網關路由、家用NAS也罷，不少系統、項目開始使用Node.js作為基礎執行語言。憑藉世界最大的軟體倉庫--NPM，為idea快速變成想法，提供了更多的可能性。

先擱筆，放假有空再更。

2018前端我期待 IE11 以下徹底完蛋

2017年聖誕 uc 第一個成為pwa瀏覽器 （國內 貌似也不對 反正用戶這麼認為得啦）

具體比較可以看我的知乎專欄UC 基於chrome 57新版內核上線

2017年我司對IE的支持由IE6變回了IE9 期待2018年不用再支持IE

作為一個偶爾寫前端的來說下自己的體會。

幾年前就我就看透了，前端變化飛快，很強勢擋不住，但很有前途，更新變化特別快，新東西層出不窮。

可能今天學這個框架，過一個月就又要換一個。

可能今天用這個打包，過一個月又用那個打包。

可能今天用這個構建，過一個月又用那個構建。

我看前幾年同事買的backbone技術書，翻還沒翻熱就又換了框架了，換技術棧了。今天你ng，明天ng2，今天你bb，明天我pp，今天你vue，明天我react，今天npm，明天我yarn，今天你grunt，明天我webpack。然而，還有一群老嗨日常jq，這裡面也有我。

所以我對前端只關注，但不會為了追熱門而追。去年有個內部項目，我覺得很適合用現代框架開發，我就前後端一個人做了，主要用vue，在這之前我從未用過現代主流框架，不過那個系統不算特別複雜，滿打滿算用了一個禮拜趕出來了吧，在這期間我覺得vue的學習和使用並沒佔用太多學習成本，幾乎兩天摸著石頭過河大概了解。

有人說vue比較簡單，我認為這麼說不公平，越是使用者覺得簡單，那麼它背後的設計和整個開發過程是需要考慮很多方面的。我再打臉，前一個月，一個商業項目，選擇了react，我之前也沒學過這玩意兒，不過大概幾天摸著石頭過河，從最初數據綁定，到組件開發，父子間數據傳遞以及redux應用也學得差不多了，然後就參與整個開發過程。

學IT的，關注新技術這是毋庸置疑滴重要，但不能為了熱而盲目追，就現在這階段，只要不廢棄html，css，js，其他所有的前端新玩意兒最多是加工。

關注新技術新框架，具體業務，合理選型，有時候用jq不一定是很low的選擇。

技術已經被答主們說得差不多了，說說前端娛樂圈的期待：

2017年，很多為前端工作者做出巨大貢獻的大神，被噴子噴得離開知乎了； 例如@尤雨溪

2018年，期待有一個可以心平氣和討論技術的前端圈，最起碼有理有據的互懟，別上來就一句：「你是傻x嗎。」然後走人~，搞得大家莫名其妙！

越來越多可以玩的東西

jQuery 沒人提了，React Vue 越來越火

期待2018年自己做個 APP （不是用 RN ，是原生做一個），以及學更多的後端知識

準備在公司分享做的兩個思維導圖，不夠完善請多見諒

非常想在變化中抓住不變的東西

前端發展

基本功

前端工程化，領域上的不斷完善

DOM API =&>MVC =&> MVP =&> MVVM =&> Virtual DOM =&> MNV*

生態領域不斷完善，構建工具，開發工具；

瀏覽器平台新特性的不斷擴展，支持，應用；

跨平台的支持，包括但不限於：Electron，RN...

新領域的出現webVR webAI

發展速度太快了。有時候別人說到一個東西，我特么聽都沒聽過，一臉懵逼.jpg，然後他一說就是情緒逐漸失控.gif

希望明年前端少搞點新花樣，學都學不完。

要不然

遲早有一天

我會成為大大牛改變這個領域的（一臉認真.jpg，逃）

以上，

就水這麼多了。

rust

2018前端趨勢，簡單分類總結了下：

  1. 業務：項目leader、業務線leader、部門manager，架構師
  2. 框架：React、Vue、Angular
  3. 工具：Webpack、持續集成、自動化測試
  4. 跨端：Hybrid、ReactNative
  5. 圖形：AR、VR、Data
  6. 後端：Node服務、工具
  7. 內核：V8、X5、U4
  8. 其它：ECMAScript、WebAssembly、PWA、 TypeScript

這幾年前端技術變化太快，2018年希望能沉下來，紮實一些。

簡單列幾個腦子裡立馬想到的期待：

  1. iOS PWA 支持，SW 已經在 Release Notes for Safari Technology Preview 46 支持了，相信明年 PWA 的全面支持應該不遠了，但願 Push 本土化不會遇到 Google 遭遇的麻煩；
  2. WebAssembly 支持度繼續上升，期望能力可以繼續不斷擴充，能在業務上有可以落地的點，比如做 MD5 之類的（之前嘗試折騰過發現大部分的實現都依賴 memcpy memset，而內存訪問還只在計劃中 ……）
  3. 希望有時間嘗試下 WebVR，像 ReactVR，Google 家還有很多彈藥庫可以玩玩；
  4. 構建繼續提速，Webpack 4；
  5. WKWebView，蘋果團隊給點力吧，3 年過去了還遺留一堆坑……

2017總結: 不是在撕逼就是在撕逼的路上.

17年初的時候做了一個預測:

前端將回歸本質.

主流框架將越來越相似，不必再各種糾結。

瀏覽器會對JS新特性的支持會有更大的提高，希望babel歸於塵土。

據說chrome將默認開啟對ES6模塊的支持，希望17年底能拋棄webpack。

HTTP2大範圍使用，不再糾結於各種打包合併。

不知道能說中幾條，年底回頭再來看。

至於python，我站3。

好像關於前端的一條也沒中, 反倒是17年有很多重量級的庫拋棄了py2. 因為前端都忙著撕逼啊(逃

至於新的一年有什麼期待, emmm, 讓IE早點入土吧

作為一個復古派, 還是希望前端回歸本質吧, 希望把那股凡事都要上一套重量級框架,再配上一串工具鏈的風氣壓下去. 這兩年All in JavaScript蓋過一切, 不知道還有多少像我一樣的復古派.

用合適的技術實現業務, 服務於用戶, 才是前端的初心. (其實把Vue當庫來用 挺好的)

Babel是沒辦法拋棄了, 畢竟ECMA發布標準的速度比HK記者都快, 每年都得搞個big news

Webpack倒是有了替代品 -- Parcel, 據我試用之後來看, Parcel以html文件為入口的設計, 比Webpack更適合傳統的前端項目. FIS倒是可以徹底扔掉了

不過倒是想吐槽一下Parcel的開發組, 你們把Parcel搞得那麼快, 哪還有時間刷知乎啊,

(ノ=Д=)ノ┻━┻

HTTP2雖然使用率大大提高, 但是榨乾最後一點性能是程序員的美好品德.

前端的道路或許依然曲折, 但是前途是光明的.

與各位共勉

基於blockchain的前端交互類遊戲及應用會有大資本湧入。

推薦閱讀：

※百姓網的前端架構是怎樣的？
※做為初入職的Web前端開發，應該如何儘快提高自己的能力？
※UI 設計師在頁面動效上與前端工程師溝通，有什麼準確快捷的方法？
※近幾年前端工程師挺火，但是深入講，前端工程師都能幹什麼？
※你用到了 CSS 框架中的百分之多少？

TAG:Web開發 | 前端工程師 |