以“娛樂圈”著稱的前端圈，在2018年一如既往地熱鬧，而我也接手前端之巔一年了，與大家一同見證前端這一年的變化。在下文中，我將爲大家做個盤點，細數2018年前端圈發生的大小事，請搬起小板凳，準備吃瓜吧。
本文是InfoQ“解讀2018”年終技術盤點系列文章之一。
一、小程序
2017年1月9日，張小龍通過微信公開課，把小程序帶到大家的生活中，從那以後，小程序戰場陸續引來支付寶、百度、今日頭條入局，同時，手機廠商大概是看到了小程序對其應用商店的威脅，小米、華爲、OPPO、vivo等九大國內手機廠商聯手成立了“快應用聯盟”，以快應用死磕小程序，從這可見小程序發展勢頭之迅猛與前途之無量。
微信小程序
在2018年年初的微信公開課 PRO 上，張小龍曾說，小程序是微信期望最大的項目，並表示對微信小程序充滿信心。
但是，從媒體報道里，我們卻看到有投入到小程序的創業者，在嘗試過後退出，小程序並沒有帶給他們如iOS和Android平臺這樣的紅利窗口，小程序的留存和變現，始終是縈繞在開發者心頭的問題。
當然，除了“壞消息”，微信小程序還是給開發者帶來好消息的。今年7月，在微信公開課微信小程序技術專場上，微信公佈了面向開發者的技術規劃，重點是微信小程序將支持NPM、小程序雲、可視化編程、支持分包等，其中小程序雲開發弱化了服務端，可以說是開發者的福音。
百度智能小程序
在2018百度 AI 開發者大會上，百度智能小程序宣佈正式上線，上線兩個月後，官方宣稱智能小程序月活破億，12月底，月活破1.5億。與其他小程序不同的是，智能小程序核心框架已在GitHub開源，並聯合其它公司打造開源聯盟，提供SDK，可以集成在其它App裏，這樣，其它App就可以打開任意百度小程序，百度試圖通過這種方式來擴大它的小程序的使用範圍。
支付寶小程序
支付寶小程序被視爲“螞蟻金服未來三年最重要的戰略之一”。今年9月，在經歷1年的公測期之後，支付寶小程序宣佈上線，與微信小程序相似，支付寶小程序只能在阿里的生態中使用，截止到今年9月，官方數據顯示，支付寶小程序已經有3億用戶，支付寶小程序平臺的小程序數量超過2萬。
但開發者最關心的支付寶小程序技術問題，除了官方文檔，支付寶並沒有像前兩個小程序一樣，向外界透露太多，公開的資料也寥寥無幾。
頭條小程序
與其他幾個小程序的大肆宣傳不同，頭條小程序十分低調。我們只知道頭條在今年9月發佈了小程序，11月正式上線，但只對部分企業開放，而且只針對 Android 系統，面向開發者的信息基本爲零。
這四家小程序各有特點，微信手持封閉大流量，百度強調開放與生態，支付寶背靠電商大平臺、頭條依靠內容變現，隨着各家小程序逐漸成熟，相信到2019年，小程序的戰場將更加激烈。
二、三大框架
上圖分別是2018年React、Vue、Angular在npm上的下載量及其在GitHub上的表現。
不難看出，2018年，Vue在GitHub上的star數雖然超越了React，但是在npm上，React一塵絕騎，獨領風騷，相反，Vue與Angular就差了很多，在這一點上，Vue的表現出於我的意料。不過，這裏只統計了NPM，由於NPM和Yarn的託管倉庫在國內較難訪問的原因，國內通常使用國內鏡像源，所以這個數據並不完整。尤雨溪在知乎上提過，更準確的統計方法是統計他們的Chrome dev tools插件的用戶數，截止到發稿時間，React的這個數據是126W，Vue的數據是67W，所以React和Vue的差距並不如圖中那麼大。
下面讓我們再來看看這三大框架在2018年都有哪些動態：
React
2018年，從3月份發佈的v 16.3到現在的v 16.7，React一共發佈5個大版本，其中最受關注的主要有兩個特性：
-
React 16.6引入了用於代碼拆分的 Suspense，Suspense 是指 React 在組件等待其他事件發生時“暫停”渲染並顯示加載指示器的新功能。
-
React 16.7.0-alpha 引入了Hooks，Hooks 讓你可以使用功能組件的狀態和生命週期等特性，還可以在不引入額外嵌套的情況下在組件之間重用有狀態邏輯。
根據FB發佈的React 2019年路線圖，React Hooks將在明年Q1被引入React 16.7正式版中，同時React 16.8將引入併發模式 ，v 16.9將上線數據獲取的 Suspense的特性，令人期待。
Angular
Angular今年更新了兩個大版本，分別是5月份發佈的Angular 6和10月份發佈的Angular 7，其中Augular 6新增了ng update、ng add兩個非常實用的功能，Angular 7則帶來了CLI Prompts、虛擬滾動和拖放等特性，最重要的是，angular 7還帶來了Ivy的消息，它是Angular新的渲染引擎，使Angular的編譯速度更快、更簡單。
儘管Angular迭代速度上比其他兩個框架快，而且性能也有了很大的提升，但是從之前Stateofjs 對2018年js生態調查結果可以看出，Angular對開發者的吸引力仍不夠，Google要加油了！
Vue
2018年是Vue大火的一年，今年6月底，Vue在GitHub上的star數反超React，同一周，Vue和React的star數雙雙破了10W，這在前端圈算是一件里程碑的事件了。
2018年8月，Vue CLI 3.0發佈，尤雨溪表示Vue CLI經歷了重構，目的是儘可能減少現代前端工具在配置上的煩惱。
2018年Vue雖然沒有重大版本更新，仍停留在v2.x版本，不過尤雨溪公佈了Vue 3.0的開發路線圖，Vue 3.0將會經歷重構，代碼庫也會用TypeScript編寫，Vue核心將會變得更小、更快、更強大。
雖然Vue的市場份額還比不上React，但是Vue憑藉其出色的特性廣受開發者喜愛。Stateofjs 的數據顯示，在三大框架中，Vue的潛在用戶是最多的，而且，Vue由於門檻較低，更受初學者的歡迎，這點優勢也會隨着初學者的成長而慢慢擴大。
三、編程語言
JavaScript
根據ECMAScript 2018，JavaScript在過去的一年中，主要增加了正則表達式的“.”標誌、對象的剩餘屬性、對象的延展屬性、異步迭代等十個特性。
值得一提的是，2018年10月，TC39 在 GitHub 上還通過了一條 EMCAScript Class field語法特性的草案，即類私有屬性修飾符“#”，這個特性已經在瀏覽器中實現。這個特性在社區裏激起了一些爭議，更是暴露出了TC39委員會缺乏與社區間溝通的弊病。
Dart
作爲Google的親兒子，以及Flutter唯一支持的語言，Dart一出生就自帶光環，然而早期定下與JavaScript正面對抗的目標被證明是失敗的。2018年2月，Google宣佈Dart重啓，Dart 2 的目的有三個：優化語言開發，增強 Google 對 Web 和移動框架的支持能力，將 Google 內部的一些支持 Dart 的工具和組件帶給外部的開發者。
TypeScript
2018年，TypeScript發佈了 3.0版本，3.0 雖然是個大版本，但並沒有包含太多重大的突破性變更，這說明語言已經逐漸成熟。隨着TypeScript在開發者間的流行，以及如Deno這樣的重磅項目默認支持TypeScript，TypeScript在未來甚至可能會威脅到JavaScript官方版本EMCAScript的地位。
四、跨平臺開發
React Native
2018年6月，React博客宣佈FB將要重構 React Native，使其更輕量，更適應 JavaScript 生態圈的發展。然而，不到一個月，國外公司Airbnb宣佈放棄使用 React Native，8月，在線教育機構Udacity 移動團隊也宣佈從App中移除了使用 React Native 開發的最後一批功能，接連被大公司棄用，這給React Native的社區帶來沉重打擊。
React Native的問題是綜合性的，如果Facebook不能傾注更大的力量和資源到React Native上，重構也將不能改變它逐漸淪爲小衆的命運。
Flutter
自 Flutter 在 2017 年 I/O 大會推出以來，就吸引了很多移動開發者的目光。在2018年的最後一個月，Flutter 1.0終於正式發佈了，除了iOS和Android，Flutter還將支持Web和桌面開發，1.0的發佈意味着Flutter開始邁向成熟，以後會逐漸走進開發者的業務中，而更多的應用場景說明了Flutter的野心：成爲終端界面開發的終極解決方案。據瞭解，目前，國內阿里、京東、美團、騰訊都已經在嘗試使用Flutter，隨着1.0正式版的推出，明年Flutter將會獲得新一輪的爆發。
Weex
2018年，Weex幾乎從開發者的視線中消失了，不多說了。
Electron
Electron在2018年的下半年接連更新了兩個大版本，分別是v3.0和v4.0，主要是更新了Node和Chromium的版本。
Electron在與nw.js的競爭中可以說已經取得了勝利，但在2018年它也受到了一些挑戰，一個是Google推出的Carlo，基於Puppeteer使Node程序和Chrome互相通信，從核心原理上與Electron是一致的；另一個是Flutter Desktop Embedding，如果Flutter真的成爲主流，那麼Electron地位的確危險了。
PWA
2018年初，蘋果在 iOS 11.3 中引入了PWA，這使得PWA跨平臺開發成爲可能，10月，Chrome 70的Windows端支持PWA。PWA中的Service Worker使用的人逐漸增多，但由於各個平臺仍然存在一些兼容問題，完整的PWA並未得到大規模的應用。
五、前端大事件
deno issue事件
2018年5月，Node 之父 Ryan Dahl 發佈新的開源項目 deno，根據官方文檔的介紹，deno的性能優於Node，它也因此被認爲是下一代 Node，這本是一件令人開心的事，但沒想到中國開發者竟然跑到deno issue中刷屏，如“求別更新了，老子學不動了”，並指責ry對Node不負責，讓其中斷deno項目的開發。最後，ry不得不關閉了deno的issue，相關issue也被刪除了，可以說丟人丟到國外去了。
看到這裏，我忍不住想說，每次一發技術更新的文章，請不要再在微信後臺留言“求別更新了，老子學不動了”之類的話，沒用，因爲你們都逃不過“真香定律”。
GitHub重構頁面移除了jQuery
2018年7月，GitHub頁面改版，與此同時，其前端團隊還乘機移除了頁面中的 jQuery，值得一提的是，GitHub 前端團隊並未使用其它框架來代替 jQuery，而是使用原生 JS，具體原因GitHub也給出了說法。這也說明曾風靡一個時代，也是前端開發者得心應手的武器庫jQuery漸漸沒落了。
周下載量過200萬的npm包被注入惡意代碼
11月底，npm 下載量超過 200 萬的 package 被注入了惡意代碼，黑客利用該惡意代碼訪問熱門 JavaScript 庫，目標是 copay（開源比特幣錢包）及其衍生產品的用戶，以此竊取用戶的數字貨幣。
這個被注入惡意代碼的 package 名爲event-stream，它是一個用於處理 Node.js 流數據的 JavaScript 軟件包，由於Angular、Vue、Bootstrap、Gatsby等項目在使用這個包，因此都受到了影響。
微軟宣佈桌面版Edge將基於Chromium進行開發
2018年12月7日，Windows 副總裁 Joe Belfiore 在 Windows 官方博客上正式宣佈桌面版 Edge 將基於 Chromium 進行開發，以減少 Web 開發生態的碎片化，爲用戶提供更高的 Web 兼容性。
Joe Belfiore 說，在過去幾年，微軟積極參與開源軟件（OSS）社區的建設，也因此成爲世界上最大的 OSS 項目支持者之一，他強調，今後，微軟將成爲 Chromium 項目的重要貢獻者之一，這不管是對 Microsoft Edge 還是其他瀏覽器，都具有重要意義。
阿里Antd代碼彩蛋事件
12月25日，部分開發者突然發現他們開發的 Web 網頁的界面發生了變化，按鈕上方出現“積雪”，經過探索發現這是前端 UI 組件庫 Ant Design（簡稱 antd）提前埋入一個未經聲明的“彩蛋”，並且沒有下線機制，引起了巨大爭議。
由於前端開源代碼缺乏商業化元素，讓一部分人認爲隨意修改代碼並沒有責任，對於一些個人的小型項目來說這麼說並沒有錯。但是antd作爲企業級開源項目，項目的維護者應該抱有更加嚴謹的態度，畢竟能力越大，責任也越大。
六、2019年預測
對於前端的未來，有些很好預測，有些卻沒那麼明朗，筆者這裏不負責任的做一些大膽的預測，讀者可以自行判斷。
首先，Hooks將改變前端框架代碼組織的方式，而2019年我們很快就能用上了。
然後，GraphQL，國外很多人都看好它，還有一些大公司如Airbnb在嘗試使用，但在國內推進極難，畢竟涉及到前後端的改變，而國內前端在系統設計中的話語權太低，難以影響技術選型，這個除非在國外已經非常流行，國內後端主動要用，否則感覺難以普及。
再然後，小程序，小程序是國內獨有的產品形態，由微信主導，但由於微信的剋制，我們很難期待小程序的突然爆發，過不久就是微信公開課Pro了，看張小龍這次會放出什麼新玩法吧。
Flutter 2019年會迎來爆發，有人說，React Native好幾年都沒有1.0，Flutter現在就已經1.0，所以更相信Flutter，無言以對。不過，聯想到離我們越來越近的Fuchsia以及它和Flutter的關係，學習Flutter的確可以算未雨綢繆。
React Native上面已經分析過了，重構只能解決一部分問題，更重要的是挽回開發者的信心。
PWA目前還是很難和原生App競爭，如果一直這樣下去，只是在技術上做文章的話，仍然很難發展起來。但如果PWA能進入App Store或者Google Play，那就是一個Game Changer了，這個2019年會發生嗎？我覺得懸。
WebAssembly看着是前端領域發生的事情，但實際上是給那些C++、Rust、Go語言等的開發者用的，目前來看是雷聲大雨點小，從它最有可能的應用方向，遊戲來說，它的橋接性能太差，除非整個遊戲使用WebAssembly，否則還不如JS，所以預測2019年也不會有太大變化。
至於框架之爭這個敏感的問題，我只能說三者之間很難在短時間分出勝負了，你想問我看好哪個？唔……不如讀者來說說你選擇哪個，以及爲什麼？
更多內容，請關注前端之巔（ID：frontshow）
