為前端而生！2018年1月超實用前端干貨大合集！

和網頁設計一樣，網頁開發的技術發展也是非常快的。日新月異的前端工具賦予了前端越來越強大的開發能力和效率，甚至改變網站建設的方式。而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

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 是一個幫你格式化代碼以符合語言規范和標準的工具，它會幫你從頭到尾重寫代碼，確保你的團隊協作更加有效率，而不需要在代碼風格上來回討論。

【2018年設計趨勢，一個都不要錯過】

1. 《2018年，這10個LOGO設計趨勢值得你關注》
2. 《超全面總結！2017年UI設計領域流行過這21個設計趨勢》
3. 《掌握這12個移動端UX設計趨勢，你就掌控了2018年》
4. 《這款獨特的紫色，是為你指引2018年設計方向的年度潘通色》

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com