Single Page Apps

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

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