With Mojito developers can create ONE app for several devices while lowering costs, increasing agility and maintaining a uniform aesthetic across screens (web, mobile, tablet) The Mojito code-base that has been open sourced accelerates the development of applications by giving developers the ability to maintain a single codebase for all the connected devices and optimize the application for each device Because Mojito is built in one language, JavaScript, for client and server environments, developers enjoy increased productivity - only one code-base to test and fix

1. Yahoo! Mojito
GauravVaish
Principal Engineer, Yahoo!
Copyright © 2012 Yahoo! All rights reserved. No reproduction or distribution allowed without express written permission

2. Background
The Problem:
 Developers do not have a method for delivering high quality digital media experiences
to all popular consumer devices, without having to create applications specific to each
device, which is slow and expensive.
 Current available technologies that try to solve for this problem are proprietary, locking
developers to vendors.
The Solution: Yahoo! Cocktails

3. Yahoo! Cocktails
 “Cocktails” is a Javascript-based on-line/off-line, multi-device, cloud-ready, mobile
development platform made up of “Mojito,” a JavaScript MVC framework and
“Manhattan,” a cloud-based hosted environment, that Yahoo! announced in November
2011.
 Cocktails, created by Yahoo!, leverages and evolves open web standard
technologies, including HTML5, CSS3, JavaScript and Node.JS.
 Cocktails enables the development of hybrid applications, a new class of app that is
cross-platform yet offers native-like performance across all popular devices including
those based on iOS, Android and Windows Mobile.
 Cocktails creates a single web-based programming paradigm, which allows developers
to build apps with a native-like performance, while delivering optimal experiences for
any screen and any device.
Yahoo! announced Cocktails in November 2011

5. Yahoo! Mojito
 With Mojito developers can create ONE app for several devices while lowering
costs, increasing agility and maintaining a uniform aesthetic across screens
(web, mobile, tablet).
 The Mojito code-base that has been open sourced accelerates the development of
applications by giving developers the ability to maintain a single codebase for all the
connected devices and optimize the application for each device.
 Because Mojito is built in one language, JavaScript, for client AND server
environments, developers enjoy increased productivity - only one code-base to test and
fix.
As promised, Yahoo! open sourced Mojito on April 2nd, 2012

7. What’s Mojito?
MVC Framework for Server +
Client in
One Language

8. What’s Mojito?
Mojito
Express
Connect
Mustache YUI
Node.js
JavaScript

9. Getting Mojito
 Usingyinst + ynpm
› yroot --create mojito 4.8-20090518
• 5.x should also work
› yinstiynodejs_dev
› yinstiynpm –br current
› sudoynpm install mojito –g
› mojito test

10. “Hello, World!”
 mojito create app HelloWorldApp
 cdHelloWorldApp
 mojito create mojitHelloMojit
Now browse to
 http://localhost:8666/@HelloMojit/index

11. A minor customization
 routes.json
[
{
"settings": ["master"],
"root": {
"path": "/",
"verbs": [ "GET" ],
"call": "@HelloMojit.index"
}
]

12. Analyzing Artifacts
 application.json
 mojits
› models
› views
› controller
› assets
 assets
 autoload

13. Let’s make the app interactive…

14. The Mojit
 The User Interface
› Model + Controller + View
 The User Interaction
› Binder
 Communication Back to Server
› Form Submit
› Direct Ajax calls
› Proxied controller calls

15. Enhancing the Design
 The HTMLFrameMojit
 Composite Mojits
 External CSS
 External JavaScript
 Device specific UI

16. Componentizing Code
 Custom YUI Modules
 Autoload
› Server, Client, Common
 Model
› Server, Client, Common
› Global, Mojit specific

17. Extending Mojito
 Addons
 Middleware
 Libraries
 View Engines

18. Yahoo! Products built on Mojito
 Livestand– A personalized living magazine.
 Yahoo! Fantasy Finance – is a stock trading game that pits players against each other
and their friends for the chance to win $50,000.
 CITIZEN SPORTS - Fantasy Premier League Football – is the first major fantasy game
to allow Premier League fans to draft, manage and discuss their fantasy teams entirely
on their smartphone or tablet. Users can also play the game on their laptops; it is the
same game on all screens for all fans.
 Search Direct – Search Direct is a search feature delivering the same rich content
from Yahoo!’s products, aggregated as answers, not links, to give people the option to
immediately engage and bypass a traditional search results page.
 ….and more

19. Contact
 Yahoo! Developers
› http://developers.yahoo.com
 Yahoo! Cocktails
› http://developers.yahoo.com/cocktails
 Yahoo! Mojito
› http://developers.yahoo.com/cocktails/mojito
 Email:
› gvaish@yahoo-inc.com

20. Join the Mojito community!
Thanks!