Mojito 開發 Mobile Web 實戰經驗談

Transcript

1. Mojito 開發 Mobile Web 實戰經驗談
2. 自我介紹 Eric Chuang @ddsakura @Yahoo! Blog @ http://cire.pixnet.net
3. 這 30 Mins 我想講 什麼是 Mojito 最近用 Mojito 開發的網站 開發時用到的相關技術與經驗談
4. 什麼是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).
5. 什麼是 Mojito 簡單說它就是 Yahoo! 開源出來的 Node.js for web applications 的 MVC 解決方案
6. MVC Frameworks http://jster.net/category/mvc-frameworks
7. Mojito 的網路資源 YDN http://developer.yahoo. com/cocktails/mojito/ Github https://github.com/yahoo/mojito
8. Github 的 mojito 除了看原始碼也要看 讀我 README https://github.com/yahoo/mojito wiki https://github. com/yahoo/mojito/wiki sample code https://github. com/yahoo/mojito/tree/develop/e xamples
9. Mojito Framework
10. 重要的 components 設定檔 application.json 與 route.json Mojit = Widget + module M - model V - view C - Controller Binder 在 client-side Mojito runtime 運作的 js
11. 使用 Mojito 的服務 http://axis.yahoo.com/ http://tw.cybergeddon.yahoo.com/
12. 來看看最近用 Mojito 開發的網站 請打開 智慧型手機 的 瀏覽器 輸入 http://m.tw.bid.yahoo.com
13. 現場 Demo 一下
14. 關於Mojito的經驗之一 版本 第一次上手請用最新版 (0.5.1) 原本有試用的請升級到 > 0.5 總而言之 請用 0.5 以上版本 > 0.5 速度快很多 有些用法有點不同
15. 關於Mojito的經驗之二 善用設定檔 application.json & route.json JSON format context configuration http://developer.yahoo. com/cocktails/mojito/docs/intro/mojito_configuri ng.html
16. 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 } } }]
17. 設定檔 在Mojito內的自定設定值,可以透過下面方 式取得 require mojito-config-addon in the controller. use ac.config.get() to get the config use ac.config.getAppConfig()
18. Context Configurations [ { "settings": [ "master" ], "specs": { ... } }, { "settings": [ "environment:development" ], "specs": { ... } }, ... ]
19. 關於Mojito的經驗之三 static asset rollup and management Mojito-Shaker npm package 透過設定檔,可以將 asset 部署到 local 或 雲端 https://github.com/yahoo/mojito-shaker 使用版本 2.0.37pr5
20. 關於Mojito的經驗之四 適度將程式拉到 application level 共用且統一的 lib error handle ajax i18N api call handle
21. 關於Mojito的經驗之五 關於 template view engine handlebars http://handlebarsjs.com/ mojito 0.5 有些功能還沒有支援 partial helpers 但可以自己加入 template view engine
22. 關於Mojito的經驗之六 mojito 可以使用其他 nodejs package 嗎? 答案當然是可以的 我們用了 async https://github.com/caolan/async memcached https://github.com/3rd-Eden/node-memcached
23. 關於Mojito的經驗之七 好雲端讓你上天堂! 內部 hosting environment 簡化的 deploy 步驟 可整合 CI 系統 那外部呢？ Heroku Nodejitsu https://github.com/yahoo/mojito/wiki/Hosting
24. 關於Mojito的經驗之八 還有一些提升速度的方法 gzip yts - yahoo traffic server appropriate size images cdn
25. 來談談前端吧 我們使用 YUI 3.6 附帶一提 YUI 最新的版本是 3.8.0 http://yuilibrary.com/ 也用 LESS LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. http://lesscss.org/
26. YUI 是什麼!! ......
27. YUI是 YUI is a free, open source JavaScript and CSS library for building richly interactive web applications. 很常拿來比較的另一個 library 就是 JQuery
28. 有些元件可能會重複使用 所以我們也整理了共同的函式來處理 ajax error handle 還有 UI 元件!! - Bottle
29. Bottle UI Library provides Mobile-friendly UI components YUI Gallery Apply to our project Open! 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/
30. 測試 很重要 也是挑戰 除了功能 別忘了壓測
31. 其他參考影片 http://www.youtube.com/watch?v=e-wspy6DicE http://www.youtube.com/watch?v=vIvFbJo1Fj8 http://www.youtube.com/watch?v=1T5KMozs6Sc
32. 歡迎交流互動 大感謝!! 講完了!!