MOJITOSriram IyerYahoo! Developer Network
WHAT IS MOJITO?MVC based framework for building rich web applicationsBuilt on JavascriptOpen Source                       ...
WE ALREADY HAVE A LOT OF MVC                               4
THINK ABOUT THESE CASES                          5
I WANT TO MAKE A WEB APPLICATION                                   6
CLIENT CAN HAVE CAPABLE BROWSER                                  7
CLIENT MIGHT BE FEATURE PHONE                                8
RUN YOUR CODE ON SERVER SIDE
EASY TO TRANSFER FEATURE FROM       ONE SIDE TO ANOTHERAjax fallbackSecurity riskPerformanceLatency                       ...
BACKEND AND FRONTEND DEVS CAN      HELP EACH OTHER              What is he               talking               about?!!   ...
TRADITIONAL WAY
ONE LANGUAGEMojito is written entirely in JavaScript.
TWO RUNTIMESYour application code can be configured to run on theserver or be deployed to the client.
Similar user experience on different devices
Similar user experience on different devices
Similar user experience on different devices
Similar user experience on different devices
BACKEND JAVASCRIPThttp://nodejs.org/                     17
FRONTEND JAVASCRIPThttp://yuilibrary.com                        18
MOJITSThe basic unit of composition and reuse in a Mojitoapplication is a mojit. Visually, you can think of a mojit asthe ...
WHAT A MOJIT LOOKS LIKE
MODELModels are intended to closely represent business logicentities and contain code that accesses and persists data.
CONTROLLERControllers are the command centers for mojits. They caneither do all of the work or delegate the work to models...
VIEWView files are called view templates in Mojito. Viewtemplates can contain both HTML and templating tags/expressions, s...
WAIT! WHAT ABOUT DOM
BINDERAllows event handlers to be attached to the mojitDOM node communicate with other mojits on the page andexecutes acti...
A REAL TUTORIAL
INSTALLPre-request   Node.js   npmnpm install mojito -g
CREATE A MOJITO APPLICATION
CREATE A MOJIT
DATA IN MODEL
CONTROLLER
VIEW
CONFIGURATION application.json routes.json
LET’S START IT!
RESULT
ARCHITECTURE
ARCHITECTURE
WHAT WE MISSED TODAY•   Framework Mojits•   Client side running context•   Using Multiple Mojits•   Detailed configuration...
MORE ABOUT MOJITO• http://developer.yahoo.com/cocktails/mojito/• https://github.com/yahoo/mojito/• http://developer.yahoo....
QUESTIONS?
PUTTING IT ALL TOGETHERPrevious talks   YQL   YUI   MojitoYou can use all the above Yahoo! technologies to build a full...
YQL - GATHER DATA                    42
YUI - PRESENT DATA                     43
MOJITO - BUILD AN APP     Mojito is based on YUI & NodeJS     YUI has native YQL support   Query data using YQL   Add ...
Open Hack Taiwan 2012 - Mojito intro
Open Hack Taiwan 2012 - Mojito intro
Upcoming SlideShare
Loading in …5
×

Open Hack Taiwan 2012 - Mojito intro

557 views

Published on

