This document introduces Yahoo! Cocktails and the Mojito framework. It discusses the challenges of developing web applications for complex devices and languages. Yahoo! Cocktails provides a solution through Mojito, which allows developing apps using a single JavaScript codebase that runs on both servers and clients. Mojito apps have a modular structure and provide features like unit testing and internationalization. The document demonstrates building a simple Mojito app and discusses its architecture.

1. Yahoo! 酿的酒– 浅尝 Cocktails
Yahoo! 前端工程师
廖英翔
Aug 18, 2012

2. About
廖英翔/Clay Liao
Yahoo! 前端工程师
微博/Twitter @clayliao
1

3. Agenda
 网路应用程式的新挑战
 Cocktails 解决方案
 Mojito框架介绍
 DEMO
2

4. 网路应用程式的新挑战
3

5. 1. 终端设备愈益复杂
4

6. 复杂的使用情境
圖片來源: Apple 5

7. 2. 要懂的程式语言愈来愈多
6

8. 工程师必须身怀绝技
 PHP/Java/ASP/.Net
 Python/Ruby/Perl
 JavaScript
 CSS
 HTML
 YUI/jQuery
 Node.js
 …
圖片來源
7

9. 3. 一个产品 多个 Codebase
8

10. The Solution: Yahoo! Cocktails
解决之道：Yahoo! Cocktails
9

11. Yahoo! Cocktails
Mojito Manhattan
圖片來源: Mojito, Manhattan
10

12. 11

13. 开源项目
http://developer.yahoo.com/cocktails/mojito/
12

15. Production-ready
 Yahoo! Axis
 Fantasy Finance
 Sportacular
 Search Direct
 …
iPhone iPad
14

16. One language, Two Runtimes
一种语言 两个运行环境
15

17. 纯正 100% JavaScript
Server Common Client
JS JS JS
16

18. Views for Different Devices
一套代码支援多种终端设备
17

19. android.mu.html blackberry.mu.html
iphone.mu.html 18

20. 更多内建支援功能
 单元测试 Unit Test
 多国语系 Internationalization
 渐进式增强 Progressive Enhancement
 …
19

21. Mojito 101: Quick Start
第一次 Mojito 就上手
20

22. Quick Start: 安装 Mojito
 Installation
$npm install mojito -g
21

23. Quick Start: 建立 Mojito App
 Create a Mojito Application
$mojito create app hello_world
$cd hello_world
$mojito create mojit myMojit
22

24. Quick Start: 打完收工
 Running the Application
$mojito start
http://localhost:8666/@myMojit/index
23

25. Architecture
Mojito
Mustache
Express
YUI 3
Connect
JavaScript Runtime (Node.js or Browser)

26. 目录结构
 application.json
 mojits
- models
- views
- controller
- assets
 assets
25

27. “Mojit”==Module + Widget
 The User Interface
- Model + Controller +
View
 The User Interaction
- Binder
26

28. DEMO:Bomberman
 多人实时在线游戏
 纯HTML/CSS/
JavaScript
 HTML5/Canvas
 CSS 3
 源码
27

29. Thank You! 28

30. Resources
 Yahoo! Cocktails
- http://developers.yahoo.com/cocktails
 Yahoo! Mojito
- http://developers.yahoo.com/cocktails/mojito
 Yahoo! Mojito Shaker
- http://developer.yahoo.com/cocktails/shaker/
29