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

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

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

Meteor

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

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

相關網(wǎng)址：https://www.meteor.com

Epoch

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

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

相關網(wǎng)址：http://fastly.github.io/epoch/

Web Starter Kit

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

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

相關網(wǎng)址：https://github.com/google/web-starter-kit

Reveal.js

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

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

相關網(wǎng)址：http://lab.hakim.se/reveal-js

RxJS

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

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

相關網(wǎng)址：http://reactive-extensions.github.io/RxJS/

NodeBB

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

相關網(wǎng)址：https://nodebb.org

GulpJS

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

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

相關網(wǎng)址：http://www.gulpjs.com

AngularJS

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

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

相關網(wǎng)址：https://angularjs.org

Odyssey

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

相關網(wǎng)址：http://cartodb.github.io/odyssey.js/

PlayCanvas

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

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

相關網(wǎng)址：http://www.playcanvas.com

Deb.js

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

相關網(wǎng)址：https://github.com/krasimir/deb.js

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

布加迪編譯