yahoo! hack india: hyderabad | introduction to the yahoo! mojito node.js mvc
DESCRIPTION
Introduction to the Yahoo! Mojito Node.js MVC.TRANSCRIPT
![Page 1: Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC](https://reader034.vdocuments.mx/reader034/viewer/2022050808/54c644934a7959f2328b45b3/html5/thumbnails/1.jpg)
![Page 2: Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC](https://reader034.vdocuments.mx/reader034/viewer/2022050808/54c644934a7959f2328b45b3/html5/thumbnails/2.jpg)
MojitoNode.js MVC Framework
![Page 3: Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC](https://reader034.vdocuments.mx/reader034/viewer/2022050808/54c644934a7959f2328b45b3/html5/thumbnails/3.jpg)
Mojito
Mojit = Module + Widget.
Run Javascript on client and server side using affinity.
Mojito is a multi-device MVC framework.
![Page 4: Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC](https://reader034.vdocuments.mx/reader034/viewer/2022050808/54c644934a7959f2328b45b3/html5/thumbnails/4.jpg)
History• Initiated in 2011• Intended to create highly reusable modular
codebase.• Single codebase for multiple devices.
• Official launched on April 2, 2012 at JS Conf.
• Current stable version 0.7.0
• Yahoo! Sites which use Mojit• Yahoo! Mail.• Yahoo! News search.• Yahoo! Small Business.• Yahoo! Fantasy Football.
![Page 5: Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC](https://reader034.vdocuments.mx/reader034/viewer/2022050808/54c644934a7959f2328b45b3/html5/thumbnails/5.jpg)
Design and Develop
HEADER MOJIT
FOOTER MOJIT
SIDEBAR MOJIT
MA
INPA
GE M
OJIT
MAIN PAGE CONTENT
![Page 6: Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC](https://reader034.vdocuments.mx/reader034/viewer/2022050808/54c644934a7959f2328b45b3/html5/thumbnails/6.jpg)
Architecture
application.json
routes.json
index.js
MOJITS HEADER FOOTER SIDERBAR NAV ABOUTUS_PAGE MAIN_PAGE
MODELS VIEWS controler.server.js / controler.client.js /controler.common.js TESTS
![Page 7: Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC](https://reader034.vdocuments.mx/reader034/viewer/2022050808/54c644934a7959f2328b45b3/html5/thumbnails/7.jpg)
Client & Server
MOJIT
MODEL
VIEW
MOJITPROXY
ASSETS
YUI MODULE
BINDERS CONTROLER
![Page 8: Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC](https://reader034.vdocuments.mx/reader034/viewer/2022050808/54c644934a7959f2328b45b3/html5/thumbnails/8.jpg)
DEMO TIME!
![Page 9: Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC](https://reader034.vdocuments.mx/reader034/viewer/2022050808/54c644934a7959f2328b45b3/html5/thumbnails/9.jpg)
ControllersPass values to views using Action Context
Passing parameters to binders using the Data addon
The Data addon also allows you to share page-level data
Currently the only way to do this is to pass data to the children in either the children config or parameters.
ac.data.set(‘menu', ”index");
ac.pageData.set and ac.pageData.get
ac.done({‘menu’ : ‘index’})
![Page 10: Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC](https://reader034.vdocuments.mx/reader034/viewer/2022050808/54c644934a7959f2328b45b3/html5/thumbnails/10.jpg)
Where should it run?
controller.server.jscontroller.common.jscontroller.client.js
![Page 11: Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC](https://reader034.vdocuments.mx/reader034/viewer/2022050808/54c644934a7959f2328b45b3/html5/thumbnails/11.jpg)
Views and Binders
Binder can access data sent by the controller using MojitProxy
Views can access data using Handler bar expression
Binders can call the controller using refreshView or invoke
mojitProxy.data.get(‘menu');
{{menu}}
mp.refreshView(); OR mp.invoke();
![Page 12: Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC](https://reader034.vdocuments.mx/reader034/viewer/2022050808/54c644934a7959f2328b45b3/html5/thumbnails/12.jpg)
ContextConfiguration
![Page 13: Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC](https://reader034.vdocuments.mx/reader034/viewer/2022050808/54c644934a7959f2328b45b3/html5/thumbnails/13.jpg)
Models
Models are pretty conventional. They handle all the REST API calls.
Mojito provides YQL module which are useful for fetching data.
Y.YQL("select * from weather.forecast where woeid=2295420", function(data) { callback(null,
data.query); });
![Page 14: Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC](https://reader034.vdocuments.mx/reader034/viewer/2022050808/54c644934a7959f2328b45b3/html5/thumbnails/14.jpg)
It all fits together now!
MODELVIEW
BINDER
CONTROLER
ac.done();
model.getData()
ac.d
ata.
set()
;
mp.
data
.get
();
mp.invoke();
mp.refreshView();
mp.render(); OR
![Page 15: Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC](https://reader034.vdocuments.mx/reader034/viewer/2022050808/54c644934a7959f2328b45b3/html5/thumbnails/15.jpg)
Get Started
$ npm install mojito-cli –g
$ mojito create app myapp$ cd myapp$ mojito create mojit header
Documentation @ tinyurl.com/mojitomvc
API Guide @ tinyurl.com/mojitoapi