2020下半年前端技術發展趨勢,值得每個前端人關注!
2019年的大前端領域雖然並沒有出現什麼顛覆性技術,但是Flutter、WebAssembly、Serverless的火爆發展還是超乎我們預期,也讓我們進一步看到大前端的融合趨勢。
2020年下半年,大前端領域又有哪些你不能錯過的頂級技術趨勢呢? 今天就跟小編一起來看看吧~
01
Web元件化
所以基本上,這就是未來。
為什麼? 因為這些純Web元件與框架無關,並且可以在沒有框架或沒有任何框架拼寫標準化的情況下工作。 因為它們沒有JS疲勞,並且得到了現代瀏覽器的支援。
因為它們的檔大小和消耗將是最佳的,並且VDOM渲染令人讚歎。

這些元件提供了Custom Element,這是一個Javascript API,可讓你定義新html標籤,HTML範本以指定佈局,當然還有Shadow DOM,它本質上是特定於元件的。 在這個領域中知名的工具是Lit-html(和Lit-element),StencilJS,SvelteJS,當然還有Bit,它們是可重用的模組化元件,可以在任何地方直接共用,使用和開發。
考慮元件開發時代的未來,以及模組化,可重用性,封裝和標準化的原理,Web元件就是答案。
02
微前端
儘管前端開發享有元件的模組化優勢,但與後端微服務相比,它在很大程度上仍是單一的。

微前端帶來了前端體系結構拆分為不同前端的功能,供從事應用程式開發不同部分的不同團隊使用。
每個團隊都可以在其微前端的端到端生命週期中獲得自治權,可以獨立地開發,版本控制,測試,構建,渲染,更新和部署(例如使用Bit等工具)。

但是,當今的生態系統仍然存在某些缺點。
通常,人們會擔心諸如獨立的前端部署,捆綁,環境差異等問題。 Bit已經使您能夠隔離,版本化,構建,測試和更新各個前端/元件。 目前,這主要在使用多個應用程式時非常有用(儘管它已經普遍用於通過元件逐步重構現有應用程式的一部分)。
當Bit將在2020年推出部署功能時,獨立團隊將有權開發,編寫,版本化,部署和更新獨立前端。
你可以將UI應用程式組合在一起,並讓團隊使用獨立的連續部署和增量升級來創建簡單的解耦代碼庫。 這些前端的組合最終説明你創建應用程式。 這就是使用Bit編寫的應用的好處。

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

這是30秒的詳細說明,並附有視覺範例。 它包括我用偉大的藝術才華製作的非常令人印象深刻的圖紙,您可以將其複製粘貼到您的辦公室板上。
Atomic元件的優勢不只是通過模組化和可重用的元件來構建模組化UI應用程式。 這種範例迫使你思考組成每個元件的角色和API。
04
Web組裝
Web程式集將語言多樣性帶入Web開發中,以彌補JAVAScript創建的空白。 它被定義為"基於堆疊的虛擬機器的二進位指令格式。 Wasm被設計為可移植目標,用於編譯高級語言(如C/C++/Rust),從而可以在Web上為用戶端和伺服器應用程式進行部署。 ”
埃裡克·埃利奧特在他的文章中優雅地概述了該概念的好處:在wasm中實現對性能至關重要的內容,並將其像標準JAVAScript模組一樣導入。
一種新語言:WebAssembly代碼定義了以二進位格式表示的AST(抽象語法樹)。 您可以編寫和除錯文字格式,以便於閱讀。
對瀏覽器的改進:瀏覽器將理解二進位格式,這意味著我們將能夠編譯二進位捆綁包,壓縮後的二進制包小於我們今天使用的文本JavaScript。 較小的有效載荷意味著更快的傳遞。
根據編譯時的優化機會,WebAssembly的運行速度可能比JAVAScript快!
05
封裝樣式和Shadow Dom
元件的一個重要方面是封裝-能夠使標記結構,樣式和行為保持隱藏狀態,並與頁面上的其他代碼分開,以使不同部分不會衝突,並且代碼可以保持整潔。
Shadow DOM API是其中的關鍵部分,它提供了一種將隱藏的單獨DOM附加到元素的方法。

