【51CTO譯文】從Web應用程序框架，到數據實時可視化，本文介紹的這些工具能夠滿足你開發下一個Web項目的需要。

JavaScript即將接管萬維網的計劃已昭然若揭。利用占主導地位的JavaScript的工具如雨后春筍般冒出來；不過至少可以這么說，這樣一來，想選擇適合開發任務的那一種工具就顯得困難重重。

本文介紹了這11款嶄露頭角的工具，它們可使用JavaScript（結合其他語言）來構建擁有用戶日漸需要的種種功能特性的現代網站。它們提供了簡潔的設計和簡單的界面，貌似簡單，實則強大，因為這些工具還常常功能強大。這些工具在經過多年的完善和重新設計之后終于修得正果，減少了配置方面的麻煩，為我們提供了超乎想象的豐富功能。

Meteor

Meteor Web應用程序框架背后的七大原則為現代軟件開發奠定了堅實的基礎。一些原則很實用，比如積極支持開源社區，為貢獻插件提供方便。Meteor就是這么做的：它已經擁有眾多優秀的插件。

其他原則是技術層面的：設計簡單的API，通過網絡僅發送數據，到處使用統一的開發語言――也就是說編寫代碼用JavaScript，訪問數據庫用MongoDB；Meteor創始人為客戶端設計了一個本地仿真器，為此提供便利。該圖顯示的一些簡單代碼用來構建一個本地Collection（集合），這種數據結構可仿真MongoDB以便將數據存儲在本地。同一代碼可以將數據存儲在本地，也可以將數據存儲在后端的MongoDB服務器上。

相關網址：https://www.meteor.com

Epoch

數據可視化在網上很流行。雖然如今有很多工具能夠以吸引眼球的方式，別具一格地顯示數據，卻很少能與D3.js相媲美。

現在，開發Epoch的那些人更進了一步。他們在基本的D3代碼庫這個基礎上添加了足夠多的管道（piping），讓它們可以流暢而連貫地實時運行。現在，你可以為用戶添加干凈、清晰的圖表，用戶在觀看時圖表可實時更新。儀表板從來沒有變得如此容易。該圖顯示了實時條形圖；新數據進入后，該條形圖就會滾向左邊。

相關網址：http://fastly.github.io/epoch/

Web Starter Kit

構建一款在一種設備上運行的Web應用程序本身夠難的了。這時候，谷歌的Web Starter Kit應運而生，這個項目旨在幫助開發人員支持多種設備。這意味著同步點擊，必要時重新裝入，以及讓一切保持盡量簡潔，那樣屏幕仍然保持同步。如果一個用戶使用舊的iPad，另一個用戶使用新的安卓手機，代碼也能夠適應。

你只要勾畫外觀，構建工具和框架就能處理讓它在每個屏幕上都有漂亮造型的細節問題。該圖顯示了該項目隨帶的眾多設計建議中的僅僅一個――團隊承認設計建議“有很強的主觀性”。

相關網址：https://github.com/google/web-starter-kit

Reveal.js

Reveal.js是一款基于HTML5的出色的工具，可以替代PowerPoint。點擊按鈕，精美的動畫會在信息片段之間翻轉，就像PowerPoint那樣。但是其真正的魅力體現在你可以在Web策略里面充分利用它；如果你的網站有故事要講，Revel可能正是你所需要的合適工具。裝入你想讓訪客們知道的內容，Reveal就會很有氣派地顯示你要傳達的訊息。

該框架還有一個優點：如果你需要在講話時演示網站，就可以做成幻燈片。該圖顯示了來自使用Reveal.js的轉場效果演示文稿的一張幻燈片。

相關網址：http://lab.hakim.se/reveal-js

RxJS

靜態網頁已成為明日黃花，現在連基本的動態網頁也開始顯得枯燥乏味。一個新的趨勢是，讓網站變得“反應更靈敏”，于是用戶還沒有點擊，它們就迅速響應。最簡單的例子就是用戶在輸入時給出建議的自動填寫框。為什么要等用戶完成輸入、點擊“搜索”呢？

