八大前端JavaScript趨勢和工具

JavaScript的世界正在快速發展。

前端開發(和網絡開發)的世界正在以極快的速度發展。現在，若是不借助前端或Webpack、React Hooks、Jest、Vue和NG元素，你會很快被遠遠拋下。不過，狀況正在發生改變。

儘管開發人員和技術人員在前端領域中的數量逐年上升，生態系統卻有標準化的趨勢。新技術和工具的出現正在改變當下的規則。

整體趨勢確定會是一種基於組件構成的用戶界面標準化，會影響從樣式到測試甚至狀態管理的全部方面，而且整體具備更好的模塊度。這將包括圍繞web組件、ES模塊、組件焦點工具等技術構建。

如下是對將來幾年前端開發的一些不徹底預測，僅供參考。

1. 與框架無關的Web組件

這大致上表明了將來。由於這些純web組件與框架無關，能夠在沒有框架或任何框架拼寫標準化的狀況下工做。由於不使用JS語言，並受到不少瀏覽器的支持。其bundle的大小和消耗也將是最優的，並且VDOM呈現震撼人心。

這些組件提供自定義元素，這是一個容許定義新的html標籤的Javascript應用程序編程接口，用於指定佈局的HTML模板，固然還有本質上特定於組件的影子DOM。

在這個領域中須要瞭解的主要工具是Lit-html（https://github.com/Polymer/lit-html）  (和Lit-element，https://lit-element.polymer-project.org/)， StencilJS（https://github.com/ionic-team/stencil）,

SvelteJS（https://github.com/sveltejs/svelte） 固然還有 Bit（https://bit.dev/），用於可重用的能夠在任何地方直接共享、使用和開發的模塊組件。

當考慮到用戶界面開發的將來，以及組件時代中模塊度、可重用性、封裝性和標準化的原則時，web組件就是答案。

2. 框架衝突的將來?

如今，在NPM下載中React仍然是前端中的「女王」）

咱們不會深刻探討「哪一個更好，爲何更好」，相反，若是退回一步的話，你會注意到更重要更宏大的部分。圍繞組件的前端技術的整體「市場份額」正在增加。新開發人員也在快速涌入，工具的使用空間也愈來愈大。

那麼將來5年內哪一個框架會成爲支配呢?沒有人知道。但能夠確定地說，它將是在原生JS生態系統中發揮做用的最佳位置，web組件在其中支配着文檔對象模型dom。React在NPM中下載量最高。然而——看看這些數字。彷佛在實際web使用中差距很是小。

使人震驚吧?

實際上，Vue和React在實際使用中很接近

隨着將來與框架無關的web組件的標準化，很多人都想知道可能會對用戶界面框架衝突產生的影響。事實上，咱們都知道React確實不是一個框架。

3. 組件分離，重用和構成

heBit組件：將來的代碼共享、重用和開發

當談到在不久的未來的前端開發和用戶界面組件時，不可能忽視 Bit驚人的promise功能。

Bit（開放源）（https://github.com/teambit/bit）分離並將組件(或任何可重用的JS代碼)轉換爲共享的構建塊，可供在全部項目和應用中使用和共享。神奇的是——還可使用Bit從不一樣項目開發相同組件，同時徹底控制源代碼更改和整個依賴圖。

簡單地說，經過Bit能夠當即在另外一個項目中使用一個項目中的組件，並開發和同步更改這兩個組件。團隊工做時，這個工做流將經過Bit的組件中心 bit.dev 增強，能夠在其中組織和共享團隊代碼。

組件中心提供了在組件上共享和協做所需的一切，從漂亮的搜索和發現體驗到實時組件playground，持續集成和持續交付的充分支持等。

經過Bit能夠充分構建應用程序，即時得到團隊和開源社區寫入的全部組件，並當即共享新組件或建議對現有組件進行更新。

GitHub庫地址:https://github.com/teambit/bit

4. ES模塊和內容分發網絡

ES模塊是在瀏覽器中用模塊工做的標準，被ECMAScript標準化。使用ES模塊能夠很容易地將功能封裝進模塊中，能夠經過內容分發網絡等方式使用。隨着Firefox 60的發佈，全部主流的瀏覽器都將支持ES模塊，Node mteam正致力將ES模塊支持添加到Node.js中。另外，用於WebAssembly的ES模塊整合將在將來幾年內實現。想象一下，JS組件與Bit分離，並經過 bit.dev內容分發網絡使用。

5. 組件級別的狀態管理

那麼狀態管理有什麼新變化呢?咱們只須要在Redux中就能管理一切事務嗎?

但這可能很難實現充分利用組件，使模塊獲得重用。React新的Context API 和 Hooks意味着不須要第三方庫，即可以在功能組件級別管理狀態，從而提升模塊度和可重用性。

所以，展望將來，咱們能夠嘗試更多地從封裝組件而較少從全球應用商店的角度來考慮狀態管理。

6. 構成樣式化組件

Bit模塊:由獨立邏輯和主題組件構成樣式

過去兩年有不少關於樣式化組件的討論。從內聯層疊樣式表或層疊樣式表模塊到JS中的層疊樣式表和樣式組件，甚至像stylable這樣的中途解決方案，有不少解決方案。

將來幾年，樣式能夠做爲一種構成。這意味着，組件設計體系應該同時包含邏輯組件和主題組件，可使用Bit之類的工具構成。經過這種方式能夠建立一個設計體系，根據須要進行發展和改變，不會將一個複雜的庫強加給不肯意去應用的開發人員。設計工具自己如Sketch an Figma，利用will組件來達到這個目的(結合Bi獲得最終的組件設計體系。

7. 用於數據驅動應用程序的GraphQL應用程序編程接口客戶端

使人興奮的是，在客戶端有很大的可能性來經過組件使用GraphQL。使用阿波羅（https://github.com/apollographql/apollo-client）能夠輕鬆經過GraphQL構建獲取數據的用戶界面組件。結合Bit能從正在處理的項目中導入和開發這些組件。

經過對應用程序編程接口的智能管理，能夠簡化圍繞數據驅動應用程序開發的工做流，加快開發速度。因此對將來幾年的展望絕對是值得的。

8. 基於組件的設計工具

隨着組件變爲了設計體系，設計師和開發人員雙方都在向彼此靠近。也就是從雙方來看，這是可能的。

Sketch（https://medium.com/@sketchapp）已經在設計組件之間建立了依賴關係，所以能夠模塊化的方式設計和更新。代碼組件的整合（https://github.com/airbnb/react-sketchapp）已經出現，這只是時間問題。

Figma這類的工具是完全基於可重用的用戶界面元素構建的。Framer Team（https://medium.com/@framerteam）正在爲編寫代碼的設計人員構建一個工具，可以在必定程度上控制將用戶界面元素轉換爲可重用的React組件。

經過Bit能夠將設計的組件轉換爲可重用的構建塊，並能夠在任何地方直觀發現、使用甚至開發，從而彌補與開發人員之間的差距。Bit +組件設計工具將來大有可爲。經過內容分發網絡使用Bit和web組件是個完整的構成。

 

來源商業新知網，原標題：不徹底預測：八大前端JavaScript趨勢和工具