原文出处 The Best JavaScript and CSS Libraries for 2017

我们Tutorialzine的任务是让您了解最新的最酷Web发展趋势。在过去的一年中，我们向您展示了许多有趣的库和资源，我们认为这些库和资源值得一试。这就是我们决定在这篇文章中与你分享那些最突出的收藏的原因

localForage

用于indexedDB和WebSQL的封装程序，可提高Web应用程序在离线本地数据存储方面的能力。读写操作与localStorage类似，但除了字符串外可以保存许多其他类型的数据。它还提供双重API，使开发人员可以选择使用回调函数或Promises。您可以在我们的 Make IndexedDB a Breeze With LocalForage文章中找到更多关于它的信息。

AOS

AOS是一个CSS库，允许您添加滚动动画效果。该库是高可定制的，非常小，易于使用（通过CDN安装），最重要的是性能良好，这对于其他的滚动库来说是一个问题

MJML

MJML是一种简单的类XML的语言，它提供简单的标记语法和各种可以编译为email-friendly 页面的程式化组件。这样，我们不必手动编写表格和传统内嵌样式的整个布局。它还提供了丰富的标准化组件和各种定制选项。有关更多详细信息，可以查看我们的使用MJML构建响应式电子邮件教程。

Monaco editor

微软基于Electron的Visual Studio Code的编辑引擎。它拥有您期望从现代代码编辑器中获得的一切 -多种语法高亮，多光标操作，键盘快捷键，代码补全等等。Monaco是开源的，因此它可以用来为您想到的任何编辑器项目提供支持。

A-frame

这个先进的库允许您仅使用好的网络技术创建虚拟现实体验。在用HTML创建3D世界之后，A-frame将把它分成两个视角稍有不同屏幕。现在，您可以使用Google Cardboard或其他耳机在您的手机上运行演示程序，并享受VR乐趣。

Bootstrap 4

Bootstrap 4为我们在第3版中熟悉的栅格系统带来了许多变化和新功能。新版本的框架带来了很多重大变化，包括基于flexbox的栅格系统，新的重新设计的组件以及更快的ES6 JavaScript插件。另一个很酷的新功能是自动布局模式。它允许开发人员忽略列的大小，使他们自动分配该行中的空间。

Prettier

Prettier是一个受到refmt启发并具有ES2017，JSX和Flow语言特性高级支持的个性化JavaScript格式。它删除所有原始格式并确保所有输出的JavaScript符合一致的风格。

GPU.js

用于在GPU中运行浏览器JavaScript代码的库。使用GPU.js，您可以通过将专门编写的JS编译成可通过WebGL在GPU上运行的着色器语言来更快速地执行复杂的计算。如果WebGL不可用，则函数将回退到常规JavaScript。

r2

这是流行的Node.js request库的更新版本。这是一个更轻量级的HTTP客户端解决方案，它建立在浏览器的本地Fetch API之上，并为Node.js提供了亮点。与request的〜500K占用空间相比,压缩后的R2的大小仅为16K。

Puppeteer

Puppeteer是一个高级Node.js API，用于处理新的无头Chrome特性。它是Chrome DevTools团队维护的官方Google项目。在无头环境中，您可以生成截图和PDF，在链接和应用程序状态之间导航，自动执行用户输入并形成验证测试并从网站中抓取数据。您可以在我们的文章使用Node.js自动化Google Chrome中了解更多关于它的信息，我们会在其中试用它的一些功能。

Push

Push是用于管理JavaScript桌面通知的运行速度最快的库。它基于功能强大的Notification API，但也可作为可靠的跨浏览器解决方案，如果用户的浏览器不支持新API，则可以回退到更早的版本。为了进一步了解它，您可以查看我们的显示浏览器通知最简单的方法教程

Draggable

通过Shopify，Draggable是一个简单易用的模块化拖拽库。它通过快速DOM重新排序，干净的API和可访问的标记提供出色的拖放功能。Draggable附带额外的模块，可以添加更多的功能，如排序，交换和其他实用功能。

Devices.css

使用纯CSS创建的展示现代移动设备的库。它包括一些最受欢迎的移动设备，如iPhone 8，iPadPro，MacBook和三星Galaxy S8。他的设计优雅高品质，可用于登陆或页面截图。

Card

Card是一个小巧的vanilla JS项目（带有jQuery版本），可以让你的信用卡表格变得更加有趣和互动。快速安装后，该库将获取您的表格，并将其转换为一张仅有CSS动画的信用卡，并在用户输入数据时填写。

Webpack

Webpack是一个功能强大的开源模块捆绑器和预处理器，可以处理各种各样的任务。在过去几年中，它已成为大多数开发人员的首选javascript打包程序。它可以创建单个或多个在运行时异步加载的块，具有高度模块化的插件系统，并允许高级代码分割。

Deeplearn.js

Deeplearn.js是一个开放源代码库，可将高性能机器学习构建模块带入网络。它提供了两个API，即时执行模型和延期执行模型。这个库可以用于从教育到模型理解和艺术项目的所有事情。为了进一步了解机器学习，请查看我们的10 个JavaScript机器学习示例文章。

Keystone

KeystoneJS是一个强大的CMS框架，基于Express和MongoDB构建。它使您可以轻松地创建具有良好结构的路线，模板和模型的动态项目。它提供了一个漂亮的管理用户界面，有用的API实用程序，会话管理，电子邮件发送，扩展等等。它还提供了一个用于创建新项目并设置其所有资产的命令行工具。

Popper.js

Popper是一个JavaScript库，用于向HTML元素添加工具提示和弹出窗口。它提供了大量的定制选项，并且完全模块化，每个功能都有独立的插件。波普尔的尺寸非常小，完全没有依赖性，并且非常易于使用。它被Twitter用在Bootstarp 4 中，被 Microsoft用在WebClipper中，被Atlassian用在AtlasKit中。

Apollo client

Apollo Client是一款全功能的GraphQL客户端，可用于每个前端平台。它易于使用，可用于现代互动式React应用程序构建，非常小 - 25kb以下压缩，以社区为中心，非常适合您的需求。

Animate.css

Animate.css是一个CSS动画的跨浏览器库。它非常易于使用，并提供大量不同的动画效果，如反弹，脉冲，摆动，淡入淡出，翻转等等。它可以用于强调，主页，滑块或任何你喜欢的地方添加一些很酷和有趣的动画效果。