前端很慌！React 稱霸，Vue 凶猛，TypeScript 威逼 JavaScript
【CSDN編者按】2018 年前端開發繼續飛速發展，前端工程師的薪資更是水漲船高，本文就整理了 2018 年度前端開發領域的重大事件，包括：WebAssembly 釋出標準核心的 1.0 版本；React、jQuery、Angular 和 Vue 分佔下載量前四位；React 繼續統治網頁開發領地；Vue 延續 2017 年的熱度持續火爆；Javascript 未來的發展趨勢等等......希望藉助此文，能幫助前端開發者站在 2019 的技術高地，拔得頭籌。下面來一探究竟。
作者 | Trey Huffine
譯者 | 蘇本如
責編 | 郭芮
出品 | CSDN（ID：CSDNnews）
以下為譯文：
一、WebAssembly 釋出標準核心的 1.0 版本
WebAssembly通常被認為是網頁技術的未來。它通過在網頁上執行二進位制格式的檔案來提高網頁效能、減小檔案大小和支援多種語言的網頁開發。
到2017年底，所有主流瀏覽器都宣佈支援WebAssembly，隨後WebAssembly在2018年2月釋出了下面3個重大更新：
-
升級核心規範至1.0版；
-
支援WebAssembly的JavaScript介面；
-
支援WebAssembly的Web API。
二、React、jQuery、Angular 和 Vue 佔據下載量前四位
下圖顯示了前端開發庫下載量的最新變化：
三、React 延續統治地位！
React已經主導了網頁開發多年，它在2018年也沒有放緩它的步伐。根據Stackoverflow的調查，它仍然是最受歡迎的程式碼庫之一。
React的核心團隊在升級程式碼庫和增加新特性上非常積極。在整個2018年，我們看到了React的新版本v16上出現了很多新特性，包括新的lifecycle方法、新的上下文API、指標事件、Lazy函式和React.memo方法。然而，最受關注的兩個特性是React Hooks和Suspense API。
React Hooks已經收到了很多正面的反饋，許多開發人員都喜歡這個新特性。React Hooks是用useState函式向功能元件新增狀態的一種方法，它還可以管理lifecycle事件。此前，
在2018年React大會上，主講人Ryan Florence就公開展示了使用React Hooks讓他的示例程式碼乾淨了90%，最新版本的React其中的幾個hooks api可以大幅減少react functional元件的程式碼量。
React Suspense也是一個很大的改變，它提供了一個在React元件內部管理資料獲取的方法。React Suspense作用於Lazy函式背後來管理元件的程式碼分割，它的最終目標是能夠通過Suspense API來管理所有非同步載入，例如API請求，它還允許快取請求的結果。
下面的這個示例展示了當isFetching標誌值被設定為true時螢幕上出現了許多等待載入的“轉圈圈”效果。使用Suspense可以對UI進行細粒度的控制，通過fallback元件來顯示哪個元件正在載入，還要等待多長時間完成載入以及如何管理導航。
許多人甚至認為有了React Suspense，Redux就不需要了。
想了解React Suspense的更多資訊，可以看看Dan Abramov的關於使用Suspense API來構建應用程式的演講：https://medium.com/@dan_abramov。
四、Vue 的 Github 點贊數力壓 React
Vue自2017年爆發後，在2018年持續火爆。事實上Vue在GitHub上收到的點贊次數甚至已經超過了React。
雖然Vue深受喜愛，它的實際使用量仍然比React和Angular落後不少。然而Vue擁有狂熱的使用者群，而且這個使用者群還在不斷增長，這樣看來Vue會在未來幾年內迅速成為一股不可忽視的力量。
五、Evan You（Vue 的創作者）建議大家嚐鮮 Vue 3.0
Vue的新版本3.0正在開發中。其創作者Evan You在2018年11月份的Vue多倫多大會上對新的3.0版作了介紹，他的演講的幻燈片已經在網路流傳，演講視訊也很快就能看到。
六、Angular 繼續流行，新版本 v7 已釋出
Angular在10月份釋出了新版本v7。從早期的採用MVC架構的AngularJS 到現代的使用元件的Angular開發庫，Angular成長顯著，它的使用量也隨著這種成長不斷增加。
雖然Angular不像我們從React和Vue上看到的那樣有眾多狂熱的粉絲，但它仍是專業專案的熱門選擇。許多開發人員在使用React時會感到疲勞，因為它要求工程師在管理構建pipeline的同時，做出許多依賴項和架構上的決策。
而Angular不一樣，為了幫助保證程式碼規範化，Angular不需要開發人員作很多決定。Angular是一個高度規範的完整框架，CLI（命令列介面）管理所有構建步驟。對於專業環境的另一個好處是Angular需要TypeScript，Angular認為TypeScript對前端開發來說不僅價值巨大，而且前景美好。
注：@angular/core表示新的Angular，angular表示舊的AngularJS。
七、GraphQL 熱度持續提升，繼續挑戰 REST
儘管GraphQL已經在像GitHub這樣的主流公司佔據了一席之地，但它並沒有像某些人預測的那樣迅速起飛。
根據StateofJS的調查結果，只有1/5的前端開發人員使用過GraphQL，然而令人吃驚的是，62.5%的開發人員聽說過GraphQL並希望使用它。
八、CSS-in-JS 的應用持續增加
前端網頁開發感覺已經走上了一條用JavaScript統一所有內容的道路，這在採用CSS-in-JS中得到了體現，其中樣式是使用JavaScript字串建立的。這允許我們通過匯入/匯出使用普通JS語法來共享樣式和依賴性。它還簡化了動態樣式，因為CSS-in-JS元件可以將props插入其樣式字串。
下面是一個經典CSS與CSS-in-JS中對比的例子。
使用經典CSS管理動態樣式，我們必須管理元件中的類名，並基於state/props對其進行更新，我們還需要一個CSS類來管理這些變數：
// Component JS file
const MyComp = ({ isActive }) => {
const className = isActive ? 'active' : 'inactive';
return <div className={className}>HI</div>
}
// CSS file
.active { color: green; }
.inactive { color: red; }
而使用CSS-in-JS，我們不再需要管理CSS類。我們只需將props傳遞給樣式化元件，它就可以處理動態樣式化。這樣做程式碼更加清晰，並且通過允許CSS基於props管理動態樣式，我們可以更清楚地分離對樣式和React的關注。現在的程式碼讀起來就像正常的React和JavaScript程式碼一樣了：
const Header = styled.div`
color: ${({ isActive }) => isActive ? 'green' : 'red'};
`;
const MyComp = ({ isActive }} => (
<Header isActive={isActive}>HI</Header>
)
CSS-in-JS的兩個主要庫是styled-components和emotion。Styled-components已經存在很長時間了，並且已經得到很多的應用，Emotion正在迅速普及，因為許多開發人員發現它是首選的庫。事實上，Kent C.Dodds甚至不再更新他的CSS-in-JS庫（Glamorous）以支援Emotion。
Vue還在使用單檔案元件時，通過將scoped屬性新增到元件的style標籤上，來實現對有作用域的CSS的支援，Vue將使用CSS-in-JS技術來限定樣式的作用域，以便它們不會被其他元件誤用。
Angular也通過“檢視封裝”來支援CSS作用域，這是預設開啟的。
九、CLI 工具讓開發者變得輕鬆
人人皆知，緊跟最新的開發庫，正確地配置應用程式，以及做出正確的架構決策，這一切會讓人變得精疲力竭。這種痛苦催生了CLI（命令列介面）管理工具包，保證了開發人員能將精力集中在應用程式上。
CLI工具包已經成為開發人員在2018年建立應用程式的主要方式。流行的框架包括Next.js（React的服務端渲染(SSR)）、Create-React-App（客戶端React）、Nuxt.js（Vue的服務端渲染(SSR)）、Vue CLI（客戶端Vue）、Expo CLI for React Native，當然預設地也包括Angular。
十、靜態網站隨著前端簡化和效能優化不斷增長
隨著JavaScript的不斷進化，每個人都喜歡學習最新最棒的開發庫，但現在事情已經解決了，我們意識到並不是每個網站都需要一個複雜的單頁應用程式（SPA）。這就導致了靜態網站生成器的不斷增長。
這些工具允許開發者在喜歡的庫（如React或Vue）中編寫程式碼，但是在構建期間生成靜態HTML檔案，允許我們立即為使用者提供完全構造的頁面。
靜態網站很棒，因為它們是效能和簡單的理想組合。通過構建時生成的HTML檔案，我們可以立即向用戶傳送頁面，而無需處理服務端渲染（SSR）或客戶端渲染（CSR）程式碼，從而允許他們幾乎立即載入網頁。然後，客戶端下載必要的JavaScript檔案，以便馬上看到頁面效果。
靜態網站非常適合構建個人網站或部落格，但它們可以很容易地擴充套件到更龐大的應用上。我們已經看到了構建靜態網站的流行框架的興起，比如Gatsby, React Static和VuePress。
事實上，靜態網站已經變得如此流行，以至於Gatsby實際上已經成立了一家公司，並在去年獲得了風險資金以資助其開源庫的開發。
十一、無伺服器架構一直是 Web 開發的流行語
隨著靜態網站的日益普及，我們也看到後端在不斷髮展以迎合這種變化。在過去幾年中，無伺服器架構一直是Web開發中的流行語，因為它能夠將客戶端和伺服器端程式碼解耦，以較低的成本執行。
無伺服器思想的實際應用是JAMStack（使用JavaScript、API和Markup構建的技術堆疊）。JAMStack建立在上一節討論的靜態網站概念之上。由於預先構建的模組化標記，它能夠快速實現網頁載入，並通過使用伺服器端可重用的API，讓靜態網站在客戶端成為一個動態SPA。在2018年，我們甚至看到了第一次JAMStack的程式設計馬拉松——freeCodeCamp、Netlify和GitHub聯合舉辦了一場現場和連線程式設計馬拉松，允許人們在GitHub總部編寫程式碼或與世界各地的其他開發人員協同工作。
為了理解JAMStack構建的網站在保持效能的同時可以擴充套件到多大規模，Quincy Larson向大家解釋了freecodecamp.org網站是如何用JAM構建出來的：https://medium.com/@quincylarson。
十二、TypeScript 將取代 JavaScript！
JavaScript因為沒有靜態變數而受到批評。試圖糾正此問題的兩個主要開發庫是TypeScript和Flow，TypeScript似乎更受歡迎。
事實上，StackOverFlow的調查顯示，TypeScript以67%對61.9%的評分打敗了JavaScript而成為最受歡迎的開發語言。而根據State of JS的調查顯示，超過80%的開發人員希望使用TypeScript或者已經很開心地使用它，而只有34%的開發人員正在使用或想要使用Flow。
所有跡象表明，TypeScript是解決JS中靜態變數問題的最好解決方案，很多人不會想用JavaScript。TypeScript的npm下載量在2018年大幅增長，而Flow的下載量則無起色。
TypeScript看起來正在從狂熱的崇拜轉向廣泛的應用。
十三、AMP（加速移動頁面）實現了快速增長
AMP是專門為移動裝置構建的頁面，在2018年得到了大幅的增長。
十四、Webpack4 於 2018 年初發布
Webpack 3釋出後僅僅8個月，Webpack 4就面世了。
Webpack 4繼續追求簡單化和更快速的構建，它聲稱作了98%的改進。它增加了很多預設配置項，在沒有外掛的情況下處理更多的功能，並且不再需要啟動配置檔案。Webpack現在還支援WebAssembly，並允許開發者直接匯入WebAssembly檔案。
十五、Babel 釋出了新版本 7.0
Babel 6釋出近3年後，版本7.0在2018年釋出了。
Babel開發庫能將符合ECMAScript6（ES6）標準的JavaScript程式碼向下轉換成符合ES5標準，從而使我們的JavaScript程式碼能跨瀏覽器相容。Babel在介紹新版本的文章中指出，版本7.0在如下方面作了改變：“執行更快，提供了升級工具，提供了JS配置檔案，支援配置‘覆蓋’，提供了更多程式碼壓縮的選項，支援JSX片段，支援TypeScript，提供新的proposals等等！”
Babel也開始在@babel名稱空間下限定其包的作用域。
十六、VS Code 支配文字編輯器/IDE 領地
對於追溯到Vim和emacs的開發人員來說，文字編輯器和IDE是主戰場。隨著Electron的誕生，基於外掛的開源編輯器爆炸式增長，Atom佔據了早期的市場份額。
然而，VS Code最近被證明是2018年開發人員和整體領先編輯的最佳選擇。
十七、2018 年度前端領域最具影響力的文章縱覽
-
下面是2018年的一些最佳文章：
https://levelup.gitconnected.com/top-web-development-articles-of-2018-bd5c3900110b
-
Addy Osmani展示了2018年JavaScript的成本（效能）分析：
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
-
從11月的React大會上我們瞭解React的未來：
https://reactjs.org/blog/2018/11/13/react-conf-recap.html
-
Airbnb分享他們兩年來使用React Native的體驗：
https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1c
-
Google讓我們一窺Google Photos的UI構建：
https://medium.com/google-design/google-photos-45b714dfbed1
-
Microsoft Edge決定採用Google網頁瀏覽器Chromium的技術：
https://techcrunch.com/2018/12/06/microsoft-edge-goes-chromium-and-macos/
-
Ryan Dhal（Node建立者）分享了他在Node.js上犯的錯誤：
https://youtu.be/M3BM9TB-8yA
十八、2019 年度大預測！
-
隨著基礎的建立和不斷改進的網路體驗，WebAssembly將煥發青春；
-
React繼續領跑，Vue和Angular的使用者持續增長；
-
CSS-in-JS取代普通CSS，成為預設的網頁樣式化方法；
-
原生網頁元件會被開發人員再次重視；
-
效能仍是關注焦點，而PWA和程式碼分割將成為每個應用程式的標準；
-
PWA的採用使Web應用具備離線能力和無縫的桌面/移動體驗，更接近原生App；
-
CLI工具和框架的應用將持續增長，以便開發人員集中精力在功能實現上；
-
更多的公司將採用具有統一程式碼庫的移動解決方案，如React Native或Flutter；
-
主流容器化工具（如Docker、Kubernetes）在前端開發中將變得更加普遍；
-
GraphQL一飛沖天，將被更多的公司採用；
-
TypeScript取代標準JavaScript，成為預設選擇；
-
虛擬現實通過使用諸如A-Frame、React VR和Google VR向前大步邁進。
原文：https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2018-715724c9441d
本文為 CSDN 翻譯，如需轉載，請註明來源出處。
熱 文 推 薦
☞ ofo 銀行賬戶凍結；12306 事件嫌疑人被捕；京東劉強東放權二把手 | 極客頭條
☞ 新年到，獻給從一線工程師到CTO的實用指南:《2019區塊鏈開發者報告》