The experience for develop mojito application

1. Moj ito 開發 M obile 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 F rameworks
http://jster.net/category/mvc-frameworks

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

8. o 除了看原 始碼也要看
Gith ub 的 mojit
讀我 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. 重要的 co mponents
設定檔
application.json 與 route.json
Mojit = Widget + module
M - model
V - view
C - Controller
Binder
在 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 configuration
http://developer.yahoo.
com/cocktails/mojito/docs/intro/mojito_configuri
ng.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 the
controller.
use ac.config.get() to get the config
use 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 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. 大感謝 !! 講完了!!
歡迎交流互動