Building single page apps with Durandal js
•Download as PPTX, PDF•
3 likes•1,981 views
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.
Recommended
Recommended
More Related Content
Similar to Building single page apps with Durandal js
Similar to Building single page apps with Durandal js (20)
Recently uploaded
Recently uploaded (20)
Building single page apps with Durandal js
- 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
- 6. Presenting DurandalJS AMD (Module loading) Data binding DOM manipulation
- 7. Architecture Client Server REST CSS RequireJS Knockout jQuery Bootstrap Views (HTML)ViewModels (JS) Durandal …
- 9. Key concepts • Modularization • Routing • Binding • Composition • Lifecycle & Promises
- 10. 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
- 12. Routing • Client-side routing • Deep linking • URL parameters • Route configuration
- 13. Demo: routing
- 14. Binding with Knockout • Three binding types • Simple properties • ObservableArrays • Computed
- 15. Demo: binding
- 16. Composition • Object composition • RequireJS and Module loading • Visual composition • Durandal feature • Compose views + viewmodels inside other views
- 18. Lifecycle & promises • Every page has “hooks” we can use to control behavior • Lifecycle: • Deactivation • Activation • Binding • Composition
- 19. Lifecycle & promises • Deactivation • canDeactivate() • deactivate() • Activation • canActivate() • activate() • Binding • binding() • bindingComplete() • Composition • attached() • compositionComplete() • detached()
- 20. Demo: Lifecycle & promises
- 21. Durandal: overview • Modularization • Routing • Binding • Composition • Lifecycle & Promises
- 22. The future of Durandal • Durandal + Angular Merge into Angular 2.0 • Bringing strong suits of each framework together
- 23. Durandal + Angular merge • Durandal • Standardized module system • Lifecycle & promises • Composition • Angular • Web components through (improved) directives • Databinding • Routing • ES6 + modern browser • Non backward-compatible
- 24. 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
- 25. Links • Demo application • github.com/Kennethtruyers/DurandalDemos • Docs & downloads • durandaljs.com • GitHub • github.com/BlueSpire/Durandal • Support • Stackoverflow • groups.google.com/forum/#!forum/durandaljs
- 26. Q & A
Editor's Notes
- Who has built a SPA?What frameworks are we using?
- 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
- Demo 1:Show simple applicationShow page logsShow network traffic
- 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