1. Yahoo! Mojito
Neha Thaker
Yahoo!

2. What is Mojito?
• Mojito is a model-view-controller (MVC) application
framework .
• Built on YUI 3
• Written in JavaScript
• Cross-Platform Apps

3. Why Mojito?
• One Language
• Two Runtimes
• Views for Different Devices
• Progressive Enhancement
• Localization and Internationalization

4. What is Mojito
MVC Framework for Server + Client in One Language

5. Mojito Architecture

6. Mojito Applications

7. Creating a Mojito application
• Use the command-line tool mojito.
– $ mojito create app <mojito_app>
• Create a mojit
– $ mojito create mojit <mojito_app>

8. Application Directory Structure
[mojito_app]/
|-- application.json
|-- assets/
-- favicon.icon
|-- yui_modules/
-- *.{affinity}.js
|-- index.js
|-- mojits/
-- [mojit_name]
-- assets/
-- yui_modules/
`-- *.{affinity}.js
-- binders/
-- {view_name}.js
-- controller.{affinity}.js
-- defaults.json
-- definition.json
-- lang/
-- {mojit_name}_{lang}.js
-- models/
-- {model_name}.{affinity}.js
-- tests/
-- yui_modules/
`-- {module_name}.{affinity}-tests.js
-- controller.{affinity}-tests.js
`-- models/
-- {model_name}.{affinity}-tests.js
-- views/
-- {view_name}.{view_engine}.html
-- {view_name}.{device}.{view_engine}.html
|-- package.json
|-- routes.json
|-- server.js

9. Configuration
application.json
{ "settings": [ "device:android" ], "selector": "android"
},
{ "settings": [ "device:blackberry" ], "selector":
"blackberry" },
{ "settings": [ "device:iphone" ], "selector": "iphone" }
routes.json
[ { "settings": [ "master" ], "simple": { "verbs": ["get"],
"path": "/", "call": "simple.index" } } ]

10. controller.server.js
YUI.add('simple', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
index: function(ac) {
var today = new Date(),
data = {
type : 'simple',
time : { hours: today.getHours()%12, minutes: today.getMinutes()<10 ? "0" +
today.getMinutes() : today.getMinutes(), period: today.getHours()>=12 ? "p.m." : "a.m."},
show : true, hide : false,
list : [{id: 2}, {id: 1}, {id: 3} ],
hole : null,
html : "<h3 style='color:red;'>simple html</h3>”
}; ac.done(data);
}
};
}, '0.0.1', {requires: []});

11. views/index.hb.html
<div id="{{mojit_view_id}}" class="mojit">
<h2 style="color: #606; font-weight:bold;">Simple View</h2>
<div>type: {{type}}</div>
<div>time: {{#time}}{{hours}}:{{minutes}} {{period}}{{/time}}</div>
<div>show: {{#show}}{{type}}{{/show}}</div>
<div>hide: {{#hide}}{{type}}{{/hide}}</div>
<div>no show: {{^show}}{{type}}{{/show}}</div>
<div>no hide: {{^hide}}{{type}}{{/hide}}</div>
<div>list: {{#list}}{{id}}{{/list}}</div>
<div>hole: {{^hole}}no list{{/hole}}</div>
<div>html: {{{html}}}</div>
</div>

12. Products built on Mojito
• AT&T Uverse app
• Yahoo!
– Yahoo! Axis A search browser that provides a
completely new way to search and browse the web.
– Livestand – A personalized living magazine
– Yahoo! Fantasy Finance –A stock trading game
– Citizen Sports – Fantasy Premier League Football game
– Search Direct – A search feature delivering rich
components from Yahoo! Products.

13. Why Mojito?
• One language
• Device aware
• Use any library (jQuery, bootstrap, Dojo …)
– With YUI
• Context aware
– Server
– Client
– Universal!

14. Join the Mojito community!
Thanks!