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.7k
Mojito 開發 Mobile Web 實戰經驗談
ddsakura
January 13, 2013
Tweet
Share
More Decks by ddsakura
See All by ddsakura
FF OS App Demo.pdf
ddsakura
1
110
Mojito and Cocktails
ddsakura
2
450
Other Decks in Technology
See All in Technology
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
120
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
6
44k
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
470
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
4
910
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
230
mruby(PicoRuby)で ファミコン音楽を奏でる
kishima
2
470
進捗
ydah
1
210
ドキュメントはAIの味方!スタートアップのアジャイルを加速するADR
kawauso
3
460
Goss: Faiss向けの新しい本番環境対応 Goバインディング #coefl_go_jp
bengo4com
1
1.4k
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
220
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
310
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
1.7k
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
790
A Modern Web Designer's Workflow
chriscoyier
696
190k
Designing for Performance
lara
610
69k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
The Cult of Friendly URLs
andyhume
79
6.6k
Optimizing for Happiness
mojombo
379
70k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Rails Girls Zürich Keynote
gr2m
95
14k
Site-Speed That Sticks
csswizardry
10
800
Statistics for Hackers
jakevdp
799
220k
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
歡迎交流互動 大感謝!! 講完了!!