Shadow DOM實際上已經被瀏覽器使用了很長時間了。 您可以將影子DOM視為「DOM中的DOM」。。 它是自己的隔離DOM樹,具有自己的元素和樣式,與原始DOM完全隔離。
它允許將隱藏的DOM樹附加到常規DOM樹中的元素上。 該陰影DOM樹以影子根開頭,可以與普通DOM相同的方式附加到所需的任何元素上。 這樣做的主要目的是,我們不需要為類使用名稱空間,因為不存在名稱衝突或樣式溢出的風險。
這就是Web元件樣式進行真正封裝的解決方案。
06
TypeScript接管前端
最近的每次交談都聽起來好像TS正在接管前端開發。 據報導,有80%的開發人員承認他們想在下一個專案中使用或學習TypeScript。
儘管有缺點,但TS代碼更易於理解,實現更快,產生的錯誤更少。 想重構你的React應用程式並與TS一起使用嗎? 去吧。 想逐步開始嗎? 使用Bit之類的工具逐步將你的應用程式中的元件重構為TS,並使用React-Typescript編譯器獨立於應用程式構建它們。
07
從元件庫到動態集合
元件開發的出現催生出了一種工具的產生,它就是Bit,以及其託管平臺 Bit.dev。 使用Bit來連續隔離現有元件並將其匯出到動態可重用的共用集合中,而無需努力構建麻煩且高度耦合的元件庫。

使用Bit,你可以獨立隔離,版本控制,構建,測試和更新UI元件。 它簡化了在現有應用程式中隔離元件,將其收集到遠端集合並在任何地方使用的過程。
每個元件都可以在任何專案之外構建,測試和渲染。 你可以更新單個元件(及其相關元件),而不是整個應用程式。

在 bit.dev 平臺中(或在你自己的伺服器上),可以為不同的團隊遠端託管和組織元件,以便每個團隊都可以控制自己的元件開發。 每個團隊都可以共用和重用元件,但又保持其獨立性和控制力。
該平臺還提供了共用元件的多合一生態系統:
它自動記錄UI元件的文檔,在互動式中渲染元件,甚至提供內置註冊表以使用npm安裝元件。 此外,你可以在任何存儲庫中導入元件並進行修改。

在短期內,這以與Spotify/iTunes更改以前通過靜態CD音樂專輯共用音樂的過程類似的方式,徹底改變了共用和組成元件的過程。 這是一個動態的模組化解決方案,每個人都可以共用和使用元件。
為什麼說,從長遠來看,Bit有助於微前端的開發。 主要是因為它已經可以讓你獨立版本,測試,構建和更新UI應用程式的各個部分。
在2020年,它將引入獨立的部署,最終將允許不同的團隊,端到端的擁有應用程式的各個部分:保持分離和簡單的代碼庫,讓團隊謹慎,連續地構建和部署增量UI升級,以及共同組成前端。
08
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選項消除了為內容和行銷維護單獨堆疊的需要。
09
設計與開發的整合
隨著元件驅動設計系統的興起,使產品和團隊之間的UI一致,新工具應運而生,彌合了設計師和開發人員之間的鴻溝。

但是,這不是簡單的任務。 儘管代碼本身實際上是唯一的真理源(這是使用者真正得到的),但是大多數工具都試圖彌合設計者與設計者之間的鴻溝。 在此類別中,您可以找到成幀器,Figma,Invision DSM等。
在開發人員的末端,你可以看到 Bit.dev 之類的平臺如何託管下一代元件庫並説明建立共用元件的採用範圍。
該平臺為您的實際原始程式碼提供了呈現的可視化效果,以便設計人員可以與開發人員合作,並以可視化方式在原始程式碼本身上進行討論。
要注意的另一個有前途的想法是設計令牌。 將權杖放置在代碼中,設計人員可以透過它們直接與外部協作工具真正控制簡單的樣式方面(例如顏色)。 與 Bit.dev 等平臺集成后,可以創建比以往更緊密的工作流程。
想要更多前端的入門資源包? 又找不到靠譜的視頻教程,也可以留言跟我索取哦!