 |
VOOZH | about |
|
VOOZH | about |
【51CTO譯文】從Web應用程式框架，到數據實時可視化，本文介紹的這些工具能夠滿足你開發下一個Web項目的需要。
JavaScript即將接管全球資訊網的計劃已昭然若揭。利用占主導地位的JavaScript的工具如雨後春筍般冒出來；不過至少可以這麼說，這樣一來，想選擇適合開發任務的那一種工具就顯得困難重重。
本文介紹了這11款嶄露頭角的工具，它們可使用JavaScript（結合其他語言）來構建擁有用戶日漸需要的種種功能特性的現代網站。它們提供了簡潔的設計和簡單的界面，貌似簡單，實則強大，因為這些工具還常常功能強大。這些工具在經過多年的完善和重新設計之後終於修得正果，減少了配置方面的麻煩，為我們提供了超乎想像的豐富功能。
Meteor
Meteor Web應用程式框架背後的七大原則為現代軟體開發奠定了堅實的基礎。一些原則很實用，比如積極支持開源社區，為貢獻插件提供方便。Meteor就是這麼做的：它已經擁有眾多優秀的插件。
其他原則是技術層面的：設計簡單的API，通過網絡僅發送數據，到處使用統一的開發語言――也就是說編寫代碼用JavaScript，訪問資料庫用MongoDB；Meteor創始人為客戶端設計了一個本地仿真器，為此提供便利。該圖顯示的一些簡單代碼用來構建一個本地Collection（集合），這種數據結構可仿真MongoDB以便將數據存儲在本地。同一代碼可以將數據存儲在本地，也可以將數據存儲在後端的MongoDB伺服器上。
相關網址：
Epoch
數據可視化在網上很流行。雖然如今有很多工具能夠以吸引眼球的方式，別具一格地顯示數據，卻很少能與D3.js相媲美。
現在，開發Epoch的那些人更進了一步。他們在基本的D3代碼庫這個基礎上添加了足夠多的管道（piping），讓它們可以流暢而連貫地實時運行。現在，你可以為用戶添加乾淨、清晰的圖表，用戶在觀看時圖表可實時更新。儀錶板從來沒有變得如此容易。該圖顯示了實時條形圖；新數據進入後，該條形圖就會滾向左邊。
Web Starter Kit
構建一款在一種設備上運行的Web應用程式本身夠難的了。這時候，谷歌的Web Starter Kit應運而生，這個項目旨在幫助開發人員支持多種設備。這意味著同步點擊，必要時重新裝入，以及讓一切保持儘量簡潔，那樣屏幕仍然保持同步。如果一個用戶使用舊的iPad，另一個用戶使用新的安卓手機，代碼也能夠適應。
你只要勾畫外觀，構建工具和框架就能處理讓它在每個屏幕上都有漂亮造型的細節問題。該圖顯示了該項目隨帶的眾多設計建議中的僅僅一個――團隊承認設計建議「有很強的主觀性」。
相關網址：
Reveal.js
Reveal.js是一款基於HTML5的出色的工具，可以替代PowerPoint。點擊按鈕，精美的動畫會在信息片段之間翻轉，就像PowerPoint那樣。但是其真正的魅力體現在你可以在Web策略裡面充分利用它；如果你的網站有故事要講，Revel可能正是你所需要的合適工具。裝入你想讓訪客們知道的內容，Reveal就會很有氣派地顯示你要傳達的訊息。
該框架還有一個優點：如果你需要在講話時演示網站，就可以做成幻燈片。該圖顯示了來自使用Reveal.js的轉場效果演示文稿的一張幻燈片。
RxJS
靜態網頁已成為明日黃花，現在連基本的動態網頁也開始顯得枯燥乏味。一個新的趨勢是，讓網站變得「反應更靈敏」，於是用戶還沒有點擊，它們就迅速響應。最簡單的例子就是用戶在輸入時給出建議的自動填寫框。為什麼要等用戶完成輸入、點擊「搜索」呢？
RxJS是一種框架，可用於為滑鼠和鍵盤生成的事件流添加流暢的、靈敏的、異步的響應。該圖顯示了將維基百科搜索綁定到一個事件的代碼。
NodeBB
如果開設一個論壇，因而將你的網站或應用程式敞開在有爭議、好鬥、刻薄又不受約束的網際網路面前，並不總是會帶來回報，但現在肯定更容易這麼做，這多虧有了NodeBB。這個基於Node的工具好比電子公告欄的升級版，它反應迅速、可以定製，提供了實時的對話流功能。NodeBB的開發人員增加了時髦主題，並支持手機和平板電腦上的較小屏幕。他們還添加了最新的界面設計元素，比如無限滾動。該圖顯示了一個致力於為NodeBB編寫插件的NodeBB社區。
相關網址：
GulpJS
很久以前，開發人員從頭編寫HTML、CSS和JavaScript，那是上個世紀的事情。如今，JavaScript常常利用CoffeeScript之類的簡寫語法編譯而成或構建而成。CSS是用一系列規則構建而成的。
如果你常常希望有一種簡單的辦法可以讓編寫代碼後需要處理的所有工作實現自動化，那麼GulpJS就是不二之選。你只要編寫一小段JavaScript代碼來指定路徑，Gulp之後就會處理餘下的工作。它有點像面向Java的Ant或Maven，但這回他們使用原生語言（JavaScript）、而不是XML來指定工作。該圖顯示了用於縮小和清理一些JavaScript代碼的代碼片段。
AngularJS
谷歌開發AngularJS是為了提供一種流暢的輕量級框架，用於在瀏覽器中顯示信息。它從伺服器收集數據，然後在本地編譯用於顯示的模板。換句話說，它是一種利用HTML、JavaScript和CSS構建而成的模型/視圖/控制器框架，可在瀏覽器中運行。伺服器端代碼處理數據存儲，ANgularJS代碼負責顯示數據。它與桌面瀏覽器、平板電腦和手機兼容。
該圖顯示了來自Angular模板的代碼片段，將使用花括號的Angular代碼與原始HTML混合起來。
相關網址：
Odyssey
為網站添加地圖從來沒有如此容易，這歸功於彼此競爭的公司提供了一整套的API。講故事只需要一些單詞。如果你想把兩者結合起來，該如何是好？這正是CartoDB的Odyssey的目的所在，這個工具可用於藉助「塞入地圖交互」（與文本部分綁定在一起）之類的功能，將故事和地圖結合起來。該圖顯示了用於編寫與地圖交互的故事的沙箱。
PlayCanvas
從理論上來說，遊戲是只有遊戲玩家才能構建的不一樣的產品。它們與Web應用程式及專業人士花大量時間開發的其他軟體產品全然不同。
而實際上，來自遊戲界的所有工具都適用於為網站添加漂亮的界面。PlayCanvas就是一款圍繞WebGL而建的遊戲引擎。它把物理、照明、陰影、音頻及更多效果結合到一款功能強大的工具，可用於搭建擺滿物體的世界。該圖顯示了面向該框架的一款在線開發工具。
Deb.js
我們都會犯錯誤，開發人員也不例外。不過，我們改正錯誤的方式卻大有關係。Deb.js是個小文件，只有大概1.5KB大小，但它能清理控制台窗口，所以JavaScript調試起來就更容易了。它是重要性僅次於FireBug的必備工具，也是Chrome、Opera和Safari等瀏覽器的內置調試工具。該圖顯示了堆棧跟蹤。
相關網址：
英文原文：11 essential JavaScript tools for Web developers
