2018前端開發五大趨勢

1. Vue.js

就在兩年前，很難想象Vue.js可以忍受迅猛發展的React系統的競爭。通過深思熟慮且久經時間考驗的Angular是一回事，可是Vue ......咱們沒想到這個 開發 環境成爲前端技術工具列表中的佼佼者。 對於那些不熟悉Vue的讀者，讓咱們簡要介紹一下它的制勝之道。

爲什麼Vue.js居於榜首？首先，很容易學習而且擁有靈活的建立前端代碼的環境，這使得代碼編寫的出錯率較低。Vue的開發者Evan You曾在Angular工做過。 他肯定後者對於UI的構建而言沒必要要且繁瑣，他大膽地建立了一個入口門檻很低的前端建立解決方案，所以Vue出現。 它旨在幫助那些編程經驗不多的設計人員將全部工做都用於建立功能界面。 此外，Vue.js支持聲明式呈現，異步DOM更新，雙向數據綁定，以及嚴格遵照Web組件規範和HTML模板的簡單集成。

到目前爲止，Vue.js的特性被一個小型的社區支持（相比於React和Angular這種當前特別流行的庫來講，這是經過 [React] 和 [Angular]的消息來源獲得的）。通常來講，若是Angular甚至是React——Javascript最流行的庫之一——對你來講過於複雜，並且看起來至關嚴格和不靈活，那你絕對應該在2018年就結識Vue。

2.Angular

儘管咱們在2018年看到的頂級Javascript庫的競爭趨勢直接在Angular和Vue.js之間展開，但前者在來年的實用性不會減小。若是你以前尚未使用Angular工做（至少是使用Angular 2），那麼你必定要熟悉它的優勢。讓咱們開始吧。

首先，這個框架須要Javascript與HTML和CSS。第二，它是團隊協做的理想選擇，由於它建立的應用程序能夠明確劃分爲組件 - 業務邏輯和前端。這是可能的，由於開發環境是基於MVVM（模型－視圖－視圖－模型）模式下的。第三，Angular是建立可擴展應用程序的理想選擇，支持與第三方庫的簡單集成。這個框架常常用於構建動態的移動應用，由於它使用了雙向數據綁定，這種方法增長了帶有豐富動畫元素的應用程序的響應能力。

如今，讓咱們來討論一下Angular的缺點。第一件事情，也是開發人員常常提到的，就是在移動設備上的高耗電量（不過與其餘框架相比，經過正確的代碼優化，能夠減小這個問題）和高入門門檻（若是你是從頭開始使用Angular開始工做，那麼你要準備好去花費1.5到2個月的時間去學習它的大量文檔）。

若是咱們總結一下上述不一樣的框架所克服的各類問題，咱們能夠說Angular是一個久經考驗的框架，經過適當的模塊化處理，使得它能夠構建出可擴展的解決方案（這足以從相關的demo中證實）。所以，咱們自信的推斷，儘管每一年都有愈來愈多的JS框架進入IT市場，Angular依然是近幾年來最好的Javascript框架之一。

3. GraphQL

GraphQL是一種有着奇怪語法的API查詢語言，由Facebook開發者們開發。它的目的是超越傳統的REST APIs的功能，同時簡化多個源傳輸的數據集合。

讓咱們舉個具體的列子。想象一下，你須要在正在構建的社交網絡框架中顯示帖子列表，以及用戶的喜愛（點贊、收藏等）。在實現方面，這個例子很簡單，你只需從下一個 [數據庫] 端點發出請求。可是，因爲這些數據可能來自不一樣的來源（例如，若是帖子存儲在 MongoDB或Redis中），生成的應用將比溫馨的工做慢得多。此外，若是您考慮到，隨着時間的推移，數據的大小會增長，所以須要更多的存儲空間，你會意識到，REST API早晚會耗盡其效率。這就是GraphQL的用武之地，使用GraphQL而不是使用單獨的端點來訪問每一個資源。你可使用單個端點，該端點可以同時處理涉及多個數據源的複雜查詢。與REST模型相比，GraphQL是一個智能的我的助理，使用你指定的源地址，提供所需的內容。

