不用框架也能構建 Web 應用

原文： blog.bitsrc.io/can-you-bui…

如今主流瀏覽器支持的 EcmaScript 功能愈來愈多了，那麼 Web 框架還有多大用途呢？這是個問題。回顧過去，Angular 1.x、Backbone、JQuery 等庫走馬燈同樣輪流登上舞臺，但 const、let、class 等許多新功能誕生後就一直沿用了下來，所以咱們應該將注意力放到規範中新出現的一些功能上。

Custom Elements v1+Shadow DOM v1

超過 87％的瀏覽器已經支持自定義元素

開發者可使用自定義元素建立本身的 HTML 標記，並把本身的組件邏輯和自包含樣式放進去，同時連一個庫都用不着。但光憑這些就足以取代 react 的組件系統嗎？咱們來看一下。

開始討論前的提示：使用 Bit 在應用程序之間共享和協做組件。把組件和它們的依賴項和設置封裝在一塊兒共享出去，從而構建真正的模塊化應用程序，更好地複用代碼，簡化維護工做並下降開銷。

定義一個新元素

只需 2 行代碼便可定義一個新的自定義元素：

定義一個名爲「hello-world」的元素

要使用這個元素時，咱們使用組件便可，就把它當成一個普通的 HTML 組件對待就好了：

添加 HTML 和 CSS

如今咱們須要定義屏幕上顯示的內容。假設咱們但願標題內容寫着「hello world from」，後面跟着用戶指定的名稱。正好能夠用 Shadow DOM 將 CSS 樣式限定到單個自定義元素，這樣咱們就能輕鬆構建自包含組件，以後這些組件能夠運行在 vanilla js、React、Angular 或 Vue 中。如下代碼偵聽「name」的屬性更改並根據 name 更新視圖。

這樣咱們就能夠限定樣式，並構建可在運行時更改，視圖也隨之更新的響應式應用程序。它在性能方面的表現也至關不錯，由於只有 span 會更新，而其餘組件都保持不變。但如你所見，咱們須要手動操做 DOM，而且它不像 react 那樣是聲明性的，後者中的呈現函數直接包含變量而用不着包含佔位符元素（

替代 $ {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 並將如下定義添加到代碼中，就可使用很酷的手繪進度條了：