2019年的大前端領(lǐng)域雖然并沒有出現(xiàn)什么顛覆性技術(shù)，但是Flutter、WebAssembly、Serverless的火爆發(fā)展還是超乎我們預(yù)期，也讓我們進(jìn)一步看到大前端的融合趨勢(shì)。

2020年下半年，大前端領(lǐng)域又有哪些你不能錯(cuò)過的頂級(jí)技術(shù)趨勢(shì)呢？今天就跟千鋒武漢Web前端培訓(xùn)小編一起來看看吧~

一、Web組件化

所以基本上，這就是未來。

為什么？因?yàn)檫@些純Web組件與框架無關(guān)，并且可以在沒有框架或沒有任何框架拼寫標(biāo)準(zhǔn)化的情況下工作。因?yàn)樗鼈儧]有JS疲勞，并且得到了現(xiàn)代瀏覽器的支持。

因?yàn)樗鼈兊奈募笮『拖膶⑹亲罴训?，并且VDOM渲染令人贊嘆。

這些組件提供了Custom Element，這是一個(gè)Javascript API，可讓你定義新html標(biāo)簽，HTML模板以指定布局，當(dāng)然還有Shadow DOM，它本質(zhì)上是特定于組件的。在這個(gè)領(lǐng)域中知名的工具是Lit-html（和Lit-element），StencilJS，SvelteJS，當(dāng)然還有Bit，它們是可重用的模塊化組件，可以在任何地方直接共享，使用和開發(fā)。

考慮組件開發(fā)時(shí)代的未來，以及模塊化，可重用性，封裝和標(biāo)準(zhǔn)化的原理，Web組件就是答案。

二、微前端

盡管前端開發(fā)享有組件的模塊化優(yōu)勢(shì)，但與后端微服務(wù)相比，它在很大程度上仍是單一的。

微前端帶來了前端體系結(jié)構(gòu)拆分為不同前端的功能，供從事應(yīng)用程序開發(fā)不同部分的不同團(tuán)隊(duì)使用。

每個(gè)團(tuán)隊(duì)都可以在其微前端的端到端生命周期中獲得自治權(quán)，可以獨(dú)立地開發(fā)，版本控制，測(cè)試，構(gòu)建，渲染，更新和部署（例如使用Bit等工具）。

但是，當(dāng)今的生態(tài)系統(tǒng)仍然存在某些缺點(diǎn)。

通常，人們會(huì)擔(dān)心諸如獨(dú)立的前端部署，捆綁，環(huán)境差異等問題。Bit已經(jīng)使您能夠隔離，版本化，構(gòu)建，測(cè)試和更新各個(gè)前端/組件。目前，這主要在使用多個(gè)應(yīng)用程序時(shí)非常有用（盡管它已經(jīng)普遍用于通過組件逐步重構(gòu)現(xiàn)有應(yīng)用程序的一部分）。

當(dāng)Bit將在2020年推出部署功能時(shí)，獨(dú)立團(tuán)隊(duì)將有權(quán)開發(fā)，編寫，版本化，部署和更新獨(dú)立前端。

你可以將UI應(yīng)用程序組合在一起，并讓團(tuán)隊(duì)使用獨(dú)立的連續(xù)部署和增量升級(jí)來創(chuàng)建簡單的解耦代碼庫。這些前端的組合最終幫助你創(chuàng)建應(yīng)用程序。這就是使用Bit編寫的應(yīng)用的好處。

三、微設(shè)計(jì)

布拉德·弗羅斯特（Brad Frost）提出的理論將Web應(yīng)用程序的構(gòu)成與原子，分子，有機(jī)體等的自然構(gòu)成進(jìn)行了比較，最后以具體的Web頁面作為結(jié)尾。

原子由分子組成（例如，文本輸入+按鈕+標(biāo)簽原子=搜索分子）。分子組成生物體。有機(jī)體位于布局模板中，該模板可以具體化為交付給用戶的頁面。

這是30秒的詳細(xì)說明，并附有視覺示例。它包括我用偉大的藝術(shù)才華制作的非常令人印象深刻的圖紙，您可以將其復(fù)制粘貼到您的辦公室板上。

Atomic組件的優(yōu)勢(shì)不只是通過模塊化和可重用的組件來構(gòu)建模塊化UI應(yīng)用程序。這種范例迫使你思考組成每個(gè)組件的角色和API。

四、Web組裝

Web程序集將語言多樣性帶入Web開發(fā)中，以彌補(bǔ)JavaScript創(chuàng)建的空白。它被定義為“基于堆棧的虛擬機(jī)的二進(jìn)制指令格式。Wasm被設(shè)計(jì)為可移植目標(biāo)，用于編譯高級(jí)語言（如C/C ++/Rust），從而可以在Web上為客戶端和服務(wù)器應(yīng)用程序進(jìn)行部署?！?/p>

