Embedded Sencha Touch Demo Code in My Blog

今天在思考怎麼在我的 blog 嵌入 Sencha Touch 的 library，之後寫 demo code 就可以看到 preview了！

首先選擇必要的 library

Sencha Touch 專案預設是用 micro-loader 載入設定在 app.json 的 js / css 檔，不過檔案太零碎需要發很多 request，若透過 internet 會拖慢速度，SDK 內同時也有提供整合的版本：

• sencha-touch.js 131KB
• sencha-touch-debug.js 514KB
• sencha-touch-all.js 671KB
• sencha-touch-all-debug.js 2.7M

各版本的用途可以參考 Using and Creating Builds，由於我需要使用到 widget，所以要選 all 的版本，sencha-touch-all.js (671KB) 雖然壓縮過了還是好肥大...

CSS 的部分，SDK 內也提供不同組的 theme 可以套：

• base.css 230KB
• bb10.css 184KB BlackBerry
• sencha-touch.css 258KB
• wp.css 194KB Windows Phone

尋找 Host Javascript / CSS 的主機

CDN 有下面幾種選擇

• Github page 具版本控管，速度OK，但有個缺點就是 file commit 後要10分鐘才能 access 到
• Google drive 最方便，放 html、js、css 都 OK
• Dropbox 速度慢，有時候還會載入失敗
• Google code host js file 會載入失敗 

把資源整合進 Codepen，然後開始寫 code 啦！

Codepen 是個線上網頁編輯器，編輯後可以即時看到，支援的語言也很多 CoffeeScript、SCSS/Sass。我覺得比 jsfiddle 好用，jsfiddle 沒有支援 SCSS，theme 也沒有 codepen好看，比較討厭的是 jsfiddle 儲存後就強迫開一個新的版本，若 blog 想 link 到最新版本還要手動更新。

在 Codepen 編輯 Sencha Touch 的程式碼後，選擇下方的 embedded codepen，可以取得 embedded 的 HTML，就可以嵌在自己的 blog 啦，而且未來若有更新，blog 這邊也可以看到，因為是同一個版本。


預覽如下

See the Pen Sencha Touch - Hello World by Brian Lin (@ys25) on CodePen