Mojito 開發 mobile web 實戰經驗談

  • 583 views
Uploaded on

The experience for develop mojito application

The experience for develop mojito application

More in: Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
583
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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