埃里克·埃利奧特在他的文章中優(yōu)雅地概述了該概念的好處：在wasm中實(shí)現(xiàn)對(duì)性能至關(guān)重要的內(nèi)容，并將其像標(biāo)準(zhǔn)JavaScript模塊一樣導(dǎo)入。

一種新語言：WebAssembly代碼定義了以二進(jìn)制格式表示的AST（抽象語法樹）。您可以編寫和調(diào)試文本格式，以便于閱讀。

對(duì)瀏覽器的改進(jìn)：瀏覽器將理解二進(jìn)制格式，這意味著我們將能夠編譯二進(jìn)制捆綁包，壓縮后的二進(jìn)制包小于我們今天使用的文本JavaScript。較小的有效載荷意味著更快的傳遞。

根據(jù)編譯時(shí)的優(yōu)化機(jī)會(huì)，WebAssembly的運(yùn)行速度可能比JavaScript快！

五、封裝樣式和Shadow Dom

組件的一個(gè)重要方面是封裝-能夠使標(biāo)記結(jié)構(gòu)，樣式和行為保持隱藏狀態(tài)，并與頁面上的其他代碼分開，以使不同部分不會(huì)沖突，并且代碼可以保持整潔。

Shadow DOM API是其中的關(guān)鍵部分，它提供了一種將隱藏的單獨(dú)DOM附加到元素的方法。

Shadow DOM實(shí)際上已經(jīng)被瀏覽器使用了很長時(shí)間了。您可以將影子DOM視為“ DOM中的DOM”。它是自己的隔離DOM樹，具有自己的元素和樣式，與原始DOM完全隔離。

它允許將隱藏的DOM樹附加到常規(guī)DOM樹中的元素上。該陰影DOM樹以影子根開頭，可以與普通DOM相同的方式附加到所需的任何元素上。這樣做的主要目的是，我們不需要為類使用名稱空間，因?yàn)椴淮嬖诿Q沖突或樣式溢出的風(fēng)險(xiǎn)。

這就是Web組件樣式進(jìn)行真正封裝的解決方案。

六、TypeScript接管前端

最近的每次交談都聽起來好像TS正在接管前端開發(fā)。據(jù)報(bào)道，有80％的開發(fā)人員承認(rèn)他們想在下一個(gè)項(xiàng)目中使用或?qū)W習(xí)TypeScript。

盡管有缺點(diǎn)，但TS代碼更易于理解，實(shí)現(xiàn)更快，產(chǎn)生的錯(cuò)誤更少。想重構(gòu)你的React應(yīng)用程序并與TS一起使用嗎？去吧。想逐步開始嗎？使用Bit之類的工具逐步將你的應(yīng)用程序中的組件重構(gòu)為TS，并使用React-Typescript編譯器獨(dú)立于應(yīng)用程序構(gòu)建它們。

七、從組件庫到動(dòng)態(tài)集合

組件開發(fā)的出現(xiàn)催生出了一種工具的產(chǎn)生，它就是Bit，以及其托管平臺(tái)Bit.dev。使用Bit來連續(xù)隔離現(xiàn)有組件并將其導(dǎo)出到動(dòng)態(tài)可重用的共享集合中，而無需努力構(gòu)建麻煩且高度耦合的組件庫。

使用Bit，你可以獨(dú)立隔離，版本控制，構(gòu)建，測(cè)試和更新UI組件。它簡化了在現(xiàn)有應(yīng)用程序中隔離組件，將其收集到遠(yuǎn)程集合并在任何地方使用的過程。

每個(gè)組件都可以在任何項(xiàng)目之外構(gòu)建，測(cè)試和渲染。你可以更新單個(gè)組件（及其相關(guān)組件），而不是整個(gè)應(yīng)用程序。

在bit.dev平臺(tái)中（或在你自己的服務(wù)器上），可以為不同的團(tuán)隊(duì)遠(yuǎn)程托管和組織組件，以便每個(gè)團(tuán)隊(duì)都可以控制自己的組件開發(fā)。每個(gè)團(tuán)隊(duì)都可以共享和重用組件，但又保持其獨(dú)立性和控制力。

該平臺(tái)還提供了共享組件的多合一生態(tài)系統(tǒng)：

它自動(dòng)記錄UI組件的文檔，在交互式中渲染組件，甚至提供內(nèi)置注冊(cè)表以使用npm安裝組件。此外，你可以在任何存儲(chǔ)庫中導(dǎo)入組件并進(jìn)行修改。

