Yahoo! Mojito

Neha ThakerYahoo!

What is Mojito?

• Mojito is a model-view-controller (MVC) application framework .

• Built on YUI 3

• Written in JavaScript

• Cross-Platform Apps

Why Mojito?

• One Language

• Two Runtimes

• Views for Different Devices

• Progressive Enhancement

• Localization and Internationalization

What is Mojito

MVC Framework for Server + Client in One Language

Mojito Architecture

Mojito Applications

Creating a Mojito application

• Use the command-line tool mojito.

– $ mojito create app <mojito_app>

• Create a mojit

– $ mojito create mojit <mojito_app>

[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

Application Directory Structure

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" } } ]

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: []});

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>

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.

Why Mojito?

• One language

• Device aware

• Use any library (jQuery, bootstrap, Dojo …)

– With YUI

• Context aware

– Server

– Client

– Universal!

Join the Mojito community! Thanks!