2018年前端開發回顧
摘要： 前端發展迅速，非常快！
- 原文：2018年前端開發回顧
- 作者：前端小智
Fundebug經授權轉載，版權歸原作者所有。
本文將回顧2018年一些重要的前端新聞，事件和JavaScript趨勢。
WebAssembly 釋出 1.0 版本的核心規範
WebAssembly被認為是 web 的未來。它的目標是通過提供在web上執行的二進位制格式來最大化效能、減少檔案大小並支援多種語言的web開發。
2017年底，所有主流瀏覽器都宣佈支援 WebAssembly。在2018年2月，WebAssembly有三個主要版本:
NPM 各個熱門前端庫(框架)下載量比較
下載數排名前的分別為 React，jQuery，Angular 和 Vue。以下是它們的拆線圖：
React庫不斷改進，依舊稱霸前端
React在 web 開發領域佔據主導地位已有多年，而且在 2018 年期間絲毫沒有放緩。根據Stackoverflow 的調查，它仍然是最受歡迎的一個前端庫。
核心 React 團隊在更新庫和新增功能方面非常活躍。在整個2018年，看到React v16釋出版增加了許多功能，包括新的生命週期方法、新的上下文API、指標事件、延遲函式和 React.memo 。還有，最受關注的兩個特性是
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/