Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Yahoo! Hack India: Hyderabad 2013 | Mojito workshop

1,209 views

Published on

Mojito (Node.js MVC) Workshop by Keshavaprasad Seshadri, Avinash Chukka

  • Be the first to comment

  • Be the first to like this

Yahoo! Hack India: Hyderabad 2013 | Mojito workshop

  1. 1. Node.js MVC Framework MOJITO WORKSHOP
  2. 2. 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 2013MOJITO WORKSHOP 3
  3. 3. INSTALLING MOJITO • Download and install node from http://nodejs.org/download/ • sudo npm install mojito-cli –g • mojito version 13 July 2013MOJITO WORKSHOP 4
  4. 4. 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 2013MOJITO WORKSHOP 5
  5. 5. 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 2013MOJITO WORKSHOP 6
  6. 6. 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 2013MOJITO WORKSHOP 7
  7. 7. 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 2013MOJITO WORKSHOP 8
  8. 8. Q&A
  9. 9. 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 2013MOJITO WORKSHOP 10
  10. 10. THANK YOU

×