1.
Caridy Patiño
Bartender at Yahoo! Mojito Team
Principal Frontend Engineer at Yahoo!
caridy@yahoo-inc.com
@caridy

2.
Introducing
Mojito

3.
Introducing
Mojito

4.
Yahoo! Cocktails is a mobile application development
platform based on open web standards.

5.
A little bit of history...

6.
The Twitter Tale

7.
Twitter launched a new version of the web
application that explicitly required javascript

8.
http://twitter.com/?_twitter_noscript=1

9.
HTML
Javascript
Content
Runtime FE Layer CDN API Layer

10.
The problem?
The app was sloooowwwww for
some users, specially mobile users.

11.
Less than a year after, Twitter re-architected
the infrastructure to get content upfront

12.
The Problem

13.
An Event Apart
#aeaatl

14.
few types of mobile web applications
that you can build today

15.
WebViews + Web App
+
nativ
Native Web
e wr
appe
r

16.
- Part of hybrid apps
- Based on WebViews*
- HTML, JS and CSS are bundled with app
- Can work offline
- Mimic native behavior

17.
Browser based apps
pure
web

18.
- 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

19.
Our Solution

20.
Javascript Everywhere

21.
https://github.com/languages

22.
http://yuilibrary.com/

23.
Ryan Dahl: “Introduction to NodeJS”
Yahoo! hosted a BayJax meetup dedicated to NodeJS
May, 2010

24.
YAF Client/Server Demo
http://photosnear.me/

25.
A Javascript MVC Framework for mobile applications,
focused on supporting multiple runtimes and
customizating per context

26.
Mojito Runtimes

27.
Javascript Runtimes

28.
A runtime is a web engine container that can run a web
application in a form of HTML, JS and CSS

29.
A mobile browser, a webview and phonegap are
examples of runtimes

30.
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

31.
Runtimes allow us to run the same web app
in different contexts

32.
Every runtime has its own characteristics, features and
security models

33.
Developing for a single runtime is not
longer an option for most products

34.
Optimization & Adaptation

35.
Optimization is about customizing the
way your app behaves per runtime, it is
about producing the right HTML, JS and
CSS per runtime

36.
Adaptation is about customizing the
UI per screen size, per connection
speed, per feature detection, etc.

37.
the race is just starting

38.
A Javascript MVC Framework for mobile applications!
https://github.com/yahoo/mojito

39.
http://meteor.com/

40.
DerbyJS
MVC framework making it easy to write realtime,
collaborative applications that run in both Node.js and
browsers
http://derbyjs.com/

41.
“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/

42.
Backbone on the Client and Server
http://nerds.airbnb.com/

43.
Mojito Today

44.
// Mojito 101
$ npm install mojito@0.5.4 -g
$ mojito version
$ mojito create app demo
$ cd ./demo
$ mojito create mojit foo
$ mojito start --context ”environment:dev”
$ curl http://localhost:8666/@foo/index

45.
// Mojito 101 (second part)
$ mojito build html5app ./
$ mojito jslint app . -p
$ mojito test app . --coverage
$ mojito docs app ./
$ mojito info ./
$ mojito help

46.
Current versions:
- mojito@0.5.4
- yui@3.8.1

47.
One last thing...

48.
http://github.com/yahoo/mojito

49.
Thanks
@caridy