2018年前端開發回顧

摘要： 前端發展迅速，很是快！

• 原文：2018年前端開發回顧
• 做者：前端小智

Fundebug經受權轉載，版權歸原做者全部。

本文將回顧2018年一些重要的前端新聞，事件和JavaScript趨勢。

WebAssembly 發佈 1.0 版本的核心規範

WebAssembly被認爲是 web 的將來。它的目標是經過提供在web上運行的二進制格式來最大化性能、減小文件大小並支持多種語言的web開發。

2017年末，全部主流瀏覽器都宣佈支持 WebAssembly。在2018年2月，WebAssembly有三個主要版本:

• 核心規範1.0
• WebAssembly的JavaScript接口
• WebAssembly的 Web API

NPM 各個熱門前端庫(框架)下載量比較

下載數排名前的分別爲 React，jQuery，Angular 和 Vue。如下是它們的拆線圖：

React庫不斷改進，依舊稱霸前端

React在 web 開發領域佔據主導地位已有多年，並且在 2018 年期間絲毫沒有放緩。根據Stackoverflow 的調查，它仍然是最受歡迎的一個前端庫。

核心 React 團隊在更新庫和添加功能方面很是活躍。在整個2018年，看到React v16發佈版增長了許多功能，包括新的生命週期方法、新的上下文API、指針事件、延遲函數和 React.memo 。還有，最受關注的兩個特性是 React Hook和 Suspense API。

React Hooks 獲得了一些強烈的反饋，許多開發人員都喜歡這個更新。Hooks 是一種使用 useState 功能向函數組件添加狀態的方法，它還將管理生命週期事件。

另外一個新的特性是 React Suspense，它是一種管理 在 React 組件內部獲取數據的方法。它在等待渲染異步響應時數據，Suspense 是延遲函數背後用來管理組件的代碼分割的。最終的設想是可以經過Suspense 管理全部異步加載，例如API請求，它還容許緩存來自請求的結果。

通常顯示加載狀態的例子是如 isFetching 爲 true 時在屏幕上顯示加載圖標。 使用 Suspense，能夠對UI進行細粒度控制，以指定等待時要顯示的回退組件，等待時間以及如何管理導航。 許多人甚至認爲 Suspense 能夠消除對 Redux 的需求。

Vue 迅速成長，github stars 數量超過 React

在2017年實現爆炸式增加後，Vue在2018年繼續增加。事實上，它在GitHub stars數量已經超過React。

雖然Vue深受歡迎，但它在實際（國外）使用中仍遠遠落後於React和Angular。但，Vue 擁有一個仍在增加的充滿激情的用戶羣，並且這個庫將在將來幾年成爲一股強大的力量。

Vue 3更新計劃

在11月14日-16日於多倫多舉辦的 VueConf TO 2018 大會上，尤雨溪發表了名爲 「 Vue 3.0 Updates 」 的主題演講，對 Vue 3.0 的更新計劃、方向進行了詳細闡述。目前該演講的 PPT 也已上傳至 Google 文檔，感興趣的可點此查閱。本次版本主要圍繞如下幾個版原本升級：

• 更快
• 更小
• 更易於維護
• 更多的原生支持
• 更易於開發使用

完整的ppt地址：Vue 3.0 Updates

Angular依然活躍，版本7發佈

今年10月，Angular在其流行的UI框架的第7版中又發佈了另外一個主要版本。 從早期的 AngularJS MVC架構到使用更爲現代的組件的Angular包，Angular 已經有了大量的增加， 隨着這種增加，它已被進一步採用。

雖然 Angular 沒有 React 和 Vue 等庫中看到的那種狂熱開發都及使用者，但它仍然是大型專業項目的主要選擇。許多開發人員在使用 React 時都會感到疲憊，由於它須要工程師在管理構建管道的同時作出許多依賴和架構決策。

另外一方面，Angular 從開發人員那裏省去許多決策，並提供更常見的代碼模式。Angular 是一個很是規範化的完整框架，CLI 管理全部構建步驟。專業環境的另外一個好處是，Angular 須要TypeScript。Angular 已經在 web 開發世界中挖掘出了它的價值，並繼續被採用。

注意:@angular/core 表明新的 Angular, angular 表明舊的 Angular

GraphQL 學習意願高漲，但仍未超過 REST

