Mojito 開發 Mobile Web 實戰經驗談

Transcript

1. Mojito 開發 Mobile Web
   實戰經驗談
   

   View Slide

2. 自我介紹
   Eric Chuang
   @ddsakura
   @Yahoo!
   Blog @ http://cire.pixnet.net
   

   View Slide

3. 這 30 Mins 我想講
   什麼是 Mojito
   最近用 Mojito 開發的網站
   開發時用到的相關技術與經驗談
   

   View Slide

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).
   

   View Slide

5. 什麼是 Mojito
   簡單說它就是 Yahoo! 開源出來的 Node.js
   for web applications 的 MVC 解決方案
   

   View Slide

6. MVC Frameworks
   http://jster.net/category/mvc-frameworks
   

   View Slide

7. Mojito 的網路資源
   YDN http://developer.yahoo.
   com/cocktails/mojito/
   Github
   https://github.com/yahoo/mojito
   

   View Slide

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
   

   View Slide

9. Mojito Framework
   

   View Slide

10. 重要的 components
    設定檔
    application.json 與 route.json
    Mojit = Widget + module
    M - model
    V - view
    C - Controller
    Binder
    在 client-side Mojito runtime 運作的 js
    

    View Slide

11. 使用 Mojito 的服務
    http://axis.yahoo.com/
    http://tw.cybergeddon.yahoo.com/
    

    View Slide

12. 來看看最近用 Mojito 開發的網站
    請打開 智慧型手機 的
    瀏覽器 輸入
    http://m.tw.bid.yahoo.com
    

    View Slide

13. 現場 Demo 一下
    

    View Slide

14. 關於Mojito的經驗之一
    版本
    第一次上手請用最新版 (0.5.1)
    原本有試用的請升級到 > 0.5
    總而言之 請用 0.5 以上版本
    > 0.5
    速度快很多
    有些用法有點不同
    

    View Slide

15. 關於Mojito的經驗之二
    善用設定檔
    application.json & route.json
    JSON format
    context configuration
    http://developer.yahoo.
    com/cocktails/mojito/docs/intro/mojito_configuri
    ng.html
    

    View Slide

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 }
    }
    }]
    

    View Slide

17. 設定檔
    在Mojito內的自定設定值,可以透過下面方
    式取得
    require mojito-config-addon in the
    controller.
    use ac.config.get() to get the config
    use ac.config.getAppConfig()
    

    View Slide

18. Context Configurations
    [
    {
    "settings": [ "master" ],
    "specs": {
    ...
    }
    },
    {
    "settings": [ "environment:development" ],
    "specs": {
    ...
    }
    },
    ...
    ]
    

    View Slide

19. 關於Mojito的經驗之三
    static asset rollup and management
    Mojito-Shaker
    npm package
    透過設定檔,可以將 asset 部署到
    local 或 雲端
    https://github.com/yahoo/mojito-shaker
    使用版本 2.0.37pr5
    

    View Slide

20. 關於Mojito的經驗之四
    適度將程式拉到 application level
    共用且統一的 lib
    error handle
    ajax
    i18N
    api call handle
    

    View Slide

21. 關於Mojito的經驗之五
    關於 template view engine
    handlebars
    http://handlebarsjs.com/
    mojito 0.5 有些功能還沒有支援
    partial
    helpers
    但可以自己加入 template view engine
    

    View Slide

22. 關於Mojito的經驗之六
    mojito 可以使用其他 nodejs package 嗎?
    答案當然是可以的
    我們用了
    async
    https://github.com/caolan/async
    memcached
    https://github.com/3rd-Eden/node-memcached
    

    View Slide

23. 關於Mojito的經驗之七
    好雲端讓你上天堂!
    內部 hosting environment
    簡化的 deploy 步驟
    可整合 CI 系統
    那外部呢？
    Heroku
    Nodejitsu
    https://github.com/yahoo/mojito/wiki/Hosting
    

    View Slide

24. 關於Mojito的經驗之八
    還有一些提升速度的方法
    gzip
    yts - yahoo traffic server
    appropriate size images
    cdn
    

    View Slide

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/
    

    View Slide

26. YUI 是什麼!!
    ......
    

    View Slide

27. YUI是
    YUI is a free, open source JavaScript and
    CSS library for building richly interactive
    web applications.
    很常拿來比較的另一個 library 就是 JQuery
    

    View Slide

28. 有些元件可能會重複使用
    所以我們也整理了共同的函式來處理
    ajax
    error handle
    還有 UI 元件!! - Bottle
    

    View Slide

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/
    

    View Slide

30. 測試
    很重要
    也是挑戰
    除了功能
    別忘了壓測
    

    View Slide

31. 其他參考影片
    http://www.youtube.com/watch?v=e-wspy6DicE
    http://www.youtube.com/watch?v=vIvFbJo1Fj8
    http://www.youtube.com/watch?v=1T5KMozs6Sc
    

    View Slide

32. 歡迎交流互動
    大感謝!! 講完了!!
    

    View Slide