專訪 Mozilla 總部

去年 12 月去了 San Francisco,順道去參觀了 Mountain View 的 Mozilla 總部(感謝 Marketing 的 Mary Colvig 的招待!)。我自己在當天例會給了 5 min 的小 talk 介紹了 MozTW,反過來則邀請了四位 Mozilla 的員工讓我訪問,影片在 YouTube 上

如果有時間的話,請到 Universal Subtitles 幫忙上字幕!感謝!

Firefox Developers Conference 2010

週末應 Mozilla Japan 之邀,飛去東京參加 Firefox Developers Conference 2010,以下摘要聽到新知和感想。

Browsing Without Borders – Jay Sullivan

Mozilla 作為一個非營利組織,其核心目標為:維護網路的自由、開放、與創新。藉由 Firefox,Mozilla 成功達成了階段性的目標。接下來呢?

Sullivan 介紹了目前 Internet 的發展的四個面向:Mobile、Cloud、Apps、Social。這四個面向均有其創新,但也有許多現有的商業模式會影響網路的自由、開放、與創新。

  • 在行動網路上,Mozilla 會開發手機版本的 Firefox,確保單一廠商不會像 2001 年那樣壟斷網路。Mozilla 會堅持網路中立性、尤其是反對現在在行動網路電信商已經實施的不中立資費方式
  • 在雲端應用上,Mozilla 會持續投資原來稱為 Weave 的瀏覽器同步技術,讓瀏覽器能輕易的在任何地方帶來個人化體驗;也利用 Weave 處理個人資料的模式來實做真正能保障個人隱私的雲端技術。
  • 在網路應用程式的層面,Mozilla 已經發表了 Open Web App 提議,用去中心式的架構散佈軟體,以及確保創新。
  • 在社群網絡的部份,Mozilla 會繼續開發讓使用者能夠方便分享資訊的產品,同時要強調使用者能夠保有對資料的最終控制權。

有句很重要的話就是,「Without product, we are just talking」。Mozilla 會繼續發展產品與技術(例如,讓 Firefox 的執行速度追上其他瀏覽器),用產品來彰顯其核心價值。

最後的 QA,有人問了 Firefox 為何沒有 iPhone 版的老問題。我問了 Mozilla 有沒有 Firefox OS 的構想。Sullivan 說內部有討論過,但是有些細節的問題:例如市場目前還是對 Andorid 比對 Chrome OS 有興趣、這麼大的計畫在 Mozilla 的資源分配、還有使用者的觀點等等。我想這未來應該有機會 follow up。

John Resig feat. Shibuya.js

John Resig 受 Javascript 開發同好組織 Shibuya.js 之邀再度訪問日本。這個 session 以 lightening talk 的方式進行,John 佔三個,其他時間由 Shibuya.js 發表,由 Resig 給 comment。

列出幾個我記得的:

  • John Resig 的三個 talk 分別是介紹 ECMAScript 5、Processing.js 1.0、和 jQuery Mobile。
  • @gyuque 用 AudioDataAPI 在 JavaScript 上實做了調變器(JS Modulator;調變就是數據機 MODEM 這個字的前兩個字母的縮寫),把數據資料轉換成聲音。在會場上播那個聲音(跟以前撥接的聲音一樣)的時候大家都笑了;最後他把聲音信號接進小時候玩的用錄音帶紀錄資訊的電腦,然後就把資料傳進去了!在投影片上看起來是 BASIC 的程式。不過現在還沒有 Device API 因此無法達成雙向通訊,所以這部份就待續。
  • @ku 寫了一個 iPhone 程式,把 WebView 接上了自己刻的 HTTP Server;該 Server 即為 Mobile Safari 的 JS Console(不過還不能抓到 Exception)。
  • 8-p.info 的 Kato-san,幫 Chrome 寫了 MozRepl,稱為 ChromeRepl。
  • @yksk 解釋他在 pixiv 的工作,用 LABjs 增加 Javascript 在網站上的載入效率;Pixiv 因為歷史共頁同時用了很多 lib,還需要下載很多 JSON。
  • @t_wada 介紹了一些 coding 的 best practice,尤其是 testing 上的。
  • @mesc 講了一些人們對 Node.js 的誤解
  • @_fp 是 NetFront 的工程人員,他介紹了 NetFront 的 Javascript 引擎。用 C 開發,目前在 x86 上的效率可以趕上 Firefox 2 (OS: 這樣就比 IE6 還快了…)
  • Yukoba 介紹了他的作品Orto-App -- 自己寫 Complier 處理 Java MIDP 程式,轉成用 JavaScript/canvas 或 ActionScript/Flash 執行。

感覺這些東西都好厲害呀… 都要有除了「寫 JavaScript」以外的知識才做的出來。要再努力一點才行。

其他議程

JetPack

