2019年的大前端領域雖然并沒有出現什么顛覆性技術，但是Flutter、WebAssembly、Serverless的火爆發展還是超乎我們預期，也讓我們進一步看到大前端的融合趨勢。

2020年下半年，大前端領域又有哪些你不能錯過的頂級技術趨勢呢？今天就跟千鋒武漢Web前端培訓小編一起來看看吧~

一、Web組件化

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

為什么？因為這些純Web組件與框架無關，并且可以在沒有框架或沒有任何框架拼寫標準化的情況下工作。因為它們沒有JS疲勞，并且得到了現代瀏覽器的支持。

因為它們的文件大小和消耗將是最佳的，并且VDOM渲染令人贊嘆。

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

考慮組件開發時代的未來，以及模塊化，可重用性，封裝和標準化的原理，Web組件就是答案。

二、微前端

盡管前端開發享有組件的模塊化優勢，但與后端微服務相比，它在很大程度上仍是單一的。

微前端帶來了前端體系結構拆分為不同前端的功能，供從事應用程序開發不同部分的不同團隊使用。

每個團隊都可以在其微前端的端到端生命周期中獲得自治權，可以獨立地開發，版本控制，測試，構建，渲染，更新和部署（例如使用Bit等工具）。

但是，當今的生態系統仍然存在某些缺點。

通常，人們會擔心諸如獨立的前端部署，捆綁，環境差異等問題。Bit已經使您能夠隔離，版本化，構建，測試和更新各個前端/組件。目前，這主要在使用多個應用程序時非常有用（盡管它已經普遍用于通過組件逐步重構現有應用程序的一部分）。

當Bit將在2020年推出部署功能時，獨立團隊將有權開發，編寫，版本化，部署和更新獨立前端。

你可以將UI應用程序組合在一起，并讓團隊使用獨立的連續部署和增量升級來創建簡單的解耦代碼庫。這些前端的組合最終幫助你創建應用程序。這就是使用Bit編寫的應用的好處。

三、微設計

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

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

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

Atomic組件的優勢不只是通過模塊化和可重用的組件來構建模塊化UI應用程序。這種范例迫使你思考組成每個組件的角色和API。

四、Web組裝

Web程序集將語言多樣性帶入Web開發中，以彌補JavaScript創建的空白。它被定義為“基于堆棧的虛擬機的二進制指令格式。Wasm被設計為可移植目標，用于編譯高級語言（如C/C ++/Rust），從而可以在Web上為客戶端和服務器應用程序進行部署。”

埃里克·埃利奧特在他的文章中優雅地概述了該概念的好處：在wasm中實現對性能至關重要的內容，并將其像標準JavaScript模塊一樣導入。

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

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

根據編譯時的優化機會，WebAssembly的運行速度可能比JavaScript快！

五、封裝樣式和Shadow Dom

組件的一個重要方面是封裝-能夠使標記結構，樣式和行為保持隱藏狀態，并與頁面上的其他代碼分開，以使不同部分不會沖突，并且代碼可以保持整潔。

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

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

它允許將隱藏的DOM樹附加到常規DOM樹中的元素上。該陰影DOM樹以影子根開頭，可以與普通DOM相同的方式附加到所需的任何元素上。這樣做的主要目的是，我們不需要為類使用名稱空間，因為不存在名稱沖突或樣式溢出的風險。

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

六、TypeScript接管前端

最近的每次交談都聽起來好像TS正在接管前端開發。據報道，有80％的開發人員承認他們想在下一個項目中使用或學習TypeScript。

盡管有缺點，但TS代碼更易于理解，實現更快，產生的錯誤更少。想重構你的React應用程序并與TS一起使用嗎？去吧。想逐步開始嗎？使用Bit之類的工具逐步將你的應用程序中的組件重構為TS，并使用React-Typescript編譯器獨立于應用程序構建它們。

七、從組件庫到動態集合

組件開發的出現催生出了一種工具的產生，它就是Bit，以及其托管平臺Bit.dev。使用Bit來連續隔離現有組件并將其導出到動態可重用的共享集合中，而無需努力構建麻煩且高度耦合的組件庫。

使用Bit，你可以獨立隔離，版本控制，構建，測試和更新UI組件。它簡化了在現有應用程序中隔離組件，將其收集到遠程集合并在任何地方使用的過程。

每個組件都可以在任何項目之外構建，測試和渲染。你可以更新單個組件（及其相關組件），而不是整個應用程序。

在bit.dev平臺中（或在你自己的服務器上），可以為不同的團隊遠程托管和組織組件，以便每個團隊都可以控制自己的組件開發。每個團隊都可以共享和重用組件，但又保持其獨立性和控制力。

該平臺還提供了共享組件的多合一生態系統：

它自動記錄UI組件的文檔，在交互式中渲染組件，甚至提供內置注冊表以使用npm安裝組件。此外，你可以在任何存儲庫中導入組件并進行修改。

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

為什么說，從長遠來看，Bit有助于微前端的開發。主要是因為它已經可以讓你獨立版本，測試，構建和更新UI應用程序的各個部分。

在2020年，它將引入獨立的部署，最終將允許不同的團隊，端到端的擁有應用程序的各個部分：保持分離和簡單的代碼庫，讓團隊謹慎，連續地構建和部署增量UI升級，以及共同組成前端。

八、JAMStack

JAM是JavaScript、API和Markup的簡稱，前面第一個字母縮寫，而JAMstack是JavaScript、API和Markup構建的技術堆棧，是一種基于客戶端JavaScript，可重用API和預構建Markup的現代Web開發架構。

需要符合下面三個標準：

1. JavaScript：請求/響應周期中的任何動態編程都由JavaScript處理，完全在客戶端上運行。這可以是任何前端框架，庫，甚至是輕量JavaScript。

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

3. Markup：模板化標記應該在部署時預先構建，通常使用內容站點的站點生成器或Web應用程序的構建工具。

而JAMstack會流行的原因大致如下：

1. 更好的性能：為什么要在部署時生成頁面時等待頁面動態構建？當談到最小化第一個字節的時間時，沒有什么能比通過CDN提供的預構建文件更好。

2. 安全性更高：將服務器端進程抽象為微服務API，可以減少攻擊的表面區域。您還可以利用專業第三方服務的專業知識。

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

4. 更好的開發者體驗：松散耦合和控制分離允許更有針對性的開發和調試，并且為站點生成器擴展選擇CMS選項消除了為內容和營銷維護單獨堆棧的需要。

九、設計與開發的整合

隨著組件驅動設計系統的興起，使產品和團隊之間的UI一致，新工具應運而生，彌合了設計師和開發人員之間的鴻溝。

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

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

該平臺為您的實際源代碼提供了呈現的可視化效果，以便設計人員可以與開發人員合作，并以可視化方式在源代碼本身上進行討論。

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