$30 off During Our Annual Pro Sale. View Details »

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. 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