node-firefox 二三事

編者按:本文作者為 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 提供。例如,假設我們想要列出已安裝的應用,那么可以……

  • 首先,找到 webAppsactor

  • 然后運行 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模塊都含有一個示例文件夾,幫助你快速入門。

如我們開始所提到的,許多轉向應用開發的網頁開發者想繼續使用任務運行器,因此我們也就如何使用帶gulpnode-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 官方博客。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,362評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,577評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,486評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,852評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,600評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,944評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,944評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,108評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,652評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,385評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,616評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,111評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,798評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,205評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,537評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,334評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,570評論 2 379

推薦閱讀更多精彩內容