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

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

[[269562]]

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

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

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

1. 與框架無關(guān)的Web組件

[[269563]]

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

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

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

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

2. 框架沖突的未來?

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

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

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

令人震驚吧?

實(shí)際上，Vue和React在實(shí)際使用中很接近。

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

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

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

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

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

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

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

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

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

[[269565]]

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

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

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

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

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

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

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

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

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

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

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

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

8. 基于組件的設(shè)計(jì)工具

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

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

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

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