Mojito 開發 Mobile Web

實戰經驗談

自我介紹

Eric Chuang@ddsakura@Yahoo!

Blog @ http://cire.pixnet.net

這 30 Mins 我想講

什麼是 Mojito最近用 Mojito 開發的網站開發時用到的相關技術與經驗談

什麼是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).

什麼是 Mojito

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

MVC Frameworks

http://jster.net/category/mvc-frameworks

Mojito 的網路資源

YDN http://developer.yahoo.com/cocktails/mojito/

Githubhttps://github.com/yahoo/mojito

Github 的 mojito 除了看原始碼也要看

讀我 READMEhttps://github.com/yahoo/mojitowikihttps://github.com/yahoo/mojito/wikisample codehttps://github.com/yahoo/mojito/tree/develop/examples

Mojito Framework

重要的 components

設定檔application.json 與 route.json

Mojit = Widget + moduleM - model

V - viewC - Controller

Binder在 client-side Mojito runtime 運作的 js

使用 Mojito 的服務

http://axis.yahoo.com/

http://tw.cybergeddon.yahoo.com/

來看看最近用 Mojito 開發的網站

請打開 智慧型手機 的瀏覽器 輸入http://m.tw.bid.yahoo.com

現場 Demo 一下

關於Mojito的經驗之一

版本第一次上手請用最新版 (0.5.1)原本有試用的請升級到 > 0.5總而言之 請用 0.5 以上版本

> 0.5速度快很多

有些用法有點不同

關於Mojito的經驗之二

善用設定檔application.json & route.json

JSON formatcontext configuration

http://developer.yahoo.com/cocktails/mojito/docs/intro/mojito_configuring.html

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

設定檔

在Mojito內的自定設定值,可以透過下面方

式取得require mojito-config-addon in the controller.use ac.config.get() to get the configuse ac.config.getAppConfig()

Context Configurations

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

關於Mojito的經驗之三

static asset rollup and managementMojito-Shaker

npm package透過設定檔,可以將 asset 部署到

local 或 雲端https://github.com/yahoo/mojito-shaker

使用版本 2.0.37pr5

關於Mojito的經驗之四

適度將程式拉到 application level共用且統一的 lib

error handleajaxi18Napi call handle

關於Mojito的經驗之五

關於 template view enginehandlebarshttp://handlebarsjs.com/mojito 0.5 有些功能還沒有支援

partialhelpers

但可以自己加入 template view engine

關於Mojito的經驗之六

mojito 可以使用其他 nodejs package 嗎?答案當然是可以的

我們用了async

https://github.com/caolan/async

memcachedhttps://github.com/3rd-Eden/node-memcached

關於Mojito的經驗之七

好雲端讓你上天堂!內部 hosting environment

簡化的 deploy 步驟

可整合 CI 系統

那外部呢？

HerokuNodejitsu

https://github.com/yahoo/mojito/wiki/Hosting

關於Mojito的經驗之八

還有一些提升速度的方法gzipyts - yahoo traffic serverappropriate size imagescdn

來談談前端吧

我們使用 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/

YUI 是什麼!!

......

YUI是

YUI is a free, open source JavaScript and CSS library for building richly interactive web applications.

很常拿來比較的另一個 library 就是 JQuery

有些元件可能會重複使用

所以我們也整理了共同的函式來處理ajaxerror handle

還有 UI 元件!! - Bottle

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/

測試

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

其他參考影片

http://www.youtube.com/watch?v=e-wspy6DicEhttp://www.youtube.com/watch?v=vIvFbJo1Fj8http://www.youtube.com/watch?v=1T5KMozs6Sc

歡迎交流互動

大感謝!! 講完了!!