yahoo! hack india: hyderabad 2013 | mojito workshop
DESCRIPTION
Mojito (Node.js MVC) Workshop by Keshavaprasad Seshadri, Avinash ChukkaTRANSCRIPT
![Page 1: Yahoo! Hack India: Hyderabad 2013 | Mojito workshop](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c644af4a79599b3a8b4575/html5/thumbnails/1.jpg)
![Page 2: Yahoo! Hack India: Hyderabad 2013 | Mojito workshop](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c644af4a79599b3a8b4575/html5/thumbnails/2.jpg)
Node.js MVC Framework
MOJITO WORKSHOP
![Page 3: Yahoo! Hack India: Hyderabad 2013 | Mojito workshop](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c644af4a79599b3a8b4575/html5/thumbnails/3.jpg)
MOJITO WORKSHOP 3
AGENDA
• Installing mojito
• Write a simple weather app on the command line
• Extend the weather app to:
• Invoke other actions
• Show a different view on a iphone device
• Page with muliple mojits; lazy loading
13 July 2013
![Page 4: Yahoo! Hack India: Hyderabad 2013 | Mojito workshop](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c644af4a79599b3a8b4575/html5/thumbnails/4.jpg)
MOJITO WORKSHOP 4
INSTALLING MOJITO
• Download and install node from http://nodejs.org/download/
• sudo npm install mojito-cli –g
• mojito version
13 July 2013
![Page 5: Yahoo! Hack India: Hyderabad 2013 | Mojito workshop](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c644af4a79599b3a8b4575/html5/thumbnails/5.jpg)
MOJITO WORKSHOP 5
SIMPLE WEATHER APP
• Let’s write a simple app using mojito to do a YQL query to query weather of a place and display it.
• mojito create app SimpleWeatherApp
• Edit package.json
• cd SimpleWeatherApp/
• mojito create mojit Weather
• Edit routes.json and application.js
13 July 2013
![Page 6: Yahoo! Hack India: Hyderabad 2013 | Mojito workshop](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c644af4a79599b3a8b4575/html5/thumbnails/6.jpg)
MOJITO WORKSHOP 6
SIMPLE WEATHER APP
• Execute mojito to see the simple “Mojito is working” message:
• mojito start
• Edit model to fetch data from YQL, edit the controller and the template to render the data.
• Execute mojito again.
13 July 2013
![Page 7: Yahoo! Hack India: Hyderabad 2013 | Mojito workshop](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c644af4a79599b3a8b4575/html5/thumbnails/7.jpg)
MOJITO WORKSHOP 7
EXTEND THE SIMPLE WEATHER APP
• Let us now extend the simple weather app to fetch some more data, such as forecast info.
• Let us see how mojitProy can be used to:
• Invoke another action and render its data.
• Refresh the view
• Modify the weather app to use a different view on iphone.
13 July 2013
![Page 8: Yahoo! Hack India: Hyderabad 2013 | Mojito workshop](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c644af4a79599b3a8b4575/html5/thumbnails/8.jpg)
MOJITO WORKSHOP 8
PAGE WITH MULTIPLE MOJITS; LAZY LOADING
• Let us build a page with multiple mojits: a header mojit, a footer mojit,and a body mojit.
• Then, let us see how to lazy load the footer mojit.
• Add “defer”: true in the config for the mojit in the application.json
13 July 2013
![Page 9: Yahoo! Hack India: Hyderabad 2013 | Mojito workshop](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c644af4a79599b3a8b4575/html5/thumbnails/9.jpg)
Q&A
![Page 10: Yahoo! Hack India: Hyderabad 2013 | Mojito workshop](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c644af4a79599b3a8b4575/html5/thumbnails/10.jpg)
MOJITO WORKSHOP 10
REFERENCES
• http://developer.yahoo.com/cocktails/mojito/
• The apps we did in the workshop can be found at https://github.com/kbsbng/mojito-examples.
• My twitter handle: kbsbng
13 July 2013
![Page 11: Yahoo! Hack India: Hyderabad 2013 | Mojito workshop](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c644af4a79599b3a8b4575/html5/thumbnails/11.jpg)
THANK YOU