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
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
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