An intro to Yahoo's open source javascript application framework for WPP May the Fourth Be With You

2. WHAT IS MOJITO
http://developer.yahoo.com/cocktails/
Isao Yagi

3. THIS IS MOJITO

4. THESE ARE MOJITS

5. THIS IS MOJITO
Need these:
• Personalization
• Internationalization
• Localization
• Instrumentation
• Monetization

6. THIS IS MOJITO
And we need to provide our experiences
across various devices.
It needs to be accessible and inclusive.
It needs to be safe and fast.

7. PRE-MOJITO
Developers using lots of languages, tool
chains, and stacks.
Nokia
iOS
Desktop
ConnectedTV
Feature
Phones
Android
Apps
Apps
Web
Modules
Widgets
Views
Apps
Na've
Na've
Maple,
YUI
Konfabulator
BluePrint
Na've
Java,
ObjC
Java,
ObjC
Apache/PHP/JS
JavaScript
Apache/PHP
Java

8. REBOOT
Nokia
Mojito
iOS
Desktop Connected Feature Android
Apps
TV Phones Apps
Web HTML5
Widgets Modules
Views Apps APPLICATION
Modules
Native
Native
Maple, YUI MVC BluePrint
Konfabulat Native FRAMEWORK
or Java,
ObjC
Java,
ObjC
Apache/PHP/ Javascript
JavaScript Apache/ Java RUNTIME
JS PHP

9. MOJITO
• Open source github.com/yahoo/mojito
• 100% Javascript
• Build on YUI
• Runs on Node.js in the Yahoo! cloud
(Manhattan)
• Same core runtime on the browser
• Same core runtime in iOS & Android

10. MOJITO
“The web is THE platform”
-- Bruno Fernandez-Ruiz
Start with Javascript, with YUI providing
browser abstraction, libraries and patterns.
Provide a rich MVC framework with the
“Mojit” as the organizing principle.

11. “MOJIT”
A kind of MODULE…
or a kind of WIDGET…
…“MOJIT”

12. “MOJITS”
• Have models, views, controllers, and binders
• Can communicate with other mojits by
messaging
• Don’t have to know about other mojits
• Can be composed together
• Can run on server or client or both

13. MOJITO
Does not:
• Provide user interface abstractions
• Does not provide any magic, like having your
browser app work like a native mobile app
Does:
• Lets developers write javascript everywhere
• Lets developers use the same framework and
idioms

14. MOJITO: COMMAND LINE
% npm install –g mojito!
!
% mojito help!
Available commands: build, compile,
create, docs, gv, help, info,
jslint, start, test, version!

15. MOJITO: AN APPLICATION
Bundle
things
by
app
or
mojit
Affinity:
server,
client,
common
Views
can
be
selected
by
device

16. MOJITO: A VIEW
Mustache template engine (or choose your own)

17. MOJITO: A CONTROLLER ACTION

18. MOJITO: A MODEL

19. MOJITO: RUNNING ON YOUR MAC

20. THANK YOU
http://developer.yahoo.com/cocktails/
https://github.com/yahoo/mojito
isao@yahoo-inc.com