Caridy PatiñoBartender at Yahoo! Mojito TeamPrincipal Frontend Engineer at Yahoo!
[email protected]@caridy
IntroducingMojito
IntroducingMojito
Yahoo! Cocktails is a mobile application development platform based on open web standards.
A little bit of history...
The Twitter Tale
Twitter launched a new version of the web application that explicitly required javascript
http://twitter.com/?_twitter_noscript=1
Runtime FE Layer CDN API Layer
HTML
Javascript
Content
The problem?The app was sloooowwwww for
some users, specially mobile users.
Less than a year after, Twitter re-architected the infrastructure to get content upfront
The Problem
An Event Apart
#aeaatl
few types of mobile web applicationsthat you can build today
+
Native Web
WebViews + Web App
native wrapper
- Part of hybrid apps- Based on WebViews*- HTML, JS and CSS are bundled with app- Can work offline- Mimic native behavior
Browser based apps
pure web
- Pure web apps- Require a browser- HTML, JS and CSS are downloaded over HTTP- Inherit the freedom of the Web- Discoverability is inherited as well
Our Solution
Javascript Everywhere
Yahoo! hosted a BayJax meetup dedicated to NodeJSMay, 2010
Ryan Dahl: “Introduction to NodeJS”
A Javascript MVC Framework for mobile applications, focused on supporting multiple runtimes and
customizating per context
Mojito Runtimes
Javascript Runtimes
A runtime is a web engine container that can run a web application in a form of HTML, JS and CSS
A mobile browser, a webview and phonegap areexamples of runtimes
Windows 8 has 4 runtimes:
- IE Start Screen Mode (Formerly known as Metro)- IE Desktop Mode- WebView (within Native Windows 8 App)- Native Windows Runtime (Windows Store apps)
https://github.com/yui/yui3/wiki/Windows-8-JavaScript-Runtimes
Runtimes allow us to run the same web appin different contexts
Every runtime has its own characteristics, features and security models
Developing for a single runtime is notlonger an option for most products
Optimization & Adaptation
Optimization is about customizing the way your app behaves per runtime, it is about producing the right HTML, JS and
CSS per runtime
Adaptation is about customizing the UI per screen size, per connection speed, per feature detection, etc.
the race is just starting
A Javascript MVC Framework for mobile applications!
https://github.com/yahoo/mojito
MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and
browsers
DerbyJS
http://derbyjs.com/
“It's agnostic to how requests are routed, which templating language you use or even if you render your HTML
on the client or the server”
http://twitter.github.com/flight/
Backbone on the Client and Server
http://nerds.airbnb.com/
Mojito Today
// Mojito 101
$ npm install [email protected] -g$ mojito version$ mojito create app demo$ cd ./demo$ mojito create mojit foo$ mojito start --context ”environment:dev”$ curl http://localhost:8666/@foo/index
// Mojito 101 (second part)
$ mojito build html5app ./$ mojito jslint app . -p$ mojito test app . --coverage $ mojito docs app ./$ mojito info ./$ mojito help
Current versions:- [email protected] [email protected]
One last thing...
Thanks@caridy