在短期內(nèi)，這以與Spotify/iTunes更改以前通過靜態(tài)CD音樂專輯共享音樂的過程類似的方式，徹底改變了共享和組成組件的過程。這是一個(gè)動(dòng)態(tài)的模塊化解決方案，每個(gè)人都可以共享和使用組件。

為什么說，從長遠(yuǎn)來看，Bit有助于微前端的開發(fā)。主要是因?yàn)樗呀?jīng)可以讓你獨(dú)立版本，測(cè)試，構(gòu)建和更新UI應(yīng)用程序的各個(gè)部分。

在2020年，它將引入獨(dú)立的部署，最終將允許不同的團(tuán)隊(duì)，端到端的擁有應(yīng)用程序的各個(gè)部分：保持分離和簡單的代碼庫，讓團(tuán)隊(duì)謹(jǐn)慎，連續(xù)地構(gòu)建和部署增量UI升級(jí)，以及共同組成前端。

八、JAMStack

JAM是JavaScript、API和Markup的簡稱，前面第一個(gè)字母縮寫，而JAMstack是JavaScript、API和Markup構(gòu)建的技術(shù)堆棧，是一種基于客戶端JavaScript，可重用API和預(yù)構(gòu)建Markup的現(xiàn)代Web開發(fā)架構(gòu)。

需要符合下面三個(gè)標(biāo)準(zhǔn)：

1. JavaScript：請(qǐng)求/響應(yīng)周期中的任何動(dòng)態(tài)編程都由JavaScript處理，完全在客戶端上運(yùn)行。這可以是任何前端框架，庫，甚至是輕量JavaScript。

2. API：所有服務(wù)器端進(jìn)程或數(shù)據(jù)庫操作都被抽象為可重用的API，使用JavaScript通過HTTPS訪問。這些可以是定制的或利用第三方服務(wù)。

3. Markup：模板化標(biāo)記應(yīng)該在部署時(shí)預(yù)先構(gòu)建，通常使用內(nèi)容站點(diǎn)的站點(diǎn)生成器或Web應(yīng)用程序的構(gòu)建工具。

而JAMstack會(huì)流行的原因大致如下：

1. 更好的性能：為什么要在部署時(shí)生成頁面時(shí)等待頁面動(dòng)態(tài)構(gòu)建？當(dāng)談到最小化第一個(gè)字節(jié)的時(shí)間時(shí)，沒有什么能比通過CDN提供的預(yù)構(gòu)建文件更好。

2. 安全性更高：將服務(wù)器端進(jìn)程抽象為微服務(wù)API，可以減少攻擊的表面區(qū)域。您還可以利用專業(yè)第三方服務(wù)的專業(yè)知識(shí)。

3. 更便宜，更容易擴(kuò)展：當(dāng)您的部署相當(dāng)于可以在任何地方提供服務(wù)的一堆文件時(shí)，擴(kuò)展就是在更多地方提供這些文件的問題。CDN是完美的，通常包括擴(kuò)展他們的所有計(jì)劃。

4. 更好的開發(fā)者體驗(yàn)：松散耦合和控制分離允許更有針對(duì)性的開發(fā)和調(diào)試，并且為站點(diǎn)生成器擴(kuò)展選擇CMS選項(xiàng)消除了為內(nèi)容和營銷維護(hù)單獨(dú)堆棧的需要。

九、設(shè)計(jì)與開發(fā)的整合

隨著組件驅(qū)動(dòng)設(shè)計(jì)系統(tǒng)的興起，使產(chǎn)品和團(tuán)隊(duì)之間的UI一致，新工具應(yīng)運(yùn)而生，彌合了設(shè)計(jì)師和開發(fā)人員之間的鴻溝。

但是，這不是簡單的任務(wù)。盡管代碼本身實(shí)際上是唯一的真理源（這是用戶真正得到的），但是大多數(shù)工具都試圖彌合設(shè)計(jì)者與設(shè)計(jì)者之間的鴻溝。在此類別中，您可以找到成幀器，F(xiàn)igma，Invision DSM等。

在開發(fā)人員的末端，你可以看到Bit.dev之類的平臺(tái)如何托管下一代組件庫并幫助建立共享組件的采用范圍。

該平臺(tái)為您的實(shí)際源代碼提供了呈現(xiàn)的可視化效果，以便設(shè)計(jì)人員可以與開發(fā)人員合作，并以可視化方式在源代碼本身上進(jìn)行討論。

要注意的另一個(gè)有前途的想法是設(shè)計(jì)令牌。將令牌放置在代碼中，設(shè)計(jì)人員可以通過它們直接與外部協(xié)作工具真正控制簡單的樣式方面（例如顏色）。與Bit.dev等平臺(tái)集成后，可以創(chuàng)建比以往更緊密的工作流程。