This slide is talking about YAHOO! Cocktails and Mojito @osdc.tw event

1. Cocktails – Shaken, Not Stirred
Product engineering, APAC
F2E & Mobile Team
Eric Chuang

2. I am…
 Eric Chuang/ ddsakura / 賽拉維.柯南
 YAHOO! Product engineering, APAC, F2E & Mobile Team
 We built
2 4/14/2012

3. Outline
Yahoo! Presentation, Confidential 3 4/14/2012

4. Cocktails is
 an alcoholic mixed drink that contains two or more ingredients — at
least one of the ingredients must be a spirit.
4 4/14/2012

5. Cocktails is also
 a mix of HTML5, NodeJS, CSS3, YUI and a lot of ingenious, creative
mind-bending tricks from Yahoo!
5 4/14/2012

6. Cocktails and YUI
 YUI is a free, open source JavaScript and CSS framework for building
richly interactive web applications
› http://developer.yahoo.com/yui/
› https://github.com/yui
 YUI3 is a foundation for Cocktails
 Mojito built using YUI3
› Mostly subset of Mojito : YUI App Framework
6 4/14/2012

7. Eating your own dog food
 We’ve been working with Cocktails for a while internally
› building hybrid apps like Yahoo! Livestand. http://itunes.apple.com/us/app/livestand-
from-yahoo!/id469314404?mt=8
› Fantasy Finance, a Web site. http://finance.yahoo.com/fantasy-finance
› Fantasy Premier League Football, a mobile Web app.
http://uk.premierleague.fantasysports.yahoo.com/
7 4/14/2012

8. Mojito is
 Mojito (/moʊˈhiˈto/)
ʊ
› It is a kind of cocktail
8 4/14/2012

9. Mojito is
 Mojito is a MVC application framework built on YUI 3.
 One Language
› Mojito allows developers to write client and server components in the same language
- JavaScript, using the same framework.
 Two Runtimes
› Mojito can run on the client (in the browser) and on the server (with Node.js).
 In addition, Mojito has built-in support for internationalization and
testing
9 4/14/2012

10. The idea is
From Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 10 4/14/2012

11. The idea is
From Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 11 4/14/2012

12. The idea is
From Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 12 4/14/2012

13. Mojito is open!
 http://developer.yahoo.com/cocktails/mojito/
 https://github.com/yahoo/mojito/
13 4/14/2012

14. Mojito application concept
14 4/14/2012

15. Mojito application directory structure
15 4/14/2012

16. DEMO - Hello World
 Install nodejs and npm
 Get mojito from npm registry
› npm install mojito -g
 Create a mojito application
› mojito create app helloworld
 Create a mojit in application
› mojito create mojit myMojit
 Modify the controller.server.js
› vi mojits/myMojit/controller.server.js
 Run the mojito application
› mojito start
 Go to http://localhost:8666/@myMojit/index
16 4/14/2012

17. Mojito application concept
17 4/14/2012

18. Configuration
 Application Configuration
› The application is configured in the
application.json file in the application
directory.
› http://developer.yahoo.com/cocktails/moj
ito/docs/intro/mojito_configuring.html
18 4/14/2012

19. Configuration
 Routing
[
› In Mojito, routing is the mapping of URLs {
to specific mojit actions. This section will
"settings": [ "master" ],
describe the routing configuration file
routes.json "foo index": {
"verbs": ["get"],
› http://developer.yahoo.com/cocktails/moj
ito/docs/intro/mojito_configuring.html
"path": "/",
"call": ”@myMojit.index"
}
}
]
19 4/14/2012

20. DEMO - Routing
 Create the file routes.json with the following
[
{
"settings": ["master"],
"index_route": {
"verbs": ["get"],
"path": "/index",
"call": "@myMojit.index"
}
}
]
 Run the mojito application
› mojito start
 Go to http://localhost:8666/index
20 4/14/2012

21. Views in Mojito
 The views are HTML files that can include template tags, such as
Mustache tags, and are located in the views directory
 We call these files view templates
 Naming Convention for view templates
› {controller_function}.[{device}].{rendering_engine}.html
 Example
› greeting.mu.html - This view template gets data from the greeting function of the
controller and the calling device is determined to be a Web browser.
› get_photos.iphone.mu.html - This view template gets data from the get_photos
function of the controller and the calling device is an iPhone.
› find_friend.android.mu.html - This view template gets data from the find_friend
function of the controller and the calling device is Android based.
21 4/14/2012

22. Template Engine
 Currently, the only template system allowed is Mustache, so the name
of view templates always contains mu
 http://mustache.github.com/
22 4/14/2012

23. The tools for Multi-Device
 CSS3 Media Queries
 Mojito view template
23 4/14/2012

24. DEMO – Views for different Devices
 Create index.iphone.mu.html
› cp index.mu.html index.iphone.mu.html
› vi mojits/myMojit/views/index.iphone.mu.html
 Run the mojito application
› mojito start
 Go to http://localhost:8666/index
24 4/14/2012

25. Mojito API
 Mojito has an API that includes addons and methods for handling
parameters, cookies, URLs, assets, REST
calls, globalization/localization, and more.
 http://developer.yahoo.com/cocktails/mojito/docs/api_overview/
 http://developer.yahoo.com/cocktails/mojito/api/index.html
25 4/14/2012

26. Built-in Mojits
 Mojito comes with the built-in utility mojits that make developing
applications easier.
 HTMLFrameMojit
› The HTMLFrameMojit builds the HTML skeleton of a Web page.
 LazyLoadMojit
› This allows Mojito application to load the page quickly and then lazily load parts of
the page.
 http://developer.yahoo.com/cocktails/mojito/docs/topics/mojito_frame
work_mojits.html
26 4/14/2012

27. DEMO – HTMLFrameMojit & API
 Edit application.json file
 Edit routes.json
 Edit controller file
index: function(ac) {
ac.assets.addBlob('<meta name = "viewport" content = "width=device-
width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">', 'top');
….
}
 Run the mojito application
 Go to http://localhost:8666/index
27 4/14/2012

28. DEMO – LazyLoad
 Edit application.json file
 Create and Edit container mojit
 Edit myMojit Controller
 Run the mojito application
 Go to http://localhost:8666/index
28 4/14/2012

29. Conclusion
 Cocktails is an ecosystem mix of HTML5, NodeJS, CSS3, YUI and
relative technology
 Mojito is a MVC application framework
› One language
› Two Runtimes
 Mojito is available under a BSD license
 A lot of docs are available, we can start from
http://developer.yahoo.com/cocktails/mojito/
 We also have forum to discuss this:
http://developer.yahoo.com/forum/Yahoo-Mojito
29 4/14/2012

30. Contact info
 @ddsakura
 Demo sample code https://github.com/ddsakura/mojitoHelloworld
30 4/14/2012