【翻译】从Web应用程序框架到实时数据可视化，本文介绍了开发下一个Web项目所需的工具。JavaScript即将接管万维网的计划已经变得清晰起来。工具如雨后春笋般涌现，以利用占主导地位的JavaScript语言；但是，至少可以说，这会使为开发任务选择正确的工具变得困难。本文介绍了11种新兴工具，用于使用JavaScript（结合其他语言）构建具有用户日益需要的特性和特性的现代网站。它们提供简洁的设计和简单的界面，看似简单但功能强大，因为这些工具通常也很强大。经过多年的完善和重新设计，这些工具终于如愿以偿，减少了令人头疼的配置问题，为我们提供了超乎想象的丰富功能。MeteorMeteorWeb应用程序框架背后的七项原则为现代软件开发提供了坚实的基础。有些原则是实用的，比如积极支持开源社区，让贡献插件变得容易。Meteor就是这样做的：它已经拥有大量出色的插件。其他原则是技术性的：设计简单的API，只通过网络发送数据，到处使用通用的开发语言——即用JavaScript编写代码，使用MongoDB访问数据库；Meteor创始人为客户端设计了一个本地模拟器，以促进这一点。该图显示了一些用于构建本地集合的简单代码，这是一种模拟MongoDB以在本地存储数据的数据结构。相同的代码可以将数据存储在本地或后端MongoDB服务器上。相关网站：https://www.meteor.com大纪元数据可视化在网上很流行。虽然现在有很多工具可以以引人注目和时尚的方式显示数据，但很少有工具能与D3.js相提并论。现在，开发Epoch的人更进了一步。他们向基础D3代码库添加了足够的管道，以允许它们实时流畅、连贯地运行。现在，您可以为您的用户添加清晰明了的图表，这些图表会在他们观看时实时更新。仪表板从未如此简单。该图显示了一个实时条形图；随着新数据的进入，条形图向左滚动。相关URL：http://fastly.github.io/epoch/WebStarterKit构建一个在一台设备上运行的Web应用程序本身就已经很困难了。这时，Google的WebStarterKit应运而生，一个旨在帮助开发者支持多种设备的项目。这意味着同步点击，在必要时重新加载，并让一切尽可能简单，这样屏幕仍然保持同步。如果一个用户有一部旧iPad而另一个用户有一部新的Android手机，代码也能够适应。您只需绘制外观草图，构建工具和框架会处理细节，使其在每个屏幕上看起来都很棒。该图仅显示了该项目附带的众多设计建议中的一个——该团队承认这些建议“具有很大的主观性”。相关网站：https://github.com/google/web-starter-kitReveal.jsReveal.js是一个优秀的基于HTML5的工具，可以替代PowerPoint。只需单击一个按钮，漂亮的动画就会在信息片段之间切换，就像PowerPoint一样。但它真正的魅力在于您可以在您的网络策略中利用它的方式；如果您的网站有故事可讲，Revel可能是适合您的工具。加载您想让访问者知道的内容，Reveal会以时尚的方式显示您的消息。这个框架还有一个优点：如果你需要在演讲时展示一个网站，它可以做成幻灯片。此图显示了使用Reveal.js进行转换的演示文稿中的一张幻灯片。相关网址：http://lab.hakim.se/reveal-jsRxJS静态网页已经成为过去，现在连基本的动态网页都开始显得乏味了。一种新趋势是让网站“响应式”，以便它们在用户点击之前快速响应。最简单的示例是一个自动填充框，它会在用户键入时提供建议。为什么要等待用户完成输入并单击“搜索”？RxJS是一个框架，可用于向鼠标和键盘生成的事件流添加流畅的、响应式的、异步的响应。此图显示了将维基百科搜索绑定到事件的代码。相关URL：http://reactive-extensions.github.io/RxJS/NodeBB如果您创建一个论坛，从而将您的网站或应用程序暴露在有争议的、好斗的、刻薄的和不受约束的互联网上，它并不总能得到回报，但现在这样做肯定更容易，感谢NodeBB。这个基于节点的工具就像电子公告板的更新版本。它响应迅速、可定制，并提供实时对话流功能。NodeBB的开发人员添加了流行的主题并支持手机和平板电脑上的小屏幕。他们还添加了最新的界面设计元素，如无限滚动。该图显示了一个致力于为NodeBB编写插件的NodeBB社区。相关网站：https://nodebb.orgGulpJS很久以前，开发者从零开始编写HTML、CSS和JavaScript，那已经是上个世纪了。如今，JavaScript通常是使用像CoffeeScript这样的速记语法来编译或构建的。CSS是根据一系列规则构建的。如果你经常希望有一种简单的方法来自动化你在编写代码后需要做的所有工作，那么GulpJS就是答案。你只需要编写一小段JavaScript代码来指定路径，Gulp会处理剩下的事情。它有点像Java的Ant或Maven，但这次他们使用本地语言(JavaScript)而不是XML来指定作业。该图显示了用于缩小和清理一些JavaScript代码的代码片段。相关网站：http://www.gulpjs.comAngularJSGoogle开发了AngularJS以提供一个流畅的轻量级框架，用于在浏览器中显示信息。它从服务器收集数据，然后在本地编译模板以供显示。换句话说，它是一个使用HTML、JavaScript和CSS构建并在浏览器中运行的模型/视图/控制器框架。服务器端代码处理数据存储，ANgularJS代码负责显示数据。它与桌面浏览器、平板电脑和手机兼容。该图显示了来自Angular模板的代码片段，将使用花括号的Angular代码与原始HTML混合在一起。相关URL：https://angularjs.orgOdyssey向网站添加地图从未如此简单，这要归功于来自竞争公司的一整套API。讲一个故事只需要几句话。如果你想把两者结合起来怎么办？这正是CartoDB的Odyssey的用途，它是一种可用于将故事和地图与“插件地图交互”（与文本部分捆绑在一起）等功能相结合的工具。显示用于编写与地图交互的故事的沙箱的图表。相关网站：http://cartodb.github.io/odyssey.js/PlayCanvas理论上，游戏是不同的产品，只有游戏玩家才能构建。它们与专业人员花费大量时间开发的Web应用程序和其他软件产品完全不同。事实上，游戏界的所有工具都适合为网站添加漂亮的界面。PlayCanvas是一个围绕WebGL构建的游戏引擎。它将物理、光照、阴影、音频等结合到一个强大的工具中，用于构建充满对象的世界。此图显示了此框架的在线开发工具。相关网址：http://www.playcanvas.comDeb.js我们都会犯错，开发者也不例外。然而，我们改正错误的方式却大不相同。Deb.js是一个小文件，大约只有1.5KB大小，但它清理了控制台窗口，因此JavaScript调试更容易。它是重要性仅次于FireBug的必备工具，也是Chrome、Opera、Safari等浏览器的内置调试工具。该图像显示了堆栈跟踪。相关网站：https://github.com/krasimir/deb.js英文原文：Web开发者必备的11个JavaScript工具布加迪编译
