SlideShare a Scribd company logo
1 of 26
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
Architecture
Client Server
REST
CSS
RequireJS Knockout jQuery Bootstrap
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

More Related Content

Similar to Building single page apps with Durandal js

6 weeks 6 months live project summer industrial training in cmc limited 2012
6 weeks  6 months live project summer industrial training in cmc limited  20126 weeks  6 months live project summer industrial training in cmc limited  2012
6 weeks 6 months live project summer industrial training in cmc limited 2012
CMC Limited
 

Similar to Building single page apps with Durandal js (20)

Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and concepts
 
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
 
Module2
Module2Module2
Module2
 
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSCreating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
 
Building enterprise applications on the cloud (Level 100)
Building enterprise applications on the cloud (Level 100)Building enterprise applications on the cloud (Level 100)
Building enterprise applications on the cloud (Level 100)
 
Mean stack
Mean stackMean stack
Mean stack
 
6 weeks 6 months live project summer industrial training in cmc limited 2012
6 weeks  6 months live project summer industrial training in cmc limited  20126 weeks  6 months live project summer industrial training in cmc limited  2012
6 weeks 6 months live project summer industrial training in cmc limited 2012
 
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsComparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAs
 
Microservices in Azure
Microservices in AzureMicroservices in Azure
Microservices in Azure
 
Angular js
Angular jsAngular js
Angular js
 
Angular js
Angular jsAngular js
Angular js
 
Introduction to node.js by jiban
Introduction to node.js by jibanIntroduction to node.js by jiban
Introduction to node.js by jiban
 
From desktop to the cloud with forge
From desktop to the cloud with forgeFrom desktop to the cloud with forge
From desktop to the cloud with forge
 
Angular js
Angular jsAngular js
Angular js
 
Angular patterns
Angular patternsAngular patterns
Angular patterns
 
Forge - DevCon 2016: From Desktop to the Cloud with Forge
Forge - DevCon 2016: From Desktop to the Cloud with ForgeForge - DevCon 2016: From Desktop to the Cloud with Forge
Forge - DevCon 2016: From Desktop to the Cloud with Forge
 
Server rendering-talk
Server rendering-talkServer rendering-talk
Server rendering-talk
 
AngularJS.pptx
AngularJS.pptxAngularJS.pptx
AngularJS.pptx
 

Recently uploaded

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Recently uploaded (20)

From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 

Building single page apps with Durandal js

Editor's Notes

  1. Who has built a SPA?What frameworks are we using?
  2. Single pages apps is a bad nameMeans single server loadMultiple client side pages (or screens)UX is all on the clientNot business, not security
  3. 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
  4. Demo 1:Show simple applicationShow page logsShow network traffic
  5. Durandal is a framework of frameworksCoordinates different partsServer agnosticRest or XML or …
  6. Show code Views & ViewModelsShell
  7. ModularizationFixing JS “global”RoutingDeep linkingBackward navigationBindingSolving DOM manipulationCompositionObject & view composition, user controls, …Lifecycle & promisesLike an app  asynchronous hooks
  8. Information hiding (global)SOLID:Separation of concernsSingle responsibilityInversion of controlTesting: easy mockingOne module per file
  9. Show how pages are separated by requireJSmodulesShow how pages get loaded incrementallyNot only views, also modulesShow module configurationsAdd toastr to projectdetails.
  10. Fluid navigationSharing URL’s, bookmarking
  11. Get changeset “Added Toastr to projectdetail”Show deep linkingShow route configurationShow route binding in shellAdd about pageGet changeset “Include detail page”Add contributors detail
  12. Solving DOM access problemsDeclarative mark-up
  13. 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);};
  14. 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){ });
  15. 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"]); };
  16. ModularizationFixing global issuesRoutingDeep linkingBackward navigationBindingSolving DOM manipulationSeparation of logic / viewsCompositionObject & view composition, user controls, …Lifecycle & promisesLike an app  asynchronous hooks
  17. If you need to choose now: Durandal or Angular  does not matter since they will both have an upgrade path to Angular 2.0