GraphQL已經被GitHub等技術領導者採用。然而，它並無像一些人預測的那樣迅速起飛。根據State of JS survey ，只有1/5的前端開發人員使用過GraphQL，可是使人吃驚的是，62.5% 的開發人員據說過並但願使用它。

js內嵌css使用更加普遍

Web開發彷佛已經走上了在 JavaScript 下統一全部內容的道路，這一點在 CSS-in-JS 的採用中獲得了體現，其中樣式是使用 JavaScript 字符串建立的。這容許經過使用JS語法 import/export 共享樣式和依賴項。它還簡化了動態樣式，由於 CSS-in-JS 組件能夠將道具插入到它的樣式字符串中。下面是一個經典的 CSS vs CSS-in-JS 的例子。

要使用 CSS 管理動態樣式，必須管理組件中的類名並根據 state/props更新它，還須要一個保存CSS類的變量：

使用 CSS-in-JS ，不用再管理CSS類。只需經過 props 傳遞給樣式組件，它就能夠處理動態樣式。 代碼更清晰，經過基於 props 管理 CSS 的動態樣式，更清晰地分離了樣式和React的關注點。 它如今讀取就像普通的 React 和JavaScript代碼同樣：

CSS-in-JS的兩個主要庫分別是 styled-components 件和 emotion 。styled-components] 已經存在了很長一段時間，而且被愈來愈多的人採用，可是 emotion 正在迅速獲得普及，許多開發人員發現它是首選庫。事實上，Kent C. Dodds 甚至不同意他本身的 CSS-in-JSS庫，，更傾向於emotion 由於它頗有魅力。

當使用單個文件組件時，Vue 還支持開箱即用的有做用域的CSS。經過 scoped 屬性添加到組件的樣式標記，Vue 將使用 CSS-in-JS技術來定義樣式，以便它們不會滲透到其餘組件中。

此外，Angular 經過「視圖封裝」支持CSS的做用域，這是默認打開的。

疲於使用各類CLI工具的狀況有所改善

跟上最新的庫、正確配置應用程序並作出正確的架構決策，這些都不是什麼祕密。這種痛苦催生了管理工具的 CLI 包的建立，讓開發人員可以專一於應用程序。在 2018 年,這種 CLI 已成爲開發人員建立應用程序的主要方式。流行的框架包括 Next.js (SSR表明React)， Create-React-App(客戶端React)， Nuxt.js(用於Vue的SSR)、Vue CLI(客戶端Vue)、Expo CLI(用於React Native)，Angular 默認狀況下支持。

靜態網站生成工具繼續發展

隨着JavaScript革命的發展，每一個人都喜歡學習最新最好的庫，可是完成一些項目時，咱們意識到並不是每一個網站都須要成爲一個複雜的單頁面應用程序(SPA)。這致使了靜態站點生成的增加。這些工具容許在本身喜歡的庫(如React或Vue)中編寫代碼，但在構建期間生成靜態HTML文件，容許咱們當即爲用戶提供完整構建的頁面。

靜態站點很棒，由於它們提供了性能與簡單性的結合。使用在構建時呈現的HTML文件，能夠當即向用戶發送一個頁面，並不須要 SSR 或 CSR 代碼，容許頁面幾乎在瞬間加載。而後在客戶機上下載必要的 JavaScript文件，從而實現單頁體驗。

靜態站點很是適合構建我的網站或博客，可是它們能夠很容易地擴展到更大的應用程序。已經看到了構建靜態網站的流行框架的興起，好比 Gatsby 和 React static for React應用，以及 VuePress for Vue應用。

無服務器架構與 JAMstack

隨着靜態網站的日益普及，咱們也看到了後端的持續增加以補充它們。在過去的幾年裏，無服務器架構已經成爲web開發中的一個流行詞，由於它可以在下降成本的同時解耦客戶機和服務器代碼。

無服務器架構的一個擴展是 JAMStack (JavaScript、Api、Markup)。JAMStack 理念基於上一節討論的靜態站點概念。因爲預先構建的標記，它容許快速加載時間，並經過爲服務器使用可重用 Api 在客戶機上成爲一個動 態SPA。在2018年，甚至看到了有史以來的第一場J AMStack 黑客馬拉鬆。freeCodeCamp、Netlify和GitHub聯手舉辦了一場面對面和在線的黑客馬拉松，開發人員能夠在 GitHub 總部編寫代碼，或者與世界各地的其餘開發人員聯繫。

