【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 
HI

}
// 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>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 翻譯，如需轉載，請註明來源出處。

閱讀更多 CSDN 的文章

關鍵字: CSDN 前端開發 jQuer