Mojito is an open source MVC framework for building rich web applications using JavaScript. It allows applications to run on both the server and client-side using a single codebase. Mojits are the basic reusable units that make up an application. Models handle data and business logic, views are templates that generate markup, and controllers coordinate between models and views. Mojito applications can gather data using YQL and present it with YUI components to build full-featured web apps that work across devices using a single codebase.

2. MOJITO
Sriram Iyer
Yahoo! Developer Network

3. WHAT IS MOJITO?
MVC based framework for building rich web applications
Built on Javascript
Open Source
3

4. WE ALREADY HAVE A LOT OF MVC
4

5. THINK ABOUT THESE CASES
5

6. I WANT TO MAKE A WEB APPLICATION
6

7. CLIENT CAN HAVE CAPABLE BROWSER
7

8. CLIENT MIGHT BE FEATURE PHONE
8

9. RUN YOUR CODE ON SERVER SIDE

10. EASY TO TRANSFER FEATURE FROM
ONE SIDE TO ANOTHER
Ajax fallback
Security risk
Performance
Latency
10

11. BACKEND AND FRONTEND DEVS CAN
HELP EACH OTHER
What is he
talking
about?!!
Frontend
Mi…
Mmm…
Backend

12. TRADITIONAL WAY

14. ONE LANGUAGE
Mojito is written entirely in JavaScript.

15. TWO RUNTIMES
Your application code can be configured to run on the
server or be deployed to the client.

16. Similar user experience on different devices

17. Similar user experience on different devices

18. Similar user experience on different devices

19. Similar user experience on different devices

20. BACKEND JAVASCRIPT
http://nodejs.org/
17

21. FRONTEND JAVASCRIPT
http://yuilibrary.com
18

22. MOJITS
The basic unit of composition and reuse in a Mojito
application is a mojit. Visually, you can think of a mojit as
the rectangular area of a page that was constructed by a
Mojito application.

23. WHAT A MOJIT LOOKS LIKE

24. MODEL
Models are intended to closely represent business logic
entities and contain code that accesses and persists data.

25. CONTROLLER
Controllers are the command centers for mojits. They can
either do all of the work or delegate the work to models and/
or views.

26. VIEW
View files are called view templates in Mojito. View
templates can contain both HTML and templating tags/
expressions, such as Mustache or Handlebars, and are
rendered into markup that is outputted to the client.

27. WAIT! WHAT ABOUT DOM

28. BINDER
Allows event handlers to be attached to the mojit
DOM node communicate with other mojits on the page and
executes actions on the mojit that the binder is attached to

29. A REAL TUTORIAL

30. INSTALL
Pre-request
 Node.js
 npm
npm install mojito -g

31. CREATE A MOJITO APPLICATION

32. CREATE A MOJIT

33. DATA IN MODEL

34. CONTROLLER

35. VIEW

36. CONFIGURATION
application.json
routes.json

37. LET’S START IT!

38. RESULT

39. ARCHITECTURE

40. ARCHITECTURE

41. WHAT WE MISSED TODAY
• Framework Mojits
• Client side running context
• Using Multiple Mojits
• Detailed configuration
• Extending Mojito

42. MORE ABOUT MOJITO
• http://developer.yahoo.com/cocktails/mojito/
• https://github.com/yahoo/mojito/
• http://developer.yahoo.com/forum/Yahoo-Mojito/

43. QUESTIONS?

44. PUTTING IT ALL TOGETHER
Previous talks
 YQL
 YUI
 Mojito
You can use all the above Yahoo! technologies to build a full
fledged web application.
41

45. YQL - GATHER DATA
42

46. YUI - PRESENT DATA
43

47. MOJITO - BUILD AN APP
 Mojito is based on YUI & NodeJS
 YUI has native YQL support
 Query data using YQL
 Add this to the model within your Mojit
•Display the data using the Mojit view
http://developer.yahoo.com/cocktails/mojito/docs/code_exs/calling_yql.html
44