2020下半年前端技術發展趨勢，值得每個前端人關注

2019年的大前端領域雖然並沒有出現什麼顛覆性技術，但是Flutter、WebAssembly、Serverless的火爆發展還是超乎我們預期，也讓我們進一步看到大前端的融合趨勢。2020年下半年，大前端領域又有哪些你不能錯過的頂級技術趨勢呢？

1、Web元件化

基本上這就是未來。為什麼？因為這些純Web元件與框架無關，並且可以在沒有框架或沒有任何框架拼寫標準化的情況下工作。因為它們沒有JS疲勞，並且得到了現代瀏覽器的支援。因為它們的檔案大小和消耗將是最佳的，並且VDOM渲染令人讚歎。

這些元件提供了Custom Element，這是一個Javascript API，可讓你定義新html標籤，HTML模板以指定佈局，當然還有Shadow DOM，它本質上是特定於元件的。在這個領域中知名的工具是Lit-html（和Lit-element），StencilJS，SvelteJS，當然還有Bit，它們是可重用的模組化元件，可以在任何地方直接共享，使用和開發。考慮元件開發時代的未來，以及模組化，可重用性，封裝和標準化的原理，Web元件就是答案。

2、微前端

儘管前端開發享有元件的模組化優勢，但與後端微服務相比，它在很大程度上仍是單一的。微前端帶來了前端體系結構拆分為不同前端的功能，供從事應用程式開發不同部分的不同團隊使用。每個團隊都可以在其微前端的端到端生命週期中獲得自治權，可以獨立地開發，版本控制，測試，構建，渲染，更新和部署（例如使用Bit等工具）。但是，當今的生態系統仍然存在某些缺點。

通常，人們會擔心諸如獨立的前端部署，捆綁，環境差異等問題。Bit已經使您能夠隔離，版本化，構建，測試和更新各個前端/元件。目前，這主要在使用多個應用程式時非常有用（儘管它已經普遍用於透過元件逐步重構現有應用程式的一部分）。當Bit將在2020年推出部署功能時，獨立團隊將有權開發，編寫，版本化，部署和更新獨立前端。

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

3、微設計

布拉德·弗羅斯特（Brad Frost）提出的理論將Web應用程式的構成與原子，分子，有機體等的自然構成進行了比較，最後以具體的Web頁面作為結尾。原子由分子組成（例如，文字輸入+按鈕+標籤原子=搜尋分子）。分子組成生物體。有機體位於佈局模板中，該模板可以具體化為交付給使用者的頁面。

這是30秒的詳細說明，並附有視覺示例。它包括我用偉大的藝術才華製作的非常令人印象深刻的圖紙，您可以將其複製貼上到您的辦公室板上。Atomic元件的優勢不只是透過模組化和可重用的元件來構建模組化UI應用程式。這種範例迫使你思考組成每個元件的角色和API。

4、Web組裝

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

埃裡克·埃利奧特在他的文章中優雅地概述了該概念的好處：在wasm中實現對效能至關重要的內容，並將其像標準JavaScript模組一樣匯入。一種新語言：WebAssembly程式碼定義了以二進位制格式表示的AST（抽象語法樹）。您可以編寫和除錯文字格式，以便於閱讀。對瀏覽器的改進：瀏覽器將理解二進位制格式，這意味著我們將能夠編譯二進位制捆綁包，壓縮後的二進位制包小於我們今天使用的文字JavaScript。較小的有效載荷意味著更快的傳遞。根據編譯時的最佳化機會，WebAssembly的執行速度可能比JavaScript快！

5、封裝樣式和Shadow Dom

元件的一個重要方面是封裝-能夠使標記結構，樣式和行為保持隱藏狀態，並與頁面上的其他程式碼分開，以使不同部分不會衝突，並且程式碼可以保持整潔。Shadow DOM API是其中的關鍵部分，它提供了一種將隱藏的單獨DOM附加到元素的方法。Shadow DOM實際上已經被瀏覽器使用了很長時間了。您可以將影子DOM視為“ DOM中的DOM”。它是自己的隔離DOM樹，具有自己的元素和樣式，與原始DOM完全隔離。

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

