4. THIS IS MOJITO
Need these:
• Personalization
• Internationalization
• Localization
• Instrumentation
• Monetization
5. 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.
6. 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
Native
Native
Maple, YUI Konfabulator BluePrint Native
Java, ObjC
Java, ObjC
Apache/PHP/JS JavaScript Apache/PHP Java
8. 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
9. 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.
10. “MOJIT”
A kind of MODULE…
or a kind of WIDGET…
…“MOJIT”
11. 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
12. MOJITO
Does not:
• Provide user interface abstractions
• Provide any magic, like having your browser
app work like a native mobile app
Does:
• Let developers write javascript everywhere
• Let developers use the same framework and
idioms
13. MOJITO: COMMAND LINE
% npm install –g mojito
% mojito help
Available commands: build, compile, create, docs,
gv, help, info, jslint, start, test, version
14. MOJITO: AN APPLICATION
Bundle things
by app or mojit
Affinity: server,
client, common
Views can be
selected by
device
The Yahoo home page for tablets is a Mojito application.It’s pretty typical, it has lots of sections.
For example, our universal header, login widget with it’s membership module api among other things– sometimes there is a team just working on thisThe center section is a basic YUI slide view– it consumes various web services so you get a mix of curated and customized contentThese sections aren’t just partial views pulled in from a file system, they are mini MVC thingys that are composed and packaged in a web page.
All that can be HARD
Java, PHP, Objective-C, Apache, SDKs, APIs, and all this different tooling for izations, testing etc.
Use the same languageWrite to a common frameworkServe (or publish ) HTML5
Now that we have a single language and framework to focus on, it’s obvious that we don’t have to think about what we’re going to build in PHP or Java or whatever, and what we’re going to send to the client to render.Take that one step further, we can see that we no longer have to think about this at design and implementation time. These decisions can be moved to RUNTIME.Search has some beta products that instrument the client and it’s connection, and decided what to render (rich or plain) and where (on the client or pre-render on node.js)
Mojito gives you the way to run in different places, but doesn’t do the device or platform specific work for you.It’s also not super easy. It helps if you know YUI and Yahoo configuration concepts.
Create – quickly generate dirstruct & boilerplateJslint – Doug Crockford’s syntax linterStart – start a node instance running mojitoTest – unit tests with YUI TestBuild – create a device container for use in Xcode (soon android SDK, Windows Phone)Compile – static asset rollups for over the wire performance optimizationDocs – generate API docs using YUI DocGv – create a graph using graphviz
Organize by mojitMojits can have their own configsCan be configured by application.json or parent mojitsRoute to mojit “instances” with routes.json
YQL provides a fast and clean API for web services that work on the server or client– perfect for Mojito
