現在主流瀏覽器支持的EcmaScript功能越來越多了，那麼Web框架還有多大用途呢？這是個問題。回顧過去，Angular 1.x、Backbone、JQuery等庫走馬燈一樣輪流登上舞臺，但const、let、class等許多新功能誕生後就一直沿用了下來，因此我們應該將注意力放到規範中新出現的一些功能上。
Custom Elements v1+Shadow DOM v1
開發者可以使用自定義元素創建自己的HTML標記，並把自己的組件邏輯和自包含樣式放進去，同時連一個庫都用不着。但光憑這些就足以取代react的組件系統嗎？我們來看一下。
開始討論前的提示：使用Bit在應用程序之間共享和協作組件。把組件和它們的依賴項和設置封裝在一起共享出去，從而構建真正的模塊化應用程序，更好地複用代碼，簡化維護工作並降低開銷。
定義一個新元素
只需2行代碼即可定義一個新的自定義元素：
定義一個名爲“hello-world”的元素
要使用這個元素時，我們使用<hello-world>組件即可，就把它當成一個普通的HTML組件對待就行了：
添加HTML和CSS
現在我們需要定義屏幕上顯示的內容。假設我們希望標題內容寫着“hello world from”，後面跟着用戶指定的名稱。正好可以用Shadow DOM將CSS樣式限定到單個自定義元素，這樣我們就能輕鬆構建自包含組件，之後這些組件可以運行在vanilla js、React、Angular或Vue中。以下代碼偵聽“name”的屬性更改並根據name更新視圖。
這樣我們就可以限定樣式，並構建可在運行時更改，視圖也隨之更新的響應式應用程序。它在性能方面的表現也相當不錯，因爲只有span會更新，而其他組件都保持不變。但如你所見，我們需要手動操作DOM，並且它不像react那樣是聲明性的，後者中的呈現函數直接包含變量而用不着包含佔位符元素（<div id =“name”>替代$ {name} ）。
使用這種方法來更新DOM上的數據可能看起來不像React DOM那樣方便，後者可以計算哪些元素需要更新，用不着你來更改這些元素的innerHTML/innerTEXT，但這樣也會增大開銷。在你的應用程序中添加React DOM需要100KB的JS代碼。
看起來可能也不多，但用戶使用3g網絡時等待時間會增加差不多0.7秒，而在網絡上時間的確就是金錢。60％的網站用戶會在加載時間超過3秒時直接走人，其中80％的用戶再也不會回來了。
能不用框架構建複雜的Web應用嗎？
簡單來說答案是肯定的。有很多網站是不用任何框架構建的，其中GitHub和YouTube可能是最出名的兩家。
深入探討的話，答案可能比你想象的要複雜得多。正如前文探討的一樣，不用任何框架也能很容易地編寫自定義的可複用組件。但是Web應用程序有的不只是組件，還經常會有：
-
狀態管理
-
路由
-
主題
這些不用框架也能做嗎？我今天可以告訴你答案是肯定的。那麼可維護性、可靠性和效率指標表現如何呢？ 我們已經知道使用自定義元素和Shadow DOM可以很好地編寫可複用的組件，但其他情況又該怎麼辦？可以看看其他文章，瞭解怎樣在不學習/使用任何框架的情況下編寫Web應用。
邁向正確方向的一步
如前所述，Web組件與框架無關，這意味着它們可以在任何應用程序中使用，不管是vanilla JS、React還是Angular都沒問題。如果你正在構建一組可複用的組件，並且你想與其他人共享，或者你正在爲新的應用程序項目尋找組件，請查看bit.dev。
使用自定義組件非常容易；只需選中你要使用的那個，運行組件頁面上顯示的npm install，然後導入它即可。例如，運行npm i @bit/wiredjs.wired-elements.wired-progress並將以下定義添加到代碼中，就可以使用很酷的手繪進度條了：
圖片來源：https://bit.dev/wiredjs/wired-elements/wired-progress
英文原文：https://blog.bitsrc.io/can-you-build-web-apps-in-2019-without-a-framework-1065ad82b79f