Contenu connexe Similaire à Mojito 開發 mobile web 實戰經驗談 (20) Mojito 開發 mobile web 實戰經驗談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).
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
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/
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 }
}
}]
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
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
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/
27. YUI是
YUI is a free, open source JavaScript and
CSS library for building richly interactive
web applications.
很常拿來比較的另一個 library 就是 JQuery
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/