JavaScript的世界正在快速發(fā)展。

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

[[269562]]

盡管開發(fā)人員和技術人員在前端領域中的數(shù)量逐年上升，生態(tài)系統(tǒng)卻有標準化的趨勢。新技術和工具的出現(xiàn)正在改變當下的規(guī)則。

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

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

1. 與框架無關的Web組件

[[269563]]

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

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

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

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

2. 框架沖突的未來?

現(xiàn)在，在NPM下載中React仍然是前端中的“女王”。

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

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

令人震驚吧?

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

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

3. 組件分離，重用和構(gòu)成

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

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

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

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

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

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

4. ES模塊和內(nèi)容分發(fā)網(wǎng)絡

[[269565]]

ES模塊是在瀏覽器中用模塊工作的標準，被ECMAScript標準化。使用ES模塊可以很容易地將功能封裝進模塊中，可以通過內(nèi)容分發(fā)網(wǎng)絡等方式使用。隨著Firefox 60的發(fā)布，所有主流的瀏覽器都將支持ES模塊，Node mteam正致力將ES模塊支持添加到Node.js中。另外，用于WebAssembly的ES模塊整合將在未來幾年內(nèi)實現(xiàn)。想象一下，JS組件與Bit分離，并通過 bit.dev內(nèi)容分發(fā)網(wǎng)絡使用。

5. 組件級別的狀態(tài)管理

那么狀態(tài)管理有什么新變化呢?我們只需要在Redux中就能管理一切事務嗎?

但這可能很難實現(xiàn)充分利用組件，使模塊得到重用。React新的Context API 和 Hooks意味著不需要第三方庫，便可以在功能組件級別管理狀態(tài)，從而提高模塊度和可重用性。

因此，展望未來，我們可以嘗試更多地從封裝組件而較少從全球應用商店的角度來考慮狀態(tài)管理。

6. 構(gòu)成樣式化組件

Bit模塊:由獨立邏輯和主題組件構(gòu)成樣式

過去兩年有很多關于樣式化組件的討論。從內(nèi)聯(lián)層疊樣式表或?qū)盈B樣式表模塊到JS中的層疊樣式表和樣式組件，甚至像stylable這樣的中途解決方案，有很多解決方案。

未來幾年，樣式可以作為一種構(gòu)成。這意味著，組件設計體系應該同時包含邏輯組件和主題組件，可以使用Bit之類的工具構(gòu)成。通過這種方式可以創(chuàng)建一個設計體系，根據(jù)需要進行發(fā)展和改變，不會將一個復雜的庫強加給不愿意去應用的開發(fā)人員。設計工具本身如Sketch an Figma，利用will組件來達到這個目的(結(jié)合Bi得到最終的組件設計體系。

7. 用于數(shù)據(jù)驅(qū)動應用程序的GraphQL應用程序編程接口客戶端

令人興奮的是，在客戶端有很大的可能性來通過組件使用GraphQL。使用阿波羅可以輕松通過GraphQL構(gòu)建獲取數(shù)據(jù)的用戶界面組件。結(jié)合Bit能從正在處理的項目中導入和開發(fā)這些組件。

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

8. 基于組件的設計工具

隨著組件變?yōu)榱嗽O計體系，設計師和開發(fā)人員雙方都在向彼此靠近。也就是從雙方來看，這是可能的。

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

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

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