Mojito
Node.js MVC Framework
Mojito
Mojit = Module + Widget.
Run Javascript on client and server side using affinity.
Mojito is a multi-device MVC fram...
History
• Initiated in 2011
• Intended to create highly reusable modular codebase.
• Single codebase for multiple devices....
Design and Develop
HEADER MOJIT
FOOTER MOJIT
SIDEBAR MOJIT
MAINPAGEMOJIT
MAIN PAGE CONTENT
Architecture
 application.json
 routes.json
 index.js
 MOJITS
 HEADER
 FOOTER
 SIDERBAR
 NAV
 ABOUTUS_PAGE
 MAIN...
Client & Server
MODEL
VIEW
ASSETS
YUI MODULE
BINDERS CONTROLER
DEMO TIME!
Controllers
Pass values to views using Action Context
Passing parameters to binders using the Data addon
The Data addon al...
Where should it run?
controller.server.js
controller.common.js
controller.client.js
Views and Binders
Binder can access data sent by the controller using
MojitProxy
Views can access data using Handler bar e...
Context
Configuration
Models
Models are pretty conventional. They handle all the REST
API calls.
Mojito provides YQL module which are useful for...
It all fits together now!
MODELVIEW CONTROLER
ac.done();
model.getData()
mp.invoke();
mp.refreshView();
mp.render(); OR
Get Started
$ npm install mojito-cli –g
$ mojito create app myapp
$ cd myapp
$ mojito create mojit header
Documentation @ ...
That’s all focks!
about.me/avinash.chukka
Ping me @ avin_fe@yahoo.com
Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC
Upcoming SlideShare
Loading in …5
×

Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC

956 views

Published on

Introduction to the Yahoo! Mojito Node.js MVC.

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

  • Be the first to like this

No Downloads
Views
Total views
956
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Yahoo! Hack India: Hyderabad | Introduction to the Yahoo! Mojito Node.js MVC

  1. 1. Mojito Node.js MVC Framework
  2. 2. Mojito Mojit = Module + Widget. Run Javascript on client and server side using affinity. Mojito is a multi-device MVC framework.
  3. 3. 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.
  4. 4. Design and Develop HEADER MOJIT FOOTER MOJIT SIDEBAR MOJIT MAINPAGEMOJIT MAIN PAGE CONTENT
  5. 5. 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
  6. 6. Client & Server MODEL VIEW ASSETS YUI MODULE BINDERS CONTROLER
  7. 7. DEMO TIME!
  8. 8. Controllers Pass 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’})
  9. 9. Where should it run? controller.server.js controller.common.js controller.client.js
  10. 10. 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();
  11. 11. Context Configuration
  12. 12. 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); });
  13. 13. It all fits together now! MODELVIEW CONTROLER ac.done(); model.getData() mp.invoke(); mp.refreshView(); mp.render(); OR
  14. 14. 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
  15. 15. That’s all focks! about.me/avinash.chukka Ping me @ avin_fe@yahoo.com

×