Moj ito 開發 M obile Web實戰經驗談
自我介紹Eric Chuang@ddsakura@Yahoo!Blog @ http://cire.pixnet.net
這 30 Mins 我想講什麼是 Mojito最近用 Mojito 開發的網站開發時用到的相關技術與經驗談
什麼 是MojitoYahoo! Open Source Mojito in April, 2012A JavaScript MVC framework built on YUI3for web applications.Because cli...
什麼 是 Mojito簡單說它就是 Yahoo! 開源出來的 Node.jsfor web applications 的 MVC 解決方案
MVC F rameworkshttp://jster.net/category/mvc-frameworks
Mojito 的網路資源YDN http://developer.yahoo.com/cocktails/mojito/Githubhttps://github.com/yahoo/mojito
o 除了看原 始碼也要看Gith ub 的 mojit讀我 READMEhttps://github.com/yahoo/mojitowikihttps://github.com/yahoo/mojito/wikisample codehttp...
Mojito Framework
重要的 co mponents設定檔   application.json 與 route.jsonMojit = Widget + module   M - model   V - view   C - ControllerBinder   ...
使用 M ojito 的服務http://axis.yahoo.com/http://tw.cybergeddon.yahoo.com/
近用 Mojito 開發的網站來 看看最請打開 智慧型手機 的瀏覽器 輸入http://m.tw.bid.yahoo.com
現場 Demo 一下
關於Moji to的經驗之一版本 第一次上手請用最新版 (0.5.1) 原本有試用的請升級到 > 0.5 總而言之 請用 0.5 以上版本> 0.5   速度快很多   有些用法有點不同
關於Moji to的經驗之二善用設定檔 application.json & route.json   JSON format   context configurationhttp://developer.yahoo.com/cocktail...
r oute.json [{      "settings": [ "master" ],      "root": {        "verb": ["get"],        "path": "/*",        "call": "...
設定檔在Mojito內的自定設定值,可以透過下面方式取得require mojito-config-addon in thecontroller.use ac.config.get() to get the configuse ac.confi...
Context Con figurations  [      {        "settings": [ "master" ],        "specs": {          ...        }      },      { ...
關於Moji to的經驗之三static asset rollup and management   Mojito-Shaker      npm package      透過設定檔,可以將 asset 部署到         local 或...
關於Moji to的經驗之四適度將程式拉到 application level 共用且統一的 lib  error handle  ajax  i18N  api call handle
關於Moji to的經驗之五關於 template view engine handlebars http://handlebarsjs.com/ mojito 0.5 有些功能還沒有支援    partial    helpers   但可以...
關於Moji to的經驗之六mojito 可以使用其他 nodejs package 嗎?  答案當然是可以的我們用了 async    https://github.com/caolan/async  memcached    https:/...
關於Moji to的經驗之七好雲端讓你上天堂! 內部 hosting environment  簡化的 deploy 步驟  可整合 CI 系統 那外部呢?  Heroku  Nodejitsu      https://github.com/...
關於Moji to的經驗之八還有一些提升速度的方法 gzip yts - yahoo traffic server appropriate size images cdn
來 談談前端吧我們使用 YUI 3.6 附帶一提 YUI 最新的版本是 3.8.0 http://yuilibrary.com/也用 LESS LESS extends CSS with dynamic behavior such as var...
YUI 是什麼!!            ......
YUI是YUI is a free, open source JavaScript andCSS library for building richly interactiveweb applications.很常拿來比較的另一個 librar...
些元件可能會重複使用有所以我們也整理了共同的函式來處理 ajax error handle還有 UI 元件!! - Bottle
Bottle UI Library provides Mobile-friendly UI components YUI Gallery Apply to our project Open! and welcome try it! http:/...
測試很重要也是挑戰除了功能別忘了壓測
其 他參考影片http://www.youtube.com/watch?v=e-wspy6DicEhttp://www.youtube.com/watch?v=vIvFbJo1Fj8http://www.youtube.com/watch?v=...
大感謝 !! 講完了!!歡迎交流互動
Upcoming SlideShare
Loading in …5
×

Mojito 開發 mobile web 實戰經驗談

986 views

Published on

The experience for develop mojito application

Published in: Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
986
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mojito 開發 mobile web 實戰經驗談

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

×