Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mojito 開發 Mobile Web 實戰經驗談
Search
ddsakura
January 13, 2013
Technology
9
3.6k
Mojito 開發 Mobile Web 實戰經驗談
ddsakura
January 13, 2013
Tweet
Share
More Decks by ddsakura
See All by ddsakura
FF OS App Demo.pdf
ddsakura
1
89
Mojito and Cocktails
ddsakura
2
340
Other Decks in Technology
See All in Technology
HoneycombとOpenTelemetryでオブザーバビリティに入門してみる
sumiren
2
140
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
ビジネスとコード品質の接合点 そしてコード品質がそこに及ぼす影響 / The Intersections of Business and Engineering, and The Impact of Code Quality There
mtx2s
10
1k
実務への応用例から考える 変更に強いオブジェクト指向設計 / 20240324-ooc2024
bengo4com
7
4.5k
業務で使えるかもしれない…!?GitHub Actions の Tips 集 / CI/CD Test Night #7
ponkio_o
PRO
22
6.5k
2023 Japan AWS Jr.Championsに選出されての振り返りとこれから
hiropy877
1
130
Skaffoldを用いたGKEアプリケーションの CD(Continuous Development)
kojake_300
1
230
任意コード実行の原理
ffri
0
160
8週連続ウェビナー_イチから学ぶFivetran
cmsuzu
0
160
事業部を超えた 開発生産性向上に挑戦する
kentakozuka
5
930
現実世界の事象から学ぶSOLID原則
h0r15h0
24
9.3k
Tohoku.Tech #1 「Cursorを使ったRaspberry Piの開発」by ねこまた
jun2882
0
250
Featured
See All Featured
Writing Fast Ruby
sferik
619
59k
Designing with Data
zakiwarfel
94
4.8k
Six Lessons from altMBA
skipperchong
19
2.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
KATA
mclloyd
14
11k
Into the Great Unknown - MozCon
thekraken
10
830
YesSQL, Process and Tooling at Scale
rocio
160
13k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
RailsConf 2023
tenderlove
0
510
The Invisible Side of Design
smashingmag
293
49k
Transcript
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/ Github https://github.com/yahoo/mojito
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
Mojito Framework
重要的 components 設定檔 application.json 與 route.json Mojit = Widget +
module M - model V - view C - 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 format context configuration http://developer.yahoo.
com/cocktails/mojito/docs/intro/mojito_configuri ng.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 config use ac.config.getAppConfig()
Context Configurations [ { "settings": [ "master" ], "specs": {
... } }, { "settings": [ "environment:development" ], "specs": { ... } }, ... ]
關於Mojito的經驗之三 static asset rollup and management Mojito-Shaker npm package 透過設定檔,可以將
asset 部署到 local 或 雲端 https://github.com/yahoo/mojito-shaker 使用版本 2.0.37pr5
關於Mojito的經驗之四 適度將程式拉到 application level 共用且統一的 lib error handle ajax i18N
api call handle
關於Mojito的經驗之五 關於 template view engine handlebars http://handlebarsjs.com/ mojito 0.5 有些功能還沒有支援
partial helpers 但可以自己加入 template view engine
關於Mojito的經驗之六 mojito 可以使用其他 nodejs package 嗎? 答案當然是可以的 我們用了 async https://github.com/caolan/async
memcached https://github.com/3rd-Eden/node-memcached
關於Mojito的經驗之七 好雲端讓你上天堂! 內部 hosting environment 簡化的 deploy 步驟 可整合 CI
系統 那外部呢? Heroku Nodejitsu https://github.com/yahoo/mojito/wiki/Hosting
關於Mojito的經驗之八 還有一些提升速度的方法 gzip yts - yahoo traffic server appropriate size
images cdn
來談談前端吧 我們使用 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/
YUI 是什麼!! ......
YUI是 YUI is a free, open source JavaScript and CSS
library for building richly interactive web applications. 很常拿來比較的另一個 library 就是 JQuery
有些元件可能會重複使用 所以我們也整理了共同的函式來處理 ajax error handle 還有 UI 元件!! - Bottle
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/
測試 很重要 也是挑戰 除了功能 別忘了壓測
其他參考影片 http://www.youtube.com/watch?v=e-wspy6DicE http://www.youtube.com/watch?v=vIvFbJo1Fj8 http://www.youtube.com/watch?v=1T5KMozs6Sc
歡迎交流互動 大感謝!! 講完了!!