introduction to the yahoo! mojito node.js mvc

16

Upload: avinash-chukka

Post on 26-Jun-2015

1.049 views

Category:

Technology


1 download

DESCRIPTION

Introduction to the Yahoo! Mojito Node.js MVC.

TRANSCRIPT

Page 1: Introduction to the Yahoo! Mojito Node.js MVC
Page 2: Introduction to the Yahoo! Mojito Node.js MVC

MojitoNode.js MVC Framework

Page 3: Introduction to the Yahoo! Mojito Node.js MVC

Mojito

Mojit = Module + Widget.

Run Javascript on client and server side using affinity.

Mojito is a multi-device MVC framework.

Page 4: Introduction to the Yahoo! Mojito Node.js MVC

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: Introduction to the Yahoo! Mojito Node.js MVC

Design and Develop

HEADER MOJIT

FOOTER MOJIT

SIDEBAR MOJIT

MA

INPA

GE M

OJIT

MAIN PAGE CONTENT

Page 6: Introduction to the Yahoo! Mojito Node.js MVC

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: Introduction to the Yahoo! Mojito Node.js MVC

Client & Server

MOJIT

MODEL

VIEW

MOJITPROXY

ASSETS

YUI MODULE

BINDERS CONTROLER

Page 8: Introduction to the Yahoo! Mojito Node.js MVC

DEMO TIME!

Page 9: Introduction to the Yahoo! Mojito Node.js MVC

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: Introduction to the Yahoo! Mojito Node.js MVC

Where should it run?

controller.server.jscontroller.common.jscontroller.client.js

Page 11: Introduction to the Yahoo! Mojito Node.js MVC

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: Introduction to the Yahoo! Mojito Node.js MVC

ContextConfiguration

Page 13: Introduction to the Yahoo! Mojito Node.js MVC

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: Introduction to the Yahoo! Mojito Node.js MVC

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: Introduction to the Yahoo! Mojito Node.js MVC

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

Page 16: Introduction to the Yahoo! Mojito Node.js MVC

That’s all focks!

about.me/avinash.chukka

Ping me @ [email protected]