Single Page Applications with Microsoft ASP.NET

Single Page Applications with Microsoft ASP.NET

Interested in learning more about building Single Page Apps (SPA)? SPAs focus on delivering better user experiences with significant client-side interactions using JavaScript, HTML5 and CSS. Now you can get started with SPA using the ASP.NET SPA Template. This session explores the core pieces that help you build end-to-end SPA solutions including code structure and modularity, using data binding and MVVM, abstracted remote data calls, page navigation and routing, rich data features, and responsive design for mobility. Along the way, we touch on popular libraries such as Knockout, Sammy, and Breeze.

0d3794fe37746ea54926ca6878712721?s=128

John Papa

June 08, 2013
Tweet

Transcript

  1. None
  2. None
  3. Not this Kind of Spa

  4. Web app that fits on a single web page providing

    a fluid UX by loading all necessary code with a single page load
  5. Reach Rich User Experience Reduced Round Tripping 3 R’s

  6. progressively downloads features as required mostly loaded in initial page

    load persisting state navigation, history, deep linking
  7. None
  8. None
  9. None
  10. ASP.NET Ember Angular Breeze Durandal Hot Towel Uses Ember Yes

    Uses Knockout Yes Yes Yes Yes Rich Data via BreezeJS Yes Yes Yes Uses Durandal Yes Yes Navigation and History Yes Yes Yes Yes Samples
  11. ASP.NET Ember Angular Breeze Durandal Hot Towel Uses Ember Yes

    Uses Knockout Yes Yes Yes Yes Rich Data via BreezeJS Yes Yes Yes Uses Durandal Yes Yes Navigation and History Yes Yes Yes Yes Baseline Samples
  12. HTML / CSS Hot Towel Durandal Knockout Breeze CLIENT SERVER

    Web API Entity Framework SQL Server
  13. Because you don’t want to go to the SPA without

    one!
  14. ASP .NET SPA Templates Recap www.johnpapa.net/spa http://jpapa.me/spatemplates http://jpapa.me/hottowel Hot Towel

    is the ideal starting point Templates are great references
  15. None
  16. Declarative Bindings in HTML

  17. None
  18. var title = ko.observable(); <div data-bind="with: session"> <label for="title">Title</label> <input

    id="title" data-bind="value: title"/> </div>
  19. Tracks which objects are in the array

  20. 'services/dataservice' function var return

  21. <section data-bind=" "> <article> <div> <img data-bind=" " /> <address

    data-bind=" "></address> <address data-bind=" "></address> </div> </article> </section>
  22. When You Need a Value That Doesn’t Exist in the

    Web Service
  23. var hasChanges = ko.computed(function() { return datacontext.hasChanges(); }); var canSave

    = ko.computed(function() { return hasChanges() && !isSaving(); });
  24. Bindings

  25. <input type="text" data-bind="enable: allowEdit, value: price" /> <select data-bind="options: colors,

    value: selectedColor, optionsText: 'name', optionsValue: 'key'" ></select> Built into Knockout Binding for Element Attributes Multiple Binding Expressions
  26. None
  27. Building and Composing Modules

  28. Routing

  29. Transition Between Multiple Views Hook into Navigation Avoid Page Refreshes

    Hook Into Browser History
  30. View and ViewModel composition Dynamically load modules as needed App

    Lifecycle Async programming with promises Convention based ( customizable ) Page Navigation
  31. var 'durandal/plugins/router' var 'sessions' 'viewmodels/sessions' 'Sessions' true 'speakers' 'viewmodels/speakers' 'Speakers'

    true Usually in the shell.js Ideal for encapsulating config in a single object
  32. var 'durandal/plugins/router' return function return 'sessions' Map the routes Activate

    the router (start listening)
  33. <section data-bind="compose: { model: 'speakers', activate: true }"> </section> Compose

    View & ViewModel
  34. Router Modal Dialog Setting Activate = true

  35. Life Cycle in Durandal 1.2 canActivate * canDeactivate * (old

    module) activate * deactivate * (old module) beforeBind afterBind viewAttached * When activator is present
  36. Life Cycle in Durandal 2.0 canActivate * canDeactivate * (old

    module) activate deactivate * (old module) beforeBind afterBind viewAttached * When activator is present documentAttached Activate always is called in v2
  37. None
  38. Rich Data

  39. Rich Data - Why Do I Care? Because we do

    so much more than just get and display data
  40. Client Caching and Sharing Queries Extend the Model Object Graphs

    Works well with Knockout Async / Promises
  41. var query = EntityQuery.from('Speakers') .orderBy('lastName, firstName'); return manager.executeQuery(query) .then(querySucceeded) .fail(queryFailed);

    function querySucceeded(data) { speakers(data.results); } Create a query 1 Execute a query 2 Return data as observables 3
  42. Track TimeSlot Room Speaker Session

  43. Speaker

  44. Rich Data is a Breeze

  45. None
  46. See more at http://www.fotolia.com/johnpapa