來源：開源最前線 猿妹編譯

連結：https://tutorialzine.com/2017/12/the-best-javascript-and-css-libraries-for-2017（點選尾部閱讀原文前往）

前不久，Tutorialzine 整理出了 2017 年最受使用者歡迎和喜愛的一些 JS 和 CSS 庫，供大家學習和參考。下面我們一起來看看都有哪些：

1、localForage

用於indexedDB和WebSQL的封裝程式，能夠讓你的Web應用程式儲存更多資料，並提升應用程式的離線體驗。寫入和讀取操作與localStorage類似，支援 BLOB 和任意型別的資料，可以儲存圖片，檔案等等，而不僅僅是字串。它還提供多種API，使開發人員可以選擇回撥的非同步API。

2、AOS

AOS 是一個用於在頁面滾動的時候呈現元素動畫的工具庫，和 WOWJS 類似。但是AOS是 CSS3 動畫驅動的庫，該庫是高度可定製的，非常小，易於使用（通過CDN安裝）。在頁面往回滾動時，元素會恢復到原來的狀態，如此達到迴圈動畫的效果。

3、MJML

MJML是一種簡單的類似於XML的語言，它提供簡單的標記語法和各種可以編譯為電子郵件友好的HTML的程式化元件。其語義語法在展示豐富郵件內容時更加簡單和直觀，幫助開發者減少編寫響應式郵件的複雜度。

4、Monaco-Editor

Monaco-Editor是微軟開源的基於Visual Studio Code的Web程式碼編輯器。Monaco-Editor能夠突出顯示多種語言，多種遊標，鍵盤快捷鍵等等。Monaco-Editor是開源的，因此它可以用來為你能想到的任何編輯器專案提供支援。

5、A-Frame

A-Frame 是 Mozilla 開源的網頁虛擬現實體驗（ WebVR ）框架。能夠在HTML中建立3D場景的框架，使用Three.js和WebGL來建立VR場景。可用於桌面、iPhone（即將支援安卓）以及 Oculus Rift。

6、Bootstrap 4

Bootstrap 4為我們帶來了許多變化和新特性。新版本的框架帶來了很多重大變化，包括基於flexbox的網格系統，新的和重新設計的元件，以及更快的ES6 JavaScript外掛。另一個很酷的新功能是自動佈局模式。它允許開發人員忽略列的大小，使他們自動分配該行中的空間。

7、Prettier

Prettier是一個 JavaScript格式化程式，受到來自ES2017，JSX和Flow的語言功能的高階支援的啟發。它刪除所有原始格式並確保所有輸出的JavaScript符合一致的風格。

8、GPU.js

用於在GPU中執行瀏覽器JavaScript程式碼的庫。使用GPU.js，您可以通過將專門編寫的JS編譯成可通過WebGL在GPU上執行的著色器語言來更快速地執行復雜的計算。如果WebGL不可用，則函式將回退到常規JavaScript。

9、R2

這是一個更輕量級的 HTTP 客戶端解決方案，它建立在瀏覽器原生的 Fetch API 的基礎之上，併為 Node.js 提供優化。壓縮後的R2大小隻有16K。

10、Puppeteer

Puppeteer是一個Node.js API，用於控制 headless Chrome。由 Google官方的 Chrome DevTools 團隊維護。在headless環境中，開發者可以生成網頁截圖或者 PDF ，通過Puppeteer的提供的api直接控制Chrome模擬大部分使用者操作來進行UI Test或者作為爬蟲訪問頁面來收集資料。

11、Push

Push是一款可靠的跨瀏覽器的JavaScript桌面通知庫。它基於強大的Notification API，如果使用者的瀏覽器不支援新API，則會回退到較早的實現。

12、Draggable

Draggable是一個簡單易用的模組化拖放庫。它通過快速DOM重新排序，乾淨的API和可訪問的標記提供了出色的拖放功能。Draggable附帶額外的模組，可以新增更多的功能，如排序，交換和其他實用程式。

13、Devices.css

Devices.css 是一個使用純 CSS 實現移動裝置的庫。它包含了一些目前主流的移動裝置，如 iPhone X，Google Pixel 2 XL 和三星Galaxy S8。由於其高品質的設計，可用於著陸頁面或者網頁快照。

14、Card

Card是一個小巧的vanilla JS專案（帶有jQuery版本），可以讓你的信用卡表格變得更加有趣生動。快速安裝後，將採取您的表格，並將其轉換為一張動畫的信用卡。

15、Webpack

webpack 是一個模組繫結器，主要目的是在瀏覽器上繫結 JavaScript 檔案。在過去幾年中，它已成為大多數開發人員的首選javascript打包程式。它可以建立單個或多個在執行時非同步載入的塊，具有高度模組化的外掛系統，並允許高階程式碼分割。

16、Deeplearn.js

Deeplearn.js是一個開放原始碼庫，可將高效能機器學習構建模組帶入網路。它提供了兩個API，即時執行模型和延期執行模型。它可以完全在瀏覽器中執行，不需要安裝，不需要後端處理。

17、KeystoneJS

KeystoneJS是一個功能強大的CMS框架，基於Express和MongoDB構建，它提供了一個漂亮的管理使用者介面，實用的API應用程式，會話管理，電子郵件傳送，擴充套件等等。

18、Popper.js

Popper是一個JavaScript庫，它提供了大量的定製選項，並且完全模組化，每個功能都有獨立的外掛。不需要依賴 jQuery 庫，大小僅為 3.5KB 左右，使用與配置相當簡單，Twitter，WebClipper中的Microsoft以及AtlasKit等大企業都在使用

19、Apollo Client

Apollo Client是一款全功能的GraphQL客戶端，用於 React 、Angular 的互動。壓縮的大小還不到25K。

20、Animate.css

Animate.css是一個跨瀏覽器的CSS動畫庫。它非常易於使用，並提供大量不同的動畫效果，如反彈，脈衝，擺動，淡入淡出，翻轉等等。它可以用於在任何你喜歡的地方新增一些很酷和有趣的動畫效果。