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

Single Page Apps

John Papa
November 10, 2012

Single Page Apps

DevConnections - Oct 2012
- SPA Basics
- Importance of Modules
- Data Binding and MVVM with Knockout
- Navigation with Sammy
- Rich Data with Breeze

John Papa

November 10, 2012
Tweet

More Decks by John Papa

Other Decks in Technology

Transcript

  1. Single-Page Apps
    John Papa
    Twitter: @john_papa

    View Slide

  2. Agenda
    • What’s a SPA ?
    • Ravioli
    • Data binding and MVVM
    • Navigation
    • Rich data

    View Slide

  3. Why a SPA? UX is King
    As rich and responsive as a
    desktop app but built with HTML5,
    CSS and JavaScript

    View Slide

  4. What’s a SPA?
    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. You May be a SPA if …
    progressively downloads features as required
    fully (or mostly) loaded in the initial page load
    persisting important state on the client
    maintain navigation, history, deep linking

    View Slide

  6. Stop Me If You’ve Heard this Before
    • Async services
    • Client-side application logic
    • Long-lived client-side state
    • 2-way data binding (MVVM)
    • Navigation

    View Slide

  7. Demo
    Trip to a SPA

    View Slide

  8. Ravioli (aka Modules)

    View Slide

  9. Avoiding Function Spaghetti Code
    Low Code
    Re-Use
    Global
    Scope
    Pollution
    Who’s
    Responsible
    For What?

    View Slide

  10. Ravioli Code Easier to
    Maintain and
    Understand
    Separation of
    Concerns Code Re-Use

    View Slide

  11. Revealing Module Pattern
    var dataservice = (function($) {
    var baseUrl = 'http://johnpapa.net/',
    getPerson = function(id, callback) {
    var url = baseUrl + 'person/' + id;
    $.getJSON(url, function(data) {
    callback(data);
    });
    };
    return {
    getPerson: getPerson
    };
    })($);​

    View Slide

  12. Core Libraries
    Sammy.js
    breeze.js
    knockout.js
    jQuery
    DOM / AJAX
    Data Binding / MVVM
    Rich data interactivity
    Nav / History
    toastr.js
    Alerts

    View Slide

  13. Custom Ravioli
    Modularity
    is the Key
    ViewModels
    Models
    Router
    Bootstrapper
    Data Service

    View Slide

  14. Demo
    Ravioli

    View Slide

  15. Data Binding and MVVM

    View Slide

  16. Data Binding via Knockout

    var myViewModel = {
    firstName: ko.observable('John')
    };
    ko.applyBindings(myViewModel);
    Declarative
    Binding
    Create an
    Observable
    Connect the
    ViewModel to the
    View

    View Slide

  17. MVVM
    View
    Model
    ViewModel

    View Slide

  18. Bindings in a View
    data-bind="value: sessionFilter.searchText,
    valueUpdate: 'afterkeydown', escape: clearFilter"
    placeholder="filter by room, speaker, tag, title, or track"/>

    data-bind="command: forceRefreshCmd, activity:forceRefreshCmd.isExecuting">
    Refresh
    Showing sessions

    View Slide

  19. Date bindings
    1
    Filter Bindings
    2
    Session List Bindings
    3

    View Slide

  20. ViewModel’s Role
    • Application/Presentation logic
    ● Surface data on the screen and back
    ● Expose actions

    View Slide

  21. Demo
    Data Binding and MVVM

    View Slide

  22. Navigation

    View Slide

  23. Improving Perceived Performance
    Transitions and
    Animations
    Avoid
    Complete
    Page
    Refreshes
    Have the Data
    Ready to Go

    View Slide

  24. Hook into
    Navigation
    Avoid Page Refreshes
    Hook Into
    Browser
    History
    Transition Between
    Multiple Views
    Pass Parameters
    Between Views

    View Slide

  25. Capturing a Route with Sammy
    sammy.get(
    '#/sessions/:id',
    function (context) {
    vm.callback(context.params);
    presenter.transitionTo( $(viewName), path );
    }
    );
    User Clicks Route
    1
    Callback fires
    2
    Call the viewmodel
    with route parameters
    3
    Show the View
    4

    View Slide

  26. Demo
    Navigation

    View Slide

  27. Rich data

    View Slide

  28. Rich Data – Why do I Care?
    Because we do so much more than just
    get and display data

    View Slide

  29. Rich data
    Client Caching
    Change Tracking
    Queries (local or server)
    Extend the Model
    Object Graphs
    Roll Your
    Own
    http://breezejs.com
    1

    View Slide

  30. Simplify Data
    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

  31. Demo
    Rich data

    View Slide

  32. http://johnpapa.net
    http://jpapa.me/spaps
    http://jpapa.me/codecamperdemo

    View Slide

  33. Your Feedback is Important
    Please fill out a session evaluation form
    drop it off at the conference registration
    desk.
    Thank you!

    View Slide