和網頁設計一樣， 網頁開發的技術發展也是非常快的。 日新月異的前端工具賦予了前端越來越強大的開發能力和效率， 甚至改變網站建設的方式。 而VirtualDOM 就是諸多改變前端開發的工具之一。
DOM（文檔物件模型）是定義網站結構的樹狀模型， 選擇和遍歷DOM可能是一個成本極為高昂的操作， 甚至會直接影像網站的性能。 當然， 關於DOM如何工作並不在今天的文章探討的範圍以內， 今天的文章更多的是推薦一些幫你更好實現VirtualDOM的庫和工具。
MaquetteJS
這是VirtualDOM的一種實現， 你可以借助 MaquetteJS 創建流暢的使用者介面， 並且隨時更新相關的資料。 這是一個由純粹JS編寫的庫， 它可以和注入 CoffeeScript、TypeScritp 和 JSX之類的合成語音一起使用。 它僅有3kb， 是React.js 的不錯的替代品。
ReDOM
這是我最喜歡的 VirtualDOM庫之一， 你只需要看看它的語法就能快速上手。 僅有2kb的 ReDOM能讓你快速渲染和自訂HTML組件。
ReactiveJS
這是一個用來構建高交互化的Web應用的範本化UI庫， ReactiveJS 最初是為TheGuardian 所構建的， 它有著跨流覽器和跨設備運行的特性， 所以它足夠可靠。 ReactiveJS 還帶有許多Web 應用所需要的功能， 比如 Scoped CSS， 自訂群組件， SVG和動效。
RiotJS
RiotJS 是一個對於初學者非常友好的庫， 它允許使用HTML元素和屬性自訂群組件， 而其他的庫常常會強制要求使用純粹的JS語法。 RiotJS 相容 Node.js 環境和流覽器， 並且可以用作 Vue.js 的替代品。
HyperHTML
你可以使用 HyperHTML 來創建自訂的元素和Web元件， 它和 jQuery 一樣簡單， 你可以通過CDN載入腳本並訪問 HyperHTML，
Mithril 是一個聽起來很酷， 功能也很強大的JS庫， 除了VirutalDOM 和 租價你之外， Mithril 還配備了 Routing 和 XHR， 你可以使用它來構建單頁式Web應用而不用依賴其他的庫。
SlimJS
SlimJS 是一個使用本地的Web 元件API來構建自訂Web組件的 JS庫。由於它常常是圍繞著本地流覽器元件來使用的，因此 SlimJS 還配備了一個 Polyfill，它可以將API填充到尚不支援它的流覽當中。如果你喜歡採用當地語系化開發的方式，那麼它是一個非常不錯的框架。
VSVG
雖然它的語法和HTML非常相似，但是明顯有著自己的偏好。這個名為VSVG的庫，實際上允許你創建和控制SVG。
EmotionSH
EmotionSH 是一個 CSS-in-JS 的框架，當你使用 VirtualDOM 來創建網站的時候，可能會需要它。借助它你可以只釋出網站的CSS部分，並且可以動態地更新樣式，而無需使用類命名和特定的功能。
React Starter Kit
如果你最近一直在關心前端相關的技術，會發現React 現在幾乎無處不在了。這個React Starter Kit 是一個針對新手的5個短視頻課程，幫你上手。
Elements
Elements 是一組iOS組件的合集，用來在 Sketch 中創建iOS APP的原型。
Modaal
Modaal 是一個通過了“WCAG 2.0 AA級別支持”的目前可訪問性最強的模型庫。它是羽量級的，相容jQuery，可用於視頻、圖片甚至Instagram。
WordPressify
這是一個NPM套裝軟體，讓你在幾分鐘內就可以擁有一個可以啟動運行的 WordPress 開發環境。所有的這一切都建立在現代化的工具注入 Gulp、LinveReload、PostCSS和Babel 之上，它們讓你可以更加專注于開發而非反復調整配置。
Lando
Lando也是一個可以快速方便地創建開發環境的工具，就像上面所提到的 WordPressify 一樣。不過，它利用的不是 Node.js ，而是 Docker 的清廉機容器化技術。
WP-Docklines
WP-Docklines 是一個圖像合集，它可以集成到 WordPress 主題或者運用到諸如 Bitbucket、CircleCl和 Gitlab 等服務外掛程式當中去。每個圖像當中都捆綁了開發 WordPress 時通常所需要的工具，注入 PHP代碼修幹起、PHPUnit 和 WP-CLI等。
WP-Locker
WP-Locker 基於 Docker Compose 配置，可以在幾分鐘內創建一個 WordPress 開發環境。它建立在 Apache、MySQL和 phpMyAdmin基礎之上，由於它擴展了 WP-Docklines 的圖片，所以它還具備一些處理圖片的額外的工具。
Docusaurus
Docusaurus 也是源自Facebook 的一個開源項目，它是用來為你的項目創建網頁文檔的工具。它使用 React 和 Markdown 來創建，你可以用它來輕鬆地撰寫文檔，維護甚至為網站創建一個完整的博客。
VSCode Yo
Yeoman 是一個Node包，你可以通過選取預製的腳手架快速創建專案。如果你使用的是 Visual Studio，那麼這個外掛程式能夠幫你進一步簡化工作流程，因為它讓你可以在 Visual Studio 的代碼視窗中直接運行 Yo 命令。
BluebirdJS
BluebirdJS 是一個讓你在所有流覽器中使用 Promise 、等待和非同步等特性，甚至 Netscape 都可以使用。Promise 是最新的 Javascript 規範中重點強調的功能，它能讓代碼更加精簡、易讀和易於維護。
Prettier
Prettier 是一個幫你格式化代碼以符合語言規範和標準的工具，它會幫你從頭到尾重寫代碼，確保你的團隊協作更加有效率，而不需要在代碼風格上來回討論。
------
作者：Thoriq Firdaus
譯者：陳子木
商業轉載請聯繫作者獲得授權，非商業轉載請注明出處！
關注優設品牌號微信號：uisdcer & 內容號微信號：youshege；推送領域專業知識掌握優設新品動態和50萬設計師獲取新鮮知識
SlimJS 是一個使用本地的Web 元件API來構建自訂Web組件的 JS庫。由於它常常是圍繞著本地流覽器元件來使用的，因此 SlimJS 還配備了一個 Polyfill，它可以將API填充到尚不支援它的流覽當中。如果你喜歡採用當地語系化開發的方式，那麼它是一個非常不錯的框架。
VSVG
雖然它的語法和HTML非常相似，但是明顯有著自己的偏好。這個名為VSVG的庫，實際上允許你創建和控制SVG。
EmotionSH
EmotionSH 是一個 CSS-in-JS 的框架，當你使用 VirtualDOM 來創建網站的時候，可能會需要它。借助它你可以只釋出網站的CSS部分，並且可以動態地更新樣式，而無需使用類命名和特定的功能。
React Starter Kit
如果你最近一直在關心前端相關的技術，會發現React 現在幾乎無處不在了。這個React Starter Kit 是一個針對新手的5個短視頻課程，幫你上手。
Elements
Elements 是一組iOS組件的合集，用來在 Sketch 中創建iOS APP的原型。
Modaal
Modaal 是一個通過了“WCAG 2.0 AA級別支持”的目前可訪問性最強的模型庫。它是羽量級的，相容jQuery，可用於視頻、圖片甚至Instagram。
WordPressify
這是一個NPM套裝軟體，讓你在幾分鐘內就可以擁有一個可以啟動運行的 WordPress 開發環境。所有的這一切都建立在現代化的工具注入 Gulp、LinveReload、PostCSS和Babel 之上，它們讓你可以更加專注于開發而非反復調整配置。
Lando
Lando也是一個可以快速方便地創建開發環境的工具，就像上面所提到的 WordPressify 一樣。不過，它利用的不是 Node.js ，而是 Docker 的清廉機容器化技術。
WP-Docklines
WP-Docklines 是一個圖像合集，它可以集成到 WordPress 主題或者運用到諸如 Bitbucket、CircleCl和 Gitlab 等服務外掛程式當中去。每個圖像當中都捆綁了開發 WordPress 時通常所需要的工具，注入 PHP代碼修幹起、PHPUnit 和 WP-CLI等。
WP-Locker
WP-Locker 基於 Docker Compose 配置，可以在幾分鐘內創建一個 WordPress 開發環境。它建立在 Apache、MySQL和 phpMyAdmin基礎之上，由於它擴展了 WP-Docklines 的圖片，所以它還具備一些處理圖片的額外的工具。
Docusaurus
Docusaurus 也是源自Facebook 的一個開源項目，它是用來為你的項目創建網頁文檔的工具。它使用 React 和 Markdown 來創建，你可以用它來輕鬆地撰寫文檔，維護甚至為網站創建一個完整的博客。
VSCode Yo
Yeoman 是一個Node包，你可以通過選取預製的腳手架快速創建專案。如果你使用的是 Visual Studio，那麼這個外掛程式能夠幫你進一步簡化工作流程，因為它讓你可以在 Visual Studio 的代碼視窗中直接運行 Yo 命令。
BluebirdJS
BluebirdJS 是一個讓你在所有流覽器中使用 Promise 、等待和非同步等特性，甚至 Netscape 都可以使用。Promise 是最新的 Javascript 規範中重點強調的功能，它能讓代碼更加精簡、易讀和易於維護。
Prettier
Prettier 是一個幫你格式化代碼以符合語言規範和標準的工具，它會幫你從頭到尾重寫代碼，確保你的團隊協作更加有效率，而不需要在代碼風格上來回討論。
------
作者：Thoriq Firdaus
譯者：陳子木
商業轉載請聯繫作者獲得授權，非商業轉載請注明出處！
關注優設品牌號微信號：uisdcer & 內容號微信號：youshege；推送領域專業知識掌握優設新品動態和50萬設計師獲取新鮮知識