下午的沒有很認真聽跟做筆記 :(。有一些介紹性的演講,講 JetPack SDK 的寫作,展示一些 API (可以換 personas 的圖片、在 Paranoma 上顯示數字等等)。最後 Lightening Talk 之前有個論壇型式的議程,討論 HTML5 的影響。

Lightening Talk 我上去介紹了 Mozilla Taiwan。

懇親會

其實就是 Party 啦!有酒、Buffet 啥的。同時舉辦 Lightening Talk (Part II)和抽獎。Lightening Talk 時有一位熱血 developer 展示了把 accerometer API 接上了 AudioDataAPI,結果電腦就變成拿起來搖音波就會改變的東西 😛

在 Mozilla 總部負責 Release Engineering 的 John O’Duinn 和 Mitcho 表演了同步口譯 Lightening Talk!講題是 RE 蓋了多大的機房(Mac Mini 機房,因為 Mac Mini 是唯一能在同一種硬體上執行所有支援的 OS 的機器)只是為了要加快每個 commit 被完整跑完測試的時間(測試越快就越能繼續 commit 下個修改,開發速度就越快)。其中手機機房更是驚人 -- 基本上是個四面都是金屬,屏蔽外界訊號的房間,裡面用木架布鞋櫃放一台一台的手機(要屏蔽的原因是因為訊號的變化會導致手機把運算轉向到其他服務,讓軟體效能測試無法正確進行)。

抽獎的時候送了一些 T-shirt、外套、大獎是小隻 FoxKeh。更後面的獎是三個 Firefox 滑鼠墊,瀧田(代表理事,Mozilla Japan 的頭)說要請 John Resig 簽名的時候大家都 high 起來了。最後抽獎方式是和 Resig 剪刀石頭布XD

活動的其他

回來 Bob 才說,他們辦活動都會準備同步口譯,日翻英、英翻日。像我在台上的時候下面大部分的人就都戴耳機這樣。另外,參加人數大約近 300 人,年紀最小的也有對技術有興趣的中學生。感覺東京的 Web Developer 很多呀 …… 不過他們有點太害羞了,在懇親會的時候有段時間竟然是我和 John Resig 和兩個口譯在聊天,哈哈。John Resig 滿有趣的,最後在休息室準備離開之前,還戴了 Foxmosa 耳朵抱著 Foxkeh 拍了這張很萌(?)的照片:

John Resig featuring Foxkeh and Foxmosa ears

當面也討論了有沒有機會請他來台灣的事宜。他希望亞洲這邊能喬好,讓他能夠飛一趟就能巡迴演講到所有地方。這就要各地 Mozilla 社群、或是 jQuery 社群的幫忙了(台灣有人願意喊聲接辦活動嗎?)

東京其他

除了活動,我還去了新宿、歌舞伎町、明治神宮和台場的未來科學博物館。星期五的新宿都是一群一群找居酒屋、剛下班的上班族。明治神宮星期天有很多帶小朋友去過七五三節的家長,小朋友都穿的很正式的樣子。台場的未來科學博物館有一些特別的東西,其中一個是用黑白彈珠演示網路的封包傳遞。不過我時間沒量好,在台場超匆忙的,只逛了博物館就離開了。

東京是個只要知道地鐵跟 JR 怎麼坐就可以到處去的地方,但是有一次遇到被售票機吃錢,不說英文的站務員就不幫我忙了(後來不知為何錢又回來了倒是)。松山到羽田真的很方便,來回都可以坐捷運/電車到機場。不過羽田機場因為國際航廈新開幕,很多本地人去逛街,回台北的晚上整個就是滿的,我 check-in 之後趕緊逃到關外去。

HTML5 之先縮圖再上傳

為了要實現「使用者選了檔案,先用 canvas 縮圖然後當做檔案上傳」這個 idea,後來又花了一點時間把HTML5 檔案上傳改了一下。如果聽過或是看過之前的投影片就知道之前的程式碼分成三步驟:

  1. 讀檔案
  2. 組合 multipart/form-data
  3. 上傳檔案

而要實做縮圖則是加上了步驟 1.5:

  1. 把檔案轉換成 data: URL
  2. 用 <img> 載入
  3. 把圖貼進 <canvas>
  4. 把 <canvas> 的資料讀出來

然後就可以送到步驟 2 了。但是我試了半天,發現還是只能讓 Firefox 用;因為 Firefox 3 以上可以接受且上傳 binary string 組出來的 multipart/form-data;如果是 Firefox 4 (> 20100917; beta7pre) 的話,還可以用 canvas.mozGetAsFile 直接產生在硬碟裡不存在的 File 物件,送進 FormData。

Webkit 因為上述兩種做法都不存在所以行不通。直接把 binary string 送去 xhr.send() 在 Chrome 6 會錯誤,在 Chrome 7 會把字串當成 UTF-8 轉碼再傳,整個破壞掉。Google 之後發現了 BlobBuilder 和 xhr.send(blob) 這些標準 binary data 處理方式,但是試了之後還是沒有把 binary string 正確轉換成 Blob 的方法;字串一樣會被當成 UTF-8;指定 byte code 轉換成 blob 所需的 ArrayBuffer 物件瀏覽器還沒實做。

最後自暴自棄了試了一些 hack 的方法:因為 Blob 可以切割,故只要想辦法把某個長度為 255 bytes 的 ascii.bin 轉成 Blob,就可以拿來拼湊任何資料。XMLHttpRequest level 2 有定義 responseBlob,不過試了才發現瀏覽器沒實做。FileReader 和 File 物件的 hack 變成要要求使用者下載某個檔案再選。UTF-8 無法用到所有的 byte 位置,所以不能拿來湊有所有 byte 碼位的 blob。

所以啦,感想就是如果瀏覽器要實做 HTML5 要把所有功能都實做完呀,不然要做的事情拼不出來。

關於 Blob 無法表現任意資料的問題,這邊有一篇抱怨

Update: 後來發現 ArrayBuffer 在 Chrome 9 (dev) 和 Firefox 有實做,所以還是把功能加上去了。就看 Chrome 9 什麼時候變正式版?