GraphQL的實力也獲得了證實：2017年，它被Github，Spotify，Walmart等知名公司所採用。

4.Gatsby

若是你的預算比較緊張，可是同時又但願在你的項目中只使用高級技術，那麼你必定要嘗試 Gatsby。Gatsby 是 Kyle Matthews 爲靜態網站的建立而構建的新型解決方案。

它如何優於同行？與 Jekyll，Hugo 或 Hexo 等流行解決方案不一樣，這個靜態生成器不使用模板，而是信賴於 Webpack 和 React 組件（注意 React 官網自己也是在 Gatsby 的幫助下編寫的）。所以，你能夠得到自動更新和即時頁面轉換等優點。從1.0版本開始，Gatsby 使用了上面提到的 GraphQL。所以，在構建過程，它能夠從多個 GraphQL API 中得到數據，而後使用它們建立一個徹底靜態的 React 客戶端應用程序。如今，讓咱們從枯燥的特徵列表轉移到真正的問題，看看 Gatsby 是否適合你。

Web 開發者使用現成的引擎並不老是那麼容易。即便是最受歡迎的那些，好比 Joomla 或 Wordpress，也會以須要及時更新或安全性不足的形式給它們的用戶帶來麻煩（經驗豐富的黑客在攻擊你的網站上未更新的關鍵插件時會遇到些麻煩，這是爲了在之後的欺詐活動中使用它）。主題也是許多內容管理系統的弱點。相反，開發者更喜歡使用單獨的模塊，這些模塊能夠在未來根據本身的須要重寫。此外，CMS 在性能優化方面會限制其用戶（是的，最早進的，能夠更快的讓你建立網站的解決方案；然而，在多個用戶大量請求服務的狀況下，並不容易加快使用現成引擎所編寫的網站）。這就是爲何靜態網站在這些年變得如此流行。除了咱們上面描述的明顯的優點外，這種頁面有一個重要的缺點 —— 它的內容不容易被編輯。靜態網站生成器專門用於解決此問題，Gatsby 是其中最好的，感謝 GraphQL。咱們堅持認爲，任何在職的前端工程師在 2018 年至少都能掌握這個流行工具的基本知識。

5. Storybook

Storybook 是開發者在與 React 打交道過程當中一個有用的開源工具。特別是，得虧 StoryBook，你能夠在獨立的環境中設計和策劃應用程序外的 UI 組件，而且在建立新的 UI 組件時它會發生變化。若是這個功能對你來講並不過重要，那麼讓咱們考慮一下 Storybook 將幫助解決幾個嚴重問題的狀況。

今天，許多有用的工具支持簡單快速地建立功能性客戶端 - [服務器] 系統，包括最着名的 Meteor、Firebase、GraphQL 和 Falcor。全部這些工具使編程過程基礎化，應用程序可快速響應。雖然 React 及其熱門的重加載功能對於 UI 建立的開發者來講是一個很大的幫助，但設計階段仍然需大量的時間和編寫很多代碼行。

設想一下，你有一個待辦事項列表的組件。它擁有幾個狀態（一個空列表，一個部分填充的列表，列表中全部元素都被填充，列表中僅有一些元素被填充），咱們須要適配每一個元素的 UI。即便你能夠建立一個通用代碼來根據每一個狀態轉換應用程序界面，你仍然須要記錄它（不然對其餘團隊成員而言是很難理解的）。Storybook 如何在這裏提供幫助？

如前所述，React Storybook容許您在應用程序以外開發和測試UI組件，並容許團隊中的其餘開發人員繼續使用它們。 也就是說，有時會加速界面開發的過程。

2018年JS趨勢：總結

咱們很是但願咱們的名單可以引發您對來年最顯着的前端發展趨勢的關注。另外一方面，若是您已閱讀本參考資料，以爲對您有幫助，或者以爲樓主有哪裏不對的地方，歡迎加羣：866109386，你們一塊兒討論。