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.

Transcript

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
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
16. Declarative Bindings in HTML
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
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
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
46. See more at http://www.fotolia.com/johnpapa