6、TypeScript接管前端

最近的每次交談都聽起來好像TS正在接管前端開發。據報導，有80％的開發人員承認他們想在下一個專案中使用或學習TypeScript。儘管有缺點，但TS程式碼更易於理解，實現更快，產生的錯誤更少。想重構你的React應用程式並與TS一起使用嗎？去吧。想逐步開始嗎？使用Bit之類的工具逐步將你的應用程式中的元件重構為TS，並使用React-Typescript編譯器獨立於應用程式構建它們。

7、從元件庫到動態集合

元件開發的出現催生出了一種工具的產生，它就是Bit，以及其託管平臺Bit.dev。使用Bit來連續隔離現有元件並將其匯出到動態可重用的共享集合中，而無需努力構建麻煩且高度耦合的元件庫。使用Bit，你可以獨立隔離，版本控制，構建，測試和更新UI元件。它簡化了在現有應用程式中隔離元件，將其收集到遠端集合並在任何地方使用的過程。

每個元件都可以在任何專案之外構建，測試和渲染。你可以更新單個元件（及其相關元件），而不是整個應用程式。在bit.dev平臺中（或在你自己的伺服器上），可以為不同的團隊遠端託管和組織元件，以便每個團隊都可以控制自己的元件開發。每個團隊都可以共享和重用元件，但又保持其獨立性和控制力。

該平臺還提供了共享元件的多合一生態系統：它自動記錄UI元件的文件，在互動式中渲染元件，甚至提供內建登錄檔以使用npm安裝元件。此外，你可以在任何儲存庫中匯入元件並進行修改。在短期內，這以與Spotify/iTunes更改以前透過靜態CD音樂專輯共享音樂的過程類似的方式，徹底改變了共享和組成元件的過程。這是一個動態的模組化解決方案，每個人都可以共享和使用元件。

為什麼說，從長遠來看，Bit有助於微前端的開發。主要是因為它已經可以讓你獨立版本，測試，構建和更新UI應用程式的各個部分。在2020年，它將引入獨立的部署，最終將允許不同的團隊，端到端的擁有應用程式的各個部分：保持分離和簡單的程式碼庫，讓團隊謹慎，連續地構建和部署增量UI升級，以及共同組成前端。

8、JAMStack

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

9、設計與開發的整合

隨著元件驅動設計系統的興起，使產品和團隊之間的UI一致，新工具應運而生，彌合了設計師和開發人員之間的鴻溝。但是，這不是簡單的任務。儘管程式碼本身實際上是唯一的真理源（這是使用者真正得到的），但是大多數工具都試圖彌合設計者與設計者之間的鴻溝。在此類別中，您可以找到成幀器，Figma，Invision DSM等。在開發人員的末端，你可以看到Bit.dev之類的平臺如何託管下一代元件庫並幫助建立共享元件的採用範圍。

該平臺為您的實際原始碼提供了呈現的視覺化效果，以便設計人員可以與開發人員合作，並以視覺化方式在原始碼本身上進行討論。要注意的另一個有前途的想法是設計令牌。將令牌放置在程式碼中，設計人員可以透過它們直接與外部協作工具真正控制簡單的樣式方面（例如顏色）。與Bit.dev等平臺整合後，可以建立比以往更緊密的工作流程。

如果你想要拿到高薪，最可靠的方式就是靠自己的努力，夢想如果只想就會成為夢。作為IT教育全產業鏈人才服務平臺，千鋒教育長沙校區一直專注於IT人才服務，有效指引了一批批學員的前行道路，讓他們少走了很多彎路，其中不乏一部分人實現了“彎道超車”，提前實現了職場晉升。感興趣的同學可以直接來嶽麓區麓谷企業廣場A2棟3單元3樓上門參觀試聽諮詢。