前端開發人員和技術人員的數量逐年增加，而整個生態系統渴望實現標準化。新技術和工具的出現已經改變了遊戲規則。可以肯定地說，總體趨勢將是UI標準化、基於組件的模塊化和組合，這將影響從樣式到測試甚至狀態管理的所有方面，並在總體上實現更好的模塊化。
JavaScript世界日新月異。
前端開發（和web開發）的世界正在以驚人的速度發展。今天，如果你沒有領先，或者不是Webpack、React Hooks、Jest、Vue和NG elements，你就會開始感覺到差距在擴大。但是，情況正在發生變化。
前端開發人員和技術人員的數量逐年增加，而整個生態系統渴望實現標準化。新技術和工具的出現已經改變了遊戲規則。
可以肯定地說，總體趨勢將是UI標準化、基於組件的模塊化和組合，這將影響從樣式到測試甚至狀態管理的所有方面，並在總體上實現更好的模塊化。這將包括圍繞Web組件、ES模塊、面向組件的樣式或狀態管理工具等構建的技術。
本文是我個人對未來幾年前端發展狀況的一種簡短而片面的觀察。當然，它遺漏了很多東西，所以請儘管在評論區發表你的見解。
框架無關的Web組件
基本上，這就是未來。爲什麼？因爲這些純Web組件與框架無關，可以在沒有框架的情況下工作，這意味着標準化。因爲它們不會帶來JS疲勞，並且受到現代瀏覽器的支持。因爲它們的包大小和資源消耗將是最優的，而且VDOM渲染令人興奮。
這些組件提供自定義元素、Javascript API（允許定義一種新的HTML標籤）、HTML模板（用於指定佈局），當然還有影子DOM（本質上是特定於組件的）。
在這個領域中，需要了解的主要工具包括Lit-html（和Lit-element）、StencilJS、SvelteJS，當然還有Bit，它們都是面向可重用的模塊化組件，而這些組件可以在任何地方直接共享、使用和開發。
當考慮UI開發的未來，以及組件時代的模塊化、重用性、封裝和標準化原則時，Web組件就是答案。
框架戰爭的未來？
所以我們不會深入探討“誰更好，爲什麼更好”，你可以下文中瞭解到關於這個問題的更多答案。相反，我們將後退一步，看看更大的圖景。圍繞組件的前端技術的總體“市場份額”正在不斷增長。新開發人員的加入速度也在快速增長，工具的採用空間也越來越大。
那麼，從現在開始的5年內，哪個框架會佔據統治地位呢？沒有人知道。但是，可以肯定地說，在原生JS生態系統中，這將是一個大有可爲的方面。在這個生態系統中，Web組件統治了DOM。React居NPM下載量之後。然而，看看這些數字。在實際的Web使用中，差距似乎非常小。
令人震驚的，對吧？
隨着未來與框架無關的Web組件的標準化，人們可能想知道它可能對UI框架戰爭產生什麼樣的影響。是的，我們知道，React不是一個框架……
組件隔離、重用和組合
當談到在不久的將來的前端開發和UI組件時，我們不可能忽視Bit令人驚喜的承諾和功能。
Bit（開源）隔離並將組件（或任何可重用的JS代碼）轉換爲共享的構建塊，你可以在所有項目和應用程序中使用和共享這些構建塊。神奇的是，你還可以使用Bit開發不同項目的相同組件，同時完全控制源代碼更改和整個依賴關係圖。
簡單地說，使用Bit，你可以立即在一個項目中使用來自另一個項目的組件，開發和更改來自兩個項目的組件，並同步更改。當作爲一個團隊工作時，這個工作流將通過bit.dev（Bit的組件中心）得到增強，你可以在其中組織和共享你的團隊代碼。
組件中心提供了組件共享和協作所需的一切，從出色的搜索和發現體驗到在線組件試用、完整的CI/CD支持等等。
使用Bit，你構建的應用程序可以完全實時地訪問你的團隊和開源社區編寫的所有組件，並立即共享新組件或建議對現有組件進行更新。
ES模塊和CDN
ES模塊是在瀏覽器中使用模塊的標準，由ECMAScript標準化。使用ES模塊可以很容易地將功能封裝到模塊中，這些模塊可以通過CDN等方式使用。隨着Firefox 60的發佈，所有主流瀏覽器都將支持ES模塊，Node團隊正在努力將ES模塊支持添加到Node.js中。另外，面向WebAssembly的ES模塊集成將在未來幾年實現。想象一下，利用Bit隔離的JS組件，依託bit.dev通過CDN使用。
組件級狀態管理
那麼，狀態管理有什麼新變化？最終，我們會遍歷Redux全球商店中的所有東西？
但是，這可能使充分利用組件的模塊化和可重用性變得困難。從這個角度來看，像MobX這樣的項目提供了一種有趣的、更具反應性的方法（也可以看下Unstated項目）。React的新Context API和Hooks意味着你不需要第三方庫，可以在功能組件級管理狀態，提高模塊性和可重用性。
因此，展望未來，嘗試更多地從封裝組件的角度來考慮狀態管理，而不是從全局應用程序存儲的角度來考慮。
可組合樣式化組件
所以在過去的兩年裏，有很多關於“樣式化組件（styling components）”的討論。從內聯CSS或CSS模塊到JS和樣式組件中的CSS，甚至還有像stylable這樣的讓步解決方案，選項很多。
在考慮未來幾年的樣式化時，我喜歡把樣式化當作一種組合。也就是說，我們的組件設計系統應該同時包含邏輯組件和主題組件，這些組件可以使用Bit之類的工具組合在一起。通過這種方式，你可以創建一個設計系統，根據需要進行演進和更改，而不會將一個繁瑣的庫強加給不願意採用它的開發人員。設計工具本身，比如Sketch an Figma，將利用組件來達到這個目的（將它們與Bit結合起來，就得到了最終的組件設計系統）。這非常令人興奮。
面向數據驅動應用的GraphQL API客戶端
因此，使用GraphQL通過組件爲客戶端提供了令人興奮的可能性。使用Apollo，你可以輕鬆構建通過GraphQL獲取數據的UI組件。結合Bit，你可以直接從正在使用組件的項目導入和開發這些組件。
通過對API的智能管理，可以簡化圍繞數據驅動應用開發的工作流，加快開發速度。所以，展望未來，這絕對是值得的。
基於組件的設計工具
隨着組件成爲我們的設計系統，設計人員和開發人員之間的鴻溝將被彌合。從設計人員和開發人員的角度來看，這都是可能的。
Sketch已經在設計組件之間創建了依賴關係鏈接，因此，你可以以模塊化的方式設計和更新設計。代碼組件的集成已經開始出現，這只是時間問題。Figma之類的工具是基於可重用的UI元素構建的。Framer團隊正在爲編寫代碼的設計人員構建一個工具，在一定程度上控制將UI元素轉換爲可重用的React組件。通過Bit，你可以將你設計的組件轉換爲可重用的構建塊，這些構建塊可以在任何地方被可視化地發現、使用甚至開發，從而彌合與開發人員之間的鴻溝。Bit +組件設計工具未來將產生很大的影響。通過CDN使用Bit和Web組件意味着全面的組合。
英文原文：https://hackernoon.com/7-frontend-javascript-trends-and-tools-you-should-know-for-2020-fb1476e41083
