Your SlideShare is downloading. ×
SPA, Durandal and beyond...
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

SPA, Durandal and beyond...


Published on

*** Code samples can be found from: *** …

*** Code samples can be found from: ***

Single Page Applications (SPA) for the web are becoming more and more common as business strive to supply their customers with feature rich highly responsive web sites.

In this talk Mark will be first examining the anatomy of a SPA and how to use frameworks such as Durandal to achieve those ends. Mark will then take the discussion to the next level and look at how to customize Durandal and make it work in harmony with TypeScript and ASP.NET for large-scale enterprise web applications.

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. SPA, Durandal and beyond… Mark Gu (SunGard) 10/08/2013
  • 2. SPA What is SPA? all code is either retrieved in the initial page load or dynamically added no page reload DOM manipulation hash tag navigation and browser history support background async communication with web server data binding and change tracking SPA – Single Page Application
  • 3. SPA – Single Page Applicationcont. Amplify Breeze QUnit Mocha Jasmine Sammy History Backbone Ember Knockout jQuery Prototype Dojo YUI MV* Routin g
  • 4. Durandal A SPA framework that may help you accelerating web development Main features: MV* architecture HTML and JavaScript modularity Async programming model with Promises Backend agnostic Makes use of familiar libraries such as jQuery, RequireJS, Knockout, and Sammy Supports all major browsers including IE6
  • 5. Demo: Hello World Preparation create a new ASP.NET web application use NuGet to import: Durandal Durandal Router Durandal Transitions
  • 6. Durandal App Lifecycle Event Durandal Module Purpose getView() View Locator Enables the new object to return a custom view canDeactivate() View Model Allows the previous object to cancel deactivation canActivate() View Model Allows the new object to cancel activation deactivate() View Model Allows the previous object to execute custom deactivation logic activate() View Model Allows the new object to execute custom activation logic beforeBind() View Model Binder Notifies the new object before data binding occurs afterBind() View Model Binder Notifies the new object after data binding occurs viewAttached() Composition Notifies the new object when its view is attached to its parent DOM node
  • 7. Demo: Dynamic Views Make use of Razor syntax and server side tools to create dynamic HTML views UI Wrappers, e.g. HTML helpers, Display and Editor templates authentication and authorization server side configurations server side resources, e.g. string resources
  • 8. TypeScript A language for application-scale JavaScript development A typed superset of JavaScript that compiles to plain JavaScript Any browser Any host Any OS Open Source
  • 9. Demo: TypeScript Preparation Go to TypeScript’s website to download and install the Visual Studio editor plugin Install Web Essentials 2012 for Visual Studio To enable TypeScript support for 3rd party JavaScript libraries, download definition files from DefinitelyTyped Definition files can then be referenced from TypeScript files for compiler and IntelliSense to work
  • 10. Demo: Putting Everything Together ASP.NET MVC Areas Routing Loading views from server Loading scripts from server Data service abstraction Mocking responses Testing
  • 11. Durandal vs. Angular Durandal Angular MV*   Dependency injection  (via Require)  Data binding  (via Knockout)  Auto data change tracking  (via Knockout)  Async operations with Promises  (via jQuery or Q)  DOM manipulation  (via jQuery)  View composition   Routing  (via Sammy)  Pub/Sub  Extensibility  
  • 12. Resources
  • 13. Questions