Mojito is a mobile application development platform by Yahoo! that utilizes open web standards to enhance web app performance, particularly catering to mobile users. The framework focuses on optimization and adaptation across various JavaScript runtimes, allowing developers to customize applications for different environments. Current tools and installation instructions for Mojito are provided, highlighting its capabilities for building and testing web applications.

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

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

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

10. HTML
Javascript
Content
Runtime FE Layer CDN API Layer

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

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

13. The Problem

14. An Event Apart
#aeaatl

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

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

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

21. Browser based apps
pure
web

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

23. Our Solution

24. Javascript Everywhere

25. https://github.com/languages

26. http://yuilibrary.com/

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

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

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

30. Mojito Runtimes

31. Javascript Runtimes

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

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

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

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

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

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

38. Optimization & Adaptation

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

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

41. the race is just starting

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

43. http://meteor.com/

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

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

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

48. Mojito Today

50. // 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

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

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

53. One last thing...

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

55. Thanks
@caridy