mojito 開發 mobile web 實戰經驗談
DESCRIPTION
The experience for develop mojito applicationTRANSCRIPT
![Page 1: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/1.jpg)
Mojito 開發 Mobile Web
實戰經驗談
![Page 2: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/2.jpg)
自我介紹
Eric Chuang@ddsakura@Yahoo!
Blog @ http://cire.pixnet.net
![Page 3: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/3.jpg)
這 30 Mins 我想講
什麼是 Mojito最近用 Mojito 開發的網站開發時用到的相關技術與經驗談
![Page 4: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/4.jpg)
什麼是Mojito
Yahoo! Open Source Mojito in April, 2012
A JavaScript MVC framework built on YUI3 for web applications.
Because client and server components are both written in JavaScript, Mojito can run on the client (browser) or the server (Node.js).
![Page 5: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/5.jpg)
什麼是 Mojito
簡單說它就是 Yahoo! 開源出來的 Node.js for web applications 的 MVC 解決方案
![Page 6: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/6.jpg)
MVC Frameworks
http://jster.net/category/mvc-frameworks
![Page 7: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/7.jpg)
Mojito 的網路資源
YDN http://developer.yahoo.com/cocktails/mojito/
Githubhttps://github.com/yahoo/mojito
![Page 8: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/8.jpg)
Github 的 mojito 除了看原始碼也要看
讀我 READMEhttps://github.com/yahoo/mojitowikihttps://github.com/yahoo/mojito/wikisample codehttps://github.com/yahoo/mojito/tree/develop/examples
![Page 9: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/9.jpg)
Mojito Framework
![Page 10: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/10.jpg)
重要的 components
設定檔application.json 與 route.json
Mojit = Widget + moduleM - model
V - viewC - Controller
Binder在 client-side Mojito runtime 運作的 js
![Page 11: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/11.jpg)
使用 Mojito 的服務
http://axis.yahoo.com/
http://tw.cybergeddon.yahoo.com/
![Page 12: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/12.jpg)
來看看最近用 Mojito 開發的網站
請打開 智慧型手機 的瀏覽器 輸入http://m.tw.bid.yahoo.com
![Page 13: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/13.jpg)
現場 Demo 一下
![Page 14: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/14.jpg)
關於Mojito的經驗之一
版本第一次上手請用最新版 (0.5.1)原本有試用的請升級到 > 0.5總而言之 請用 0.5 以上版本
> 0.5速度快很多
有些用法有點不同
![Page 15: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/15.jpg)
關於Mojito的經驗之二
善用設定檔application.json & route.json
JSON formatcontext configuration
http://developer.yahoo.com/cocktails/mojito/docs/intro/mojito_configuring.html
![Page 16: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/16.jpg)
route.json
[{ "settings": [ "master" ], "root": { "verb": ["get"], "path": "/*", "call": "foo-1.index" }, "foo_default": { "verb": ["post"], "path": "/foo", "call": "foo-1.post" }, "bar_default": { "verb": ["get"], "path": "/bar", "call": "bar-1.index", "params": { "page": 1, "log_request": true } }}]
![Page 17: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/17.jpg)
設定檔
在Mojito內的自定設定值,可以透過下面方
式取得require mojito-config-addon in the controller.use ac.config.get() to get the configuse ac.config.getAppConfig()
![Page 18: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/18.jpg)
Context Configurations
[ { "settings": [ "master" ], "specs": { ... } }, { "settings": [ "environment:development" ], "specs": { ... } }, ...]
![Page 19: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/19.jpg)
關於Mojito的經驗之三
static asset rollup and managementMojito-Shaker
npm package透過設定檔,可以將 asset 部署到
local 或 雲端https://github.com/yahoo/mojito-shaker
使用版本 2.0.37pr5
![Page 20: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/20.jpg)
關於Mojito的經驗之四
適度將程式拉到 application level共用且統一的 lib
error handleajaxi18Napi call handle
![Page 21: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/21.jpg)
關於Mojito的經驗之五
關於 template view enginehandlebarshttp://handlebarsjs.com/mojito 0.5 有些功能還沒有支援
partialhelpers
但可以自己加入 template view engine
![Page 22: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/22.jpg)
關於Mojito的經驗之六
mojito 可以使用其他 nodejs package 嗎?答案當然是可以的
我們用了async
https://github.com/caolan/async
memcachedhttps://github.com/3rd-Eden/node-memcached
![Page 23: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/23.jpg)
關於Mojito的經驗之七
好雲端讓你上天堂!內部 hosting environment
簡化的 deploy 步驟
可整合 CI 系統
那外部呢?
HerokuNodejitsu
https://github.com/yahoo/mojito/wiki/Hosting
![Page 24: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/24.jpg)
關於Mojito的經驗之八
還有一些提升速度的方法gzipyts - yahoo traffic serverappropriate size imagescdn
![Page 25: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/25.jpg)
來談談前端吧
我們使用 YUI 3.6附帶一提 YUI 最新的版本是 3.8.0http://yuilibrary.com/
也用 LESSLESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
http://lesscss.org/
![Page 26: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/26.jpg)
YUI 是什麼!!
......
![Page 27: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/27.jpg)
YUI是
YUI is a free, open source JavaScript and CSS library for building richly interactive web applications.
很常拿來比較的另一個 library 就是 JQuery
![Page 28: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/28.jpg)
有些元件可能會重複使用
所以我們也整理了共同的函式來處理ajaxerror handle
還有 UI 元件!! - Bottle
![Page 29: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/29.jpg)
Bottle
UI Library provides Mobile-friendly UI componentsYUI GalleryApply to our projectOpen! and welcome try it!http://zordius.github.com/yui3-gallery/gallery-bottle/http://www.yuiblog.com/blog/2013/01/07/yuiconf-2012talk-bottle-mobile-ui-library-with-montie-tsai-and-zordius-chen/
![Page 30: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/30.jpg)
測試
很重要也是挑戰除了功能別忘了壓測
![Page 31: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/31.jpg)
其他參考影片
http://www.youtube.com/watch?v=e-wspy6DicEhttp://www.youtube.com/watch?v=vIvFbJo1Fj8http://www.youtube.com/watch?v=1T5KMozs6Sc
![Page 32: Mojito 開發 mobile web 實戰經驗談](https://reader033.vdocuments.site/reader033/viewer/2022052504/554a577cb4c90531228b4ee3/html5/thumbnails/32.jpg)
歡迎交流互動
大感謝!! 講完了!!