Mojito intro

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
557
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n----- Meeting Notes (10/10/12 18:28) -----\ntable sorting\n----- Meeting Notes (10/11/12 18:06) -----\nmove client to this ppt\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Mojito can identify the calling device by examining the HTTP header User-Agent. You create custom views for different devices, and Mojito will render and serve the correct device-specific views.\n
  • Mojito can identify the calling device by examining the HTTP header User-Agent. You create custom views for different devices, and Mojito will render and serve the correct device-specific views.\n
  • Mojito can identify the calling device by examining the HTTP header User-Agent. You create custom views for different devices, and Mojito will render and serve the correct device-specific views.\n
  • \n----- Meeting Notes (10/12/12 17:23) -----\nuse nodejs as web server\n
  • \n
  • \n
  • Client requests for data are sent to the controller, which in turn fetches data from the model, renders views and passes the data to the client\n
  • \n
  • \n
  • \n----- Meeting Notes (10/10/12 18:28) -----\nask if they know what is an template engine\n
  • \n----- Meeting Notes (10/12/12 17:23) -----\nintroduce dom , different from view\n
  • \n----- Meeting Notes (10/11/12 18:06) -----\nadd a dot before each item\n
  • \n
  • mojito is a module of nodejs\n----- Meeting Notes (10/12/12 17:23) -----\ncommand different from pre-request\n
  • \n----- Meeting Notes (10/11/12 18:06) -----\nchange make to create\n
  • \n----- Meeting Notes (10/10/12 18:28) -----\nhow to config to client and server run time\n
  • \n
  • \n
  • \n
  • In spec you can put the mojit name which you want to use inside.\n
  • \n
  • \n----- Meeting Notes (10/12/12 17:23) -----\nhello mojito\n
  • \n----- Meeting Notes (10/12/12 17:37) -----\nput it early\n
  • Add a real case run js in both side, Add which production is using mojito\n
  • Mojito comes with the built-in utility mojits that make developing applications easier.\n
  • \n
  • \n----- Meeting Notes (10/10/12 18:28) -----\nintroduce if client side support js, we can run in client side ,if client side not support js, we will run the code in server\n
  • \n
  • \n
  • \n
  • \n
  • Open Hack Taiwan 2012 - Mojito intro

    1. 1. MOJITOSriram IyerYahoo! Developer Network
    2. 2. WHAT IS MOJITO?MVC based framework for building rich web applicationsBuilt on JavascriptOpen Source 3
    3. 3. WE ALREADY HAVE A LOT OF MVC 4
    4. 4. THINK ABOUT THESE CASES 5
    5. 5. I WANT TO MAKE A WEB APPLICATION 6
    6. 6. CLIENT CAN HAVE CAPABLE BROWSER 7
    7. 7. CLIENT MIGHT BE FEATURE PHONE 8
    8. 8. RUN YOUR CODE ON SERVER SIDE
    9. 9. EASY TO TRANSFER FEATURE FROM ONE SIDE TO ANOTHERAjax fallbackSecurity riskPerformanceLatency 10
    10. 10. BACKEND AND FRONTEND DEVS CAN HELP EACH OTHER What is he talking about?!! Frontend Mi… Mmm… Backend
    11. 11. TRADITIONAL WAY
    12. 12. ONE LANGUAGEMojito is written entirely in JavaScript.
    13. 13. TWO RUNTIMESYour application code can be configured to run on theserver or be deployed to the client.
    14. 14. Similar user experience on different devices
    15. 15. Similar user experience on different devices
    16. 16. Similar user experience on different devices
    17. 17. Similar user experience on different devices
    18. 18. BACKEND JAVASCRIPThttp://nodejs.org/ 17
    19. 19. FRONTEND JAVASCRIPThttp://yuilibrary.com 18
    20. 20. MOJITSThe basic unit of composition and reuse in a Mojitoapplication is a mojit. Visually, you can think of a mojit asthe rectangular area of a page that was constructed by aMojito application.
    21. 21. WHAT A MOJIT LOOKS LIKE
    22. 22. MODELModels are intended to closely represent business logicentities and contain code that accesses and persists data.
    23. 23. CONTROLLERControllers are the command centers for mojits. They caneither do all of the work or delegate the work to models and/or views.
    24. 24. VIEWView files are called view templates in Mojito. Viewtemplates can contain both HTML and templating tags/expressions, such as Mustache or Handlebars, and arerendered into markup that is outputted to the client.
    25. 25. WAIT! WHAT ABOUT DOM
    26. 26. BINDERAllows event handlers to be attached to the mojitDOM node communicate with other mojits on the page andexecutes actions on the mojit that the binder is attached to
    27. 27. A REAL TUTORIAL
    28. 28. INSTALLPre-request  Node.js  npmnpm install mojito -g
    29. 29. CREATE A MOJITO APPLICATION
    30. 30. CREATE A MOJIT
    31. 31. DATA IN MODEL
    32. 32. CONTROLLER
    33. 33. VIEW
    34. 34. CONFIGURATION application.json routes.json
    35. 35. LET’S START IT!
    36. 36. RESULT
    37. 37. ARCHITECTURE
    38. 38. ARCHITECTURE
    39. 39. WHAT WE MISSED TODAY• Framework Mojits• Client side running context• Using Multiple Mojits• Detailed configuration• Extending Mojito
    40. 40. MORE ABOUT MOJITO• http://developer.yahoo.com/cocktails/mojito/• https://github.com/yahoo/mojito/• http://developer.yahoo.com/forum/Yahoo-Mojito/
    41. 41. QUESTIONS?
    42. 42. PUTTING IT ALL TOGETHERPrevious talks  YQL  YUI  MojitoYou can use all the above Yahoo! technologies to build a fullfledged web application. 41
    43. 43. YQL - GATHER DATA 42
    44. 44. YUI - PRESENT DATA 43
    45. 45. 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 viewhttp://developer.yahoo.com/cocktails/mojito/docs/code_exs/calling_yql.html 44

    ×