Spa Architecture with Durandal and Friends

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference

Web app that fits on a single web page
providing a fluid UX by loading all
necessary code with a single page load

Navigation, history, deep linking
Persisting state
Initially loading most of its content
Download additional features as needed

Reach Rich UX
Reduced Round Tripping

Stands for Model-View-ViewModel
Not technology specific
Awesome with data binding!
MVVM is, foremost, a separation pattern

Observables are special JavaScript
objects that can notify subscribers about
changes, and can automatically detect
dependencies.

Observable Computed
Observable
Array

<div class="console-brief" title="Go to console details">
<img data-bind="attr: { src: consoleImageName }" class="img-
polaroid"/>
<address data-bind="text:Title"></address> By <span data-
bind="text: Manufactorer"></span><br />
….
</div >
var Title = ko.observable();

Notifies when items are added/removed
DOESN’T notify when object are changed
Compatible with standard array functions
Tracks the state of the array

define(['services/dataservice'], function
(dataservice) {
var games = ko.observableArray();
dataservice.getGamesPartials(games);
var vm = {
games: games,
};
});

<section class="view-list" data-bind="foreach: games">
<article class="article-container-full-width">
<div>
<img data-bind="attr: { src: imageName }"
class="img-polaroid"/>
<span data-bind="text: Title"></span> <br />
Genre: <span data-bind="text: Genre"></span>
</div>
</article>
</section>

Based on other properties and observables
Supports data binding
Enables creation of new observables

entity.finalPrice = ko.computed(function () {
return parseInt(entity.Price() * (100 -
entity.Discount()) / 100);
});

Text and
appearance

Dependency injection for JavaScript
Load only what we need, when we need
Uses the AMD pattern
Break your applications into smaller,
more manageable, units of code

Module
F
Module
E
Module
A
Module
B
Module
D
Module
C

Loading require.jsdefine(['durandal/system',
'services/logger','durandal/plugins/router','config',
'services/datacontext'],
function (system, logger,router,config,datacontext) {
var shell = {
activate: activate,
router: router
};
return shell;
function activate() {
return
datacontext.primeData().then(boot).fail(failedInitialization);
}
...
Define the module
Dependencies
Each dependency has a
corresponding object

define([“jquery”
], function ($) {
return function(){};
});

Loading require.js
Define the module
Each dependency has a
corresponding object
No more messy script tags parade
Load only what's needed, WHEN needed
Allows for nested dependencies

Handle navigation from page to page
Handle loading of resources (JS,HTML…)
Listen for app lifecycle events
Manage views

Routing

View and ViewModel composition
Dynamically load modules as needed
Fires App lifecycle events
Async programming with promises
Page navigation and deep linking
Configurable convention

Static content
Staticcontent
Dynamic
Shell area

define(['durandal/system',
'services/logger'],
function (system, logger) {
var shell = {
activate:activate
};
return shell;
logger.log('Shell loaded!');
}
});

Configure the routes
Activate the Router object
Bind away!

Based on the popular SammyJS framework
A singleton module – only one per app
Multiple ways to define routes
Mapping is done most to least specific

var router =
require('durandal/plugins/router');
router.mapRoute('consoles',
'viewmodels/consoles', 'Consoles', true);
router.mapNav('games', 'viewmodels/games',
'Games');
Requires the
router object
URL
Module Name Visible
Same as mapRoute,
but always visible.

var routes = [
{ url: 'consoles', moduleId:
'viewmodels/consoles', name: 'Consoles',
visible: true },
{ url: 'games', moduleId:'viewmodels/games',
name: 'Games', visible: true },
{ url: 'consoledetails/:id', moduleId:
'viewmodels/consoledetails', name: 'Console
Details', visible: false }];
Encapsulate the
routes in config file

define(['durandal/system',
'services/logger','durandal/plugins/router','config','services/datacon
text'],
function (system, logger,router,config,datacontext) {
var shell = {
activate: activate,
router: router
};
return shell;
return
datacontext.primeData().then(boot).fail(failedInitialization);
}
function boot() {
router.map(config.routes);
return router.activate(config.startModule);
}
});

<div class="navbar-inner navbar-secondary">
<div class="btn-group" data-
bind="foreach: router.visibleRoutes">
<a data-bind="attr: { href: hash }, css:
{ active: isActive }, html: caption"
class="btn btn-info"></a>
</div>
</div>
For each visible route…
Bind the route link
Check if link is active, if
so add css class ‘active’
And its html to the
content of the link

navigateBack()
navigateTo(url)
replaceLocation(url)
Navigate without
saving history!

canActivate
canDeactivate
Deactivate
Activate
beforeBind
afterBind
viewAttached

canActivate
canDeactivate
Deactivate
Activate
beforeBind
afterBind
viewAttached
documentAtt
aced

No consistency in callback APIs
No guarantees whatsoever
Tying callbacks kills the flow of our code

 A Promise represents the result of a
task, which may or may not have
completed.
 By using promises we wont be calling a
passed callback, but instead – return a
promise.

getGamesForConsole("xbox360", function (err, result) {
getGamesByGenre("action", function (Err, result) {
// do more stuff here
});
});
getGamesForConsle("xbox360").then(function (result) {
return getGameByGenre(result, "action");
}).fail(failFunction);

Only one success or failure will be called
Handles will always be called asyncly
Promises can be easily chained

Pure JavaScript library, 8.5kb minified
Durandal make use of Q for its promises
Make it easy to write promise based code
Allows to wrap non promise based code

var primeData = function () {
return Q.all([getLookups(), getSpeakersPartials(null, true)]);
}
function getLookups() {
return EntityQuery.from('Lookups').using(manager).execute()
.fail(queryFailed);
}

Durandal takes care of all the plumbing of
a SPA so you wont have to.
Works in a modular way, saves bandwidth
Uses KnockoutJS for its data binding
Fun!

http://durandaljs.com/documentation/
http://johnpapa.net/SPA
http://pluralsight.com/training/courses/TableOfContents?c
ourseName=single-page-apps-jumpstart
http://knockoutjs.com/documentation/introduction.html
http://channel9.msdn.com/Events/TechEd/NorthAmerica/2
013/DEV-B350#fbid=K3XtHQDs9Q3

Spa Architecture with Durandal and Friends

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (15)

Similar a Spa Architecture with Durandal and Friends

Similar a Spa Architecture with Durandal and Friends (20)

Último

Último (20)

Spa Architecture with Durandal and Friends