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

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

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

Meteor

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

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

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

Epoch

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

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

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

Web Starter Kit

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

你只要勾畫(huà)外觀，構(gòu)建工具和框架就能處理讓它在每個(gè)屏幕上都有漂亮造型的細(xì)節(jié)問(wèn)題。該圖顯示了該項(xiàng)目隨帶的眾多設(shè)計(jì)建議中的僅僅一個(gè)――團(tuán)隊(duì)承認(rèn)設(shè)計(jì)建議“有很強(qiáng)的主觀性”。

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

Reveal.js

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

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

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

RxJS

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

RxJS是一種框架，可用于為鼠標(biāo)和鍵盤(pán)生成的事件流添加流暢的、靈敏的、異步的響應(yīng)。該圖顯示了將維基百科搜索綁定到一個(gè)事件的代碼。

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

NodeBB

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

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

GulpJS

很久以前，開(kāi)發(fā)人員從頭編寫(xiě)HTML、CSS和JavaScript，那是上個(gè)世紀(jì)的事情。如今，JavaScript常常利用CoffeeScript之類(lèi)的簡(jiǎn)寫(xiě)語(yǔ)法編譯而成或構(gòu)建而成。CSS是用一系列規(guī)則構(gòu)建而成的。

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

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

AngularJS

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

該圖顯示了來(lái)自Angular模板的代碼片段，將使用花括號(hào)的Angular代碼與原始HTML混合起來(lái)。

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

Odyssey

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

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

PlayCanvas

從理論上來(lái)說(shuō)，游戲是只有游戲玩家才能構(gòu)建的不一樣的產(chǎn)品。它們與Web應(yīng)用程序及專(zhuān)業(yè)人士花大量時(shí)間開(kāi)發(fā)的其他軟件產(chǎn)品全然不同。

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

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

Deb.js

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

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

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

布加迪編譯