Facebook Photo Uploadr 開發經驗分享

Facebook Photo Uploadr 是我開發的一個 Chrome app,以下使用 FPU 來簡稱之。

由於 Chrome app 一般來說都是一個 single-page app,所以我就想到可以完全使用 Google Closure Library 來開發,利用它提供的各種 widgets 來製作我的 app。

程式碼架構

應用程式的基礎頁面是一個簡單的 HTML 檔案,它除了負責基礎的頁面 layout 之外,就是載入 CSS 及 JavaScript 檔來讓整個 app 動起來,這個 HTML 檔大概長成這樣:
















所以我將整個 app 的行為都寫在 fpu.js 這個檔案裡面,它的內容結構大概如下:

(function(window, undefined){
// 利用 closure library 來製作一個 FPU.App 模組
goog.provide('FPU.App');

// 載入 closure library 的 dependencies
goog.require('goog.ui.decorate');
...

// 應用程式實際的 prototype
var App = function() { ... };

// 實作應用程式的行為
App.prototype.init = function() { .... };
...
...

// 將 FPU.App 模組跟 App prototype 綁起來
goog.exportSymbol('FPU.App', App);
})(window);

剩下的工作就是把程式完成,該載入的 dependencies (CSS or JavaScript)要顧好。

部署及發佈

如果就這樣直接發佈應用程式,那還必須把整個 closure library 包進 app 裡才行,不過還好 closure library 有提供一個 ClosureBuilder 的工具,它可以幫你把所有必須的 JS 全部 combine & compress 起來成一個 JavaScript 檔案,我的 build script (用 Python)大致上是這樣寫的:


exec_script = [CLOSURE_BUILDER,
'--output_mode=compiled',
'--compiler_jar=%s' % CLOSURE_COMPILER,
'--compiler_flags="--warning_level=QUIET"',
]

for j in JS:
exec_script.append('--compiler_flags="--js=js/%s"' % j)

for d in ROOT:
exec_script.append('--root=%s/%s' % (APPBASE, d))

exec_script.append('--namespace="FPU.App" > %s/app.js')
scrpt = ' '.join(exec_script)
os.system(scrpt % APPBASE)

其中 JS 是我額外需要載入的 JavaScript(如:jQuery),而 CLOSURE_COMPILER 則是指到 Closure Compiler 的 JAR 檔案,也就是叫它使用 closure compiler 來作整併及壓縮,接著它就會自己去看你的 JavaScript dependencies 來找出要處理的 JS 檔案,最後它就會幫我產出一個 app.js 的檔案,我只要把它放在 app 裡發佈即可,不用放入整個 closure library。

另外,我也用了不少 Closure Library 提供的 CSS 檔案,還有我自己寫的 CSS,我則是在 build script 中加入一段使用 YUI Compressor 來將 CSS 檔案全部壓縮成一個,像是這樣:


os.system('java -jar %s --type css %s > styles.min.css' % (YUI_COMPRESSOR, CSS[0]))
for c in CSS[1:]:
os.system('java -jar %s --type css %s >> styles.min.css' % (YUI_COMPRESSOR, c))

最後 CSS 的部份就只需要留一個 styles.min.css 即可。

  • 美菁 黃

    不好意思,請問這個軟體是不是移掉了呢? 因為目前點url已經無法下載了~

    • 嗯…因為 icon 有點問題,所以暫時被下架了…