JavaScript的世界正在快速發展。

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

[[269562]]

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

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

以下是對未來幾年前端開發的一些不完全預測，僅供參考。

1. 與框架無關的Web組件

[[269563]]

這大體上代表了未來。因為這些純web組件與框架無關，可以在沒有框架或任何框架拼寫標準化的情況下工作。因為不使用JS語言，并受到很多瀏覽器的支持。其bundle的大小和消耗也將是最優的，而且VDOM呈現震撼人心。

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

在這個領域中需要了解的主要工具是Lit-html， StencilJS，SvelteJS當然還有 Bit，用于可重用的可以在任何地方直接共享、使用和開發的模塊組件。

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

2. 框架沖突的未來?

現在，在NPM下載中React仍然是前端中的“女王”。

我們不會深入探討“哪個更好，為什么更好”，相反，如果退回一步的話，你會注意到更重要更宏大的部分。圍繞組件的前端技術的總體“市場份額”正在增長。新開發人員也在快速涌入，工具的使用空間也越來越大。

那么未來5年內哪個框架會成為支配呢?沒有人知道。但可以肯定地說，它將是在原生JS生態系統中發揮作用的適合位置，web組件在其中支配著文檔對象模型dom。React在NPM中下載量最高。然而——看看這些數字。似乎在實際web使用中差距非常小。

令人震驚吧?

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

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

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

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

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

Bit(開放源)分離并將組件(或任何可重用的JS代碼)轉換為共享的構建塊，可供在所有項目和應用中使用和共享。神奇的是——還可以使用Bit從不同項目開發相同組件，同時完全控制源代碼更改和整個依賴圖。

簡單地說，通過Bit可以立即在另一個項目中使用一個項目中的組件，并開發和同步更改這兩個組件。團隊工作時，這個工作流將通過Bit的組件中心 bit.dev 加強，可以在其中組織和共享團隊代碼。

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

通過Bit可以充分構建應用程序，即時獲得團隊和開源社區寫入的所有組件，并立即共享新組件或建議對現有組件進行更新。

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

[[269565]]

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。使用阿波羅可以輕松通過GraphQL構建獲取數據的用戶界面組件。結合Bit能從正在處理的項目中導入和開發這些組件。

通過對應用程序編程接口的智能管理，可以簡化圍繞數據驅動應用程序開發的工作流，加快開發速度。所以對未來幾年的展望絕對是值得的。

8. 基于組件的設計工具

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

Sketch已經在設計組件之間創建了依賴關系，因此可以模塊化的方式設計和更新。代碼組件的整合已經出現，這只是時間問題。

Figma這類的工具是徹底基于可重用的用戶界面元素構建的。Framer Team正在為編寫代碼的設計人員構建一個工具，能夠在一定程度上控制將用戶界面元素轉換為可重用的React組件。

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