Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

John Papa

June 08, 2013
Tweet

More Decks by John Papa

Other Decks in Technology

Transcript

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

    a fluid UX by loading all necessary code with a single page load
  2. progressively downloads features as required mostly loaded in initial page

    load persisting state navigation, history, deep linking
  3. 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
  4. 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
  5. <section data-bind=" "> <article> <div> <img data-bind=" " /> <address

    data-bind=" "></address> <address data-bind=" "></address> </div> </article> </section>
  6. var hasChanges = ko.computed(function() { return datacontext.hasChanges(); }); var canSave

    = ko.computed(function() { return hasChanges() && !isSaving(); });
  7. <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
  8. View and ViewModel composition Dynamically load modules as needed App

    Lifecycle Async programming with promises Convention based ( customizable ) Page Navigation
  9. Life Cycle in Durandal 1.2 canActivate * canDeactivate * (old

    module) activate * deactivate * (old module) beforeBind afterBind viewAttached * When activator is present
  10. 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
  11. Rich Data - Why Do I Care? Because we do

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

    Works well with Knockout Async / Promises
  13. 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