編者按:本文作者為 Soledad Penadés, Sole 在 Mozilla 的 Tech Evangelism 團隊工作,幫助人們在網絡上創造神奇的東西。本文主要介紹 node-firefox 的基本知識,以及它如何幫助你加速 Firefox OS 應用開發,由 OneAPM 工程師編譯呈現。
在 Mozilla 基金會,我們一直致力于尋找簡化開發人員生活的方法。當胸懷抱負的應用開發者告訴我們初學開放式 Web 應用很麻煩時,我們便致力于將應用管理器轉變為對更多初學者友好的環境,反過來也給 WebIDE 讓路。該工具簡化了許多曾經緩慢而繁瑣的行為,比如創建新的應用、下載和安裝模擬器或運行和調試應用。
但仍有部分開發者感覺受冷落了:計算機高手!他們已經具備了基于 node.js 的構建工具鏈,任務包括資產優化、代碼提示、或測試運行等。他們也經常使用像 Browserify 這樣的工具,或許甚至都不編寫 JavaScript 代碼,相反,卻傾向于選擇 CoffeeScript 這樣的語言。不過,所有這些好東西都要求你先構建應用或網站,之后才能將其用于你的設備或瀏覽器中。
本來,我們想讓這些開發人員離開自己心愛的命令行(或編輯快捷鍵!)轉而使用 WebIDE,通過單擊按鈕來部署應用,然后再回到他們喜歡的編輯器。但是,他們卻一致回答:我們不喜歡點擊!我們喜歡終端!
如何使 WebIDE 更加高效?
大家不喜歡 WebIDE,因為它意味著上下文不斷變化。它并不高效,我們是工程師,如果工程師喜歡一件事的程度超過構建新的應用,那它就很可能是優化并簡化流程。
既然我們已經有了構建腳本,只剩下一個步驟——部署,就能讓我們的應用投入運行時,這也是我們使用 WebIDE 的目的。所以,顯而易見問題將是:我們能利用 WebIDE 進行部署嗎?以編程的方式?
服務器與 actors
每一個 Firefox 運行時都有所謂的遠程調試服務器。由于一些明顯的安全原因,默認并不啟用該服務器,但是當啟用時,客戶端可與其連接并利用它的各種功能優勢,比如安裝應用、訪問控制臺等。這就是 WebIDE 內部所做的事情。
每個功能都由一個 actor 提供。例如,假設我們想要列出已安裝的應用,那么可以……
首先,找到
webApps
actor然后運行
getAll
命令再然后,得到回應的應用列表
還有一個例子是安裝打包的應用,步驟為:
首先,使用任何庫或任何你喜歡的方式壓縮應用內容
然后得到
webApps
actor用壓縮文件內容調用
webApps actor
中的uploadPackage
命令調用結果即為
File
actor用返回值
File
actor 調用webApps
actor 中的install
命令完成!
因此,安裝應用的魔法不在 WebIDE ,而是在服務器中!我們可以以編程方式利用這類魔法,但是從頭構建一個客戶端,建立 TCP 連接并語法解析包,并不是你真正想做的:相反,你想做的是編寫應用并將其推到設備中運行。
不用絕望,因為 node-firefox 能幫你實現這一目標。它不是一串整體的代碼,而是一系列 node.js 模塊,每個模塊執行不同的任務,托管在各自的代碼庫中,并發布于 npm 注冊表中。只要你需要,你可以在腳本或任務運行器中盡情使用這些模塊,因此,你終于不用離開命令行就能構建并運行應用了。
行動是金,雄辯是銀
說了這么多,現在讓我們看看如何編寫一個能啟動模擬器的腳本吧!
首先使用 npm 指令在項目中安裝模塊:
npm install --save node-firefox-start-simulator
下面是寫好的腳本:
var startSimulator = require('node-firefox-start-simulator');
startSimulator({ version: '2.2' })
.then(function(simulator) {
console.log('Listening in port', simulator.port);
});
好啦!只需幾行代碼,你就能以編程方式啟動2.2版本的模擬器。如果你不關心版本問題,就不要在startSimulator
中傳入任何參數,這樣就將啟動所發現的第一個模擬器:
startSimulator().then(function(simulator) {
// your code
});
我們還可以通過動圖查看這個過程。下圖就顯示了通過 node.js 腳本啟動模擬器、安裝應用和運行應用的所有過程:
該示例使用的代碼實際上就是 node-firefox-unistall-app的代表范例。每個node-firefox
模塊都含有一個示例文件夾,幫助你快速入門。
如我們開始所提到的,許多轉向應用開發的網頁開發者想繼續使用任務運行器,因此我們也就如何使用帶gulp的node-firefox
寫了一個示例。
讓我們運行這個default-one
任務。這樣會啟動模擬器、部署應用,再多點挑戰,還能持續關注 CSS 變化。如果你編輯并保存了任何一個應用的樣式表,文件監視器會檢測其變化并發送新的文件內容到運行時,這樣不用關閉、推進并重新啟動整個應用就可迅速替換樣式表。下面的例子將背景顏色從穩重的深藍色改變成永恒不變的 Paul Rouget 粉紅色!
實時 CSS 重載很適合搭建與試驗 UI 界面。不必重載應用并導航到你想工作的具體部分,這樣可以節省大量時間——要是當年筆者在編程安卓應用時也能用這個就好了。
但是我們還可以做得更好。default-all
任務和default-one
的功能相同,但前者是針對系統安裝的所有模擬器,因此你能同時看到所有模擬器的 CSS 改變效果:
不幸的是,模擬器2.1和2.2中存在一個問題,它們不能重載樣式表的變化,但這個問題已經存檔并會到解決。
目前我們能做什么?
當前這套模塊可幫助你找到運行時在監聽的端口,找到并啟動模擬器;連接到運行時;找到、安裝、卸載并運行應用,重載樣式表。
基本原理
你或許已經注意到一個模式,但是以防還不夠明顯,我們正在努力編寫一些簡單的模塊。每個模塊應僅執行一個動作,返回一個 Promise 并盡量減少使用依賴。
小的模塊很易理解、使用并進行測試。同樣,將來大多數 Web API 的設計目的都是服務于 Promises ,我們想編寫的代碼應著眼于未來而不是過去。此外,減少使用依賴的數量也可使新手更易熟悉模塊,因為要了解的不熟悉的新元素更少了。
最后,由于所有模塊的工作方式都相同,所有當你知道如何使用一個模塊后,你就知道了如何使用剩下的——唯一變化的就是參數和結果。
理想想法(關于我們目前還無法做到的)
有很多事情我們想知道將來能否實現,有些人稱之為特色,但我們稱之為‘理想想法’。
一個經常出現的例子即 WebCLI:與 WebIDE 相對應,你通過 WebIDE 所做的所有事情都可以通過一個命令行工具來實現。筆者不斷糾結于這兩個觀點——“這想法很棒”和“或許我們根本不需要這個,有一個任務庫就足夠了”,不過大家似乎比較喜歡這個想法,所以應該沒那么差!
還有一個很棒的特色是遇到從命令行運行卻崩潰的應用,可以使用 DevTools 調試程序。通過命令行運行應用的想法很好,但是命令行調試程序卻沒那么給力!為什么不選擇一個兩全其美的方法呢?
或者,用命令行控制任何瀏覽器都可以干凈利索,只要通過 Valence 將二者相聯系!
最后是筆者最鐘愛的夢想想法:Firefox OS 定制版。想象一下,如果我們僅僅編寫一個腳本就能創建一個空白 Firefox OS 平板,裝上我們鐘愛的應用和設置,生成整體的 Firefox OS 圖像,那么之后我們便可將其閃存到設備上。由于這不是一個二進制大對象而只是一個腳本,所以我們僅可在其函數庫中進行發布,其他人可根據版本合成或創建他們自己的 Firefox OS。
如何實現呢?
我們面臨的問題還有很多,需要很多領域的協作?;蛟S最緊急的任務是獲取更好的多平臺支持。目前,我們只能通過網絡與運行時進行交互,而不是實際的設備。另外,除了 Mac OS,對平臺的支持還極度缺乏。
另一個重要方面是測試。如果我們更早、更多、更頻繁地進行測試,將能檢測到像 CSS bug 這樣的問題,這個問題是筆者在創建gulp 演示程序時偶然發現的。我們想在幾個平臺上運行這些模塊,并讓這些模塊連接到其他不同的平臺,包括實際的設備。
當然我們需要更多模塊和更多范例!為了保證兩個人不會編寫同一個模塊,我們討論在高級項目問題跟蹤器中提出新模塊。我們非常期待見到更多的范例,或者更好的范例——使用我們的代碼將現有功能鉤嵌到其他節點模塊中。例如,可通過 firefox-app-validator-manifest模塊添加清單驗證。
還有,我們一如既往的需要你們。我們不是你們,因此我們不知道你們的需要和想法。當然,我們也不能像你們一樣使用軟件。我們需要你的輸入信息,還需要你們的貢獻!
我們期待你們使用 node-firefox 創建的成果。如果遇到任何問題,請將問題整理成文檔發給我們,或者在 irc 跟我們說。我們會在 irc.mozilla.org 中的 #apps 和 #devtools 頻道解疑答惑。
致謝
這里要不感謝 Nicola Greco 就太不厚道了, 去年夏天筆者指導過他,當時他還在 Mozilla 實習。是他提出了構建個人節點模塊的初步設想,這種模塊會幫助你開發 Firefox OS 應用。去看一下他的實習總結報告吧,真的的非常有趣且具有說明性!
非常感謝所有(極其耐心的) DevToolers:Ryan Stinnet、Alexandre Poirot、Jeff Griffiths 和 Dave Camp,他們幫助我們找到遠程服務器的方向,actors 等等。尤其感謝 Heather Arthur,他編寫了 firefox-client,使得編寫node-firefox
的方式比原來更簡便舒適。
OneAPM 是應用性能管理領域的新興領軍企業,能幫助企業用戶和開發者輕松實現:緩慢的程序代碼和 SQL 語句的實時抓取。想閱讀更多技術文章,請訪問 OneAPM 官方博客。