TypeScript多是JavaScript的將來(但對於Flow就不同了)

JavaScript 由於沒有靜態類型變量而受到批評。試圖糾正這一問題的兩個主要庫是 TypeScript 和 Flow，但TypeScript彷佛是最受歡迎的。事實上，在 Stack Overflow 調查中，TypeScript的受歡迎程序高於 JavaScript 自己，分別爲 67％ 和 61.9％。根據 JS 的現狀調查，超過80%的開發者想要使用 TS 或者已經在使用它。對於Flow，只有 34% 的開發人員正在使用它或但願使用它。

全部跡象代表，TypeScript 是 JS 中靜態類型的首選解決方案，許多人選擇它而不是 JavaScript。2018年，TS 的npm 下載量大幅增加，而流量卻很是平穩。TypeScript看起來正在從一個狂熱的追隨者轉變爲普遍的採用。

webpack 4發佈

Webpack 3發佈僅8個月後，版本4就發佈了。Webpack 4 繼續推進簡單和更快的構建，聲稱改進了98%。它選擇了合理的默認值，在沒有插件的狀況下處理更多的開箱即用的功能，而且再也不須要開始使用配置文件。Webpack 如今也支持 WebAssembly，並容許直接導入 WebAssembly 文件。

Babel 7發佈

自第6版開始將近3年後，Babel 7 於 2018 年發佈。Babel 是將 ES6 + 代碼轉換爲 ES5 的庫，使JavaScript 代碼跨瀏覽器兼容。

Babel 7.0帶來的不兼容性變動：

• 刪除對未維護的 Node 版本的支持：0.10,0.12,2,5
• 經過切換到使用「scoped」包將現已遷移到 @babel 命名空間，這有助於區分官方軟件包，所以 babel-core 將成爲 @babel/core
• 刪除（並中止發佈）任何年度預設（preset-es2015 等）， @babel/preset-env 取代了對這些內容的需求，由於它包含了全部年度添加內容以及針對特定瀏覽器集的能力
• 同時刪除「Stage」預設（@babel/preset-stage-0 等），轉而選擇單獨的提案。一樣，默認狀況下從 @babel/polyfill 刪除提案
• 對部分軟件包進行重命名：任何關於 TC39 提議的插件如今更改成 -proposal 而再也不是 -transform 。即，@babel/plugin-transform-class-properties 變動爲 @babel/plugin-proposal-class-properties
• 爲某些面向用戶的軟件包在 @babel/core 上引入 peerDependency (如，babel-loader, @babel/cli, etc)

2019年的預測

• 隨着基礎的創建和對改進 web 體驗的不斷推進，WebAssembly將開始普及。
• React 依然高居榜首，但 Vue 和 Angular 的用戶數量仍會增加。
• CSS-in-JS 可能會成爲默認的樣式化方法，而不是普通的CSS樣式。
• 開發人員是否能夠從新審視原生Web組件?
• 毫無疑問，性能仍然是關注的焦點，諸如 PWAs 和代碼分離之類的事情成爲每一個應用程序的標準。
• 在使用PWA的基礎上，web變得更加本地化，具備離線功能和無縫的桌面/移動體驗。
• CLI工具繼續的改進，以抽象出構建應用程序的繁瑣方面，讓開發人員專一於業務開發。
• 更多的公司採用具備統一代碼庫的移動解決方案，如React Native或Flutter。
• Docker、Kubernetes等工具會更加流行
• GraphQL 使用方面會有了飛的增加，並被更多的公司使用。
• 虛擬現實技術利用A-Frame、React VR和谷歌VR等庫取得了長足的進步。

原文：https://levelup.gitconnected....

應用部署以後，可能存在的bug無法實時知道，過後爲了解決這些bug，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具Fundebug。

你的點贊是我持續分享好東西的動力，歡迎點贊！

一個笨笨的碼農，個人世界只能終身學習！

更多內容請關注公衆號《大遷世界》！

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了9億+錯誤事件，獲得了Google、360、金山軟件、百姓網等衆多知名用戶的承認。歡迎免費試用！

版權聲明

轉載時請註明做者Fundebug以及本文地址： https://blog.fundebug.com/2018/12/21/recap-of-frontend-development-2018/