Yahoo! Hack India: Hyderabad 2013 | Mojito workshop

Node.js MVC Framework

MOJITO WORKSHOP

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

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

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

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

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

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

Q&A

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

THANK YOU