Building Single Page Apps with DurandalJS

@kennethtruyers

www.kenneth-truyers.net

What is a Single Page App?

Web app that fits on a single page. It provides fluent UX by loading all necessary data on page load and

then fetch progressively

Why should I build a SPA?

• Reach

• Devices, platforms, browsers

• Rich user experience

• Fluent pages through client-side navigation

• Reduced round tripping

Common traits

• Deep client-side linking

• Load what’s needed on page-load

• Progressively download when required

• Easy state maintenance

Demo: application overview

Presenting DurandalJS

AMD (Module loading)

Data binding

DOM manipulation

UI (optional)

Architecture

Client Server

REST

CSS

RequireJS

Knockout

jQueryBootstra

p

Views (HTML)ViewModels (JS)

Durandal

…

Demo: application code

Key concepts

• Modularization

• Routing

• Binding

• Composition

• Lifecycle & Promises

Modularization with RequireJS define(['jquery', 'knockout'], function ($, ko) {

var loaddata = function() { $.ajax( ...); }; var name = "myname";

return { activate: loaddata, name: name }; });

AMD wrap

Dependencies

Private

Public interface

Demo: Modularization

Routing

• Client-side routing

• Deep linking

• URL parameters

• Route configuration

Demo: routing

Binding with Knockout

• Three binding types

• Simple properties

• ObservableArrays

• Computed

Demo: binding

Composition

• Object composition

• RequireJS and Module loading

• Visual composition

• Durandal feature

• Compose views + viewmodels inside other views

Demo: Composition

Lifecycle & promises

• Every page has “hooks” we can use to control behavior

• Lifecycle:

• Deactivation

• Activation

• Binding

• Composition

Lifecycle & promises

• Deactivation

• canDeactivate()

• deactivate()

• Activation

• canActivate()

• activate()

• Binding

• binding()

• bindingComplete()

• Composition

• attached()

• compositionComplete()

• detached()

Demo: Lifecycle & promises

Durandal: overview

• Modularization

• Routing

• Binding

• Composition

• Lifecycle & Promises

The future of Durandal

• Durandal + Angular Merge into Angular 2.0

• Bringing strong suits of each framework together

Durandal + Angular merge

• Durandal

• Standardized module system

• Lifecycle & promises

• Composition

• Angular

• Web components through (improved) directives

• Databinding

• Routing

• ES6 + modern browser

• Non backward-compatible

How to get it?• Nuget

• Install-Package durandal• Bower

• bower install durandal• Mimosa

• mimosa skel:new durandal• Raw downloads:

• durandaljs.com

• github.com/bluespire/durandal

• Visual Studio gallery: visualstudiogallery.msdn.microsoft.com

Links

• Demo application

• github.com/Kennethtruyers/DurandalDemos

• Docs & downloads

• durandaljs.com

• GitHub

• github.com/BlueSpire/Durandal

• Support

• Stackoverflow

• groups.google.com/forum/#!forum/durandaljs

Q & A