RxJS是一種框架，可用于為鼠標和鍵盤生成的事件流添加流暢的、靈敏的、異步的響應。該圖顯示了將維基百科搜索綁定到一個事件的代碼。

相關網址：http://reactive-extensions.github.io/RxJS/

NodeBB

如果開設一個論壇，因而將你的網站或應用程序敞開在有爭議、好斗、刻薄又不受約束的互聯網面前，并不總是會帶來回報，但現在肯定更容易這么做，這多虧有了NodeBB。這個基于Node的工具好比電子公告欄的升級版，它反應迅速、可以定制，提供了實時的對話流功能。NodeBB的開發人員增加了時髦主題，并支持手機和平板電腦上的較小屏幕。他們還添加了最新的界面設計元素，比如無限滾動。該圖顯示了一個致力于為NodeBB編寫插件的NodeBB社區。

相關網址：https://nodebb.org

GulpJS

很久以前，開發人員從頭編寫HTML、CSS和JavaScript，那是上個世紀的事情。如今，JavaScript常常利用CoffeeScript之類的簡寫語法編譯而成或構建而成。CSS是用一系列規則構建而成的。

如果你常常希望有一種簡單的辦法可以讓編寫代碼后需要處理的所有工作實現自動化，那么GulpJS就是不二之選。你只要編寫一小段JavaScript代碼來指定路徑，Gulp之后就會處理余下的工作。它有點像面向Java的Ant或Maven，但這回他們使用原生語言（JavaScript）、而不是XML來指定工作。該圖顯示了用于縮小和清理一些JavaScript代碼的代碼片段。

相關網址：http://www.gulpjs.com

AngularJS

谷歌開發AngularJS是為了提供一種流暢的輕量級框架，用于在瀏覽器中顯示信息。它從服務器收集數據，然后在本地編譯用于顯示的模板。換句話說，它是一種利用HTML、JavaScript和CSS構建而成的模型/視圖/控制器框架，可在瀏覽器中運行。服務器端代碼處理數據存儲，ANgularJS代碼負責顯示數據。它與桌面瀏覽器、平板電腦和手機兼容。

該圖顯示了來自Angular模板的代碼片段，將使用花括號的Angular代碼與原始HTML混合起來。

相關網址：https://angularjs.org

Odyssey

為網站添加地圖從來沒有如此容易，這歸功于彼此競爭的公司提供了一整套的API。講故事只需要一些單詞。如果你想把兩者結合起來，該如何是好？這正是CartoDB的Odyssey的目的所在，這個工具可用于借助“塞入地圖交互”（與文本部分綁定在一起）之類的功能，將故事和地圖結合起來。該圖顯示了用于編寫與地圖交互的故事的沙箱。

相關網址：http://cartodb.github.io/odyssey.js/

PlayCanvas

從理論上來說，游戲是只有游戲玩家才能構建的不一樣的產品。它們與Web應用程序及專業人士花大量時間開發的其他軟件產品全然不同。

而實際上，來自游戲界的所有工具都適用于為網站添加漂亮的界面。PlayCanvas就是一款圍繞WebGL而建的游戲引擎。它把物理、照明、陰影、音頻及更多效果結合到一款功能強大的工具，可用于搭建擺滿物體的世界。該圖顯示了面向該框架的一款在線開發工具。

相關網址：http://www.playcanvas.com

Deb.js

我們都會犯錯誤，開發人員也不例外。不過，我們改正錯誤的方式卻大有關系。Deb.js是個小文件，只有大概1.5KB大小，但它能清理控制臺窗口，所以JavaScript調試起來就更容易了。它是重要性僅次于FireBug的必備工具，也是Chrome、Opera和Safari等瀏覽器的內置調試工具。該圖顯示了堆棧跟蹤。

相關網址：https://github.com/krasimir/deb.js

英文原文： 11 essential JavaScript tools for Web developers

布加迪編譯