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

1. View Slide

2. View Slide

3. Not this Kind of Spa
   

   View Slide

4. Web app that fits on a single web page
   providing a fluid UX by loading all
   necessary code with a single page load
   

   View Slide

5. Reach
   Rich User Experience
   Reduced Round Tripping
   3 R’s
   

   View Slide

6. progressively downloads features as required
   mostly loaded in initial page load
   persisting state
   navigation, history, deep linking
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

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
    

    View Slide

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
    

    View Slide

12. HTML / CSS
    Hot Towel
    Durandal
    Knockout
    Breeze
    CLIENT SERVER
    Web API
    Entity Framework
    SQL Server
    

    View Slide

13. Because you don’t want to go to the SPA without one!
    

    View Slide

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
    

    View Slide

15. View Slide

16. Declarative Bindings in HTML
    

    View Slide

17. View Slide

18. var title = ko.observable();
    
    Title
    
    
    

    View Slide

19. Tracks which
    objects are in
    the array
    

    View Slide

20. 'services/dataservice' function
    var
    return
    

    View Slide

21. 
    
    
    
    
    
    
    
    
    

    View Slide

22. When You
    Need a Value
    That Doesn’t
    Exist in the
    Web Service
    

    View Slide

23. var hasChanges = ko.computed(function() {
    return datacontext.hasChanges();
    });
    var canSave = ko.computed(function() {
    return hasChanges() && !isSaving();
    });
    

    View Slide

24. Bindings
    

    View Slide

25. data-bind="enable: allowEdit, value: price" />
    
    Built into
    Knockout
    Binding for
    Element
    Attributes
    Multiple
    Binding
    Expressions
    

    View Slide

26. View Slide

27. Building and Composing Modules
    

    View Slide

28. Routing
    

    View Slide

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

    View Slide

30. View and ViewModel composition
    Dynamically load modules as needed
    App Lifecycle
    Async programming with promises
    Convention based ( customizable )
    Page Navigation
    

    View Slide

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
    

    View Slide

32. var 'durandal/plugins/router'
    return
    function
    return 'sessions'
    Map the routes
    Activate the router
    (start listening)
    

    View Slide

33. 
    
    Compose View &
    ViewModel
    

    View Slide

34. Router
    Modal Dialog
    Setting Activate = true
    

    View Slide

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

    View Slide

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
    

    View Slide

37. View Slide

38. Rich Data
    

    View Slide

39. Rich Data - Why Do I Care?
    Because we do so much more than
    just get and display data
    

    View Slide

40. Client Caching and Sharing
    Queries
    Extend the Model
    Object Graphs
    Works well with Knockout
    Async / Promises
    

    View Slide

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
    

    View Slide

42. Track
    TimeSlot
    Room
    Speaker
    Session
    

    View Slide

43. Speaker
    

    View Slide

44. Rich Data is a Breeze
    

    View Slide

45. View Slide

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

    View Slide