This document provides an overview of building single page applications with DurandalJS. It discusses what SPAs are and why they should be built, common SPA traits like client-side linking and lazy loading. It then demonstrates DurandalJS concepts like modularization with RequireJS, routing, data binding with Knockout, composition, and lifecycle hooks. The document also discusses how DurandalJS integrates with Angular and the future of merging the frameworks.
1. Building Single Page Apps
with DurandalJS
@kennethtruyers
www.kenneth-truyers.net
2. 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
3. Why should I build a SPA?
• Reach
• Devices, platforms, browsers
• Rich user experience
• Fluent pages through client-side navigation
• Reduced round tripping
4. Common traits
• Deep client-side linking
• Load what’s needed on page-load
• Progressively download when required
• Easy state maintenance
Single pages apps is a bad nameMeans single server loadMultiple client side pages (or screens)UX is all on the clientNot business, not security
For a web app, traditional server side does not make sense anymoreThink of it as an app more then a web siteExample: phone application which fetches screens instead of data from an API
Durandal is a framework of frameworksCoordinates different partsServer agnosticRest or XML or …
Show code Views & ViewModelsShell
ModularizationFixing JS “global”RoutingDeep linkingBackward navigationBindingSolving DOM manipulationCompositionObject & view composition, user controls, …Lifecycle & promisesLike an app asynchronous hooks
Information hiding (global)SOLID:Separation of concernsSingle responsibilityInversion of controlTesting: easy mockingOne module per file
Show how pages are separated by requireJSmodulesShow how pages get loaded incrementallyNot only views, also modulesShow module configurationsAdd toastr to projectdetails.
Fluid navigationSharing URL’s, bookmarking
Get changeset “Added Toastr to projectdetail”Show deep linkingShow route configurationShow route binding in shellAdd about pageGet changeset “Include detail page”Add contributors detail
Solving DOM access problemsDeclarative mark-up
Get changeset “Added routing for contributor detail page”Show simple data binding on About Page (title)Add valueupdate: ‘afterkeydown’Get changeset “Added simple observable”Show Computed on contributor detail (firstname + lastname)View: col-xs-10 form label, input[data-bind=value: FirstName]ViewModel: Include observable pluginobservable.defineProperty(self, 'FullName', function() { return self.contributor.FirstName + ' ' + self.contributor.LastName;});Get changeset “added computed observable”Show observable array on projects pageView: <a href="#" data-bind="click: $parent.removeProject">Remove</a>ViewModel:self.removeProject = function(project) {self.projects.remove(project);};
Show shellGet changeset “Added composition module”Show adding user control inside project detail(emptyContrib)(contribList)Show how this can be done by observing the name variable observable(viewModel, 'firstName').subscribe(function(value){ });
Show activation promise in projects.jsShow example withsetTimeoutShow cancelling page navigation in projectdetail.jsShow returning true / falseShow returning promise Require ‘plugins/dialog’self.canDeactivate = function() { return dialog.showMessage("Are you sure?", "Do you want to leave?", ["Yes", "No"]); };
ModularizationFixing global issuesRoutingDeep linkingBackward navigationBindingSolving DOM manipulationSeparation of logic / viewsCompositionObject & view composition, user controls, …Lifecycle & promisesLike an app asynchronous hooks
If you need to choose now: Durandal or Angular does not matter since they will both have an upgrade path to Angular 2.0