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

More Decks by John Papa

Other Decks in Technology


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

  2. Agenda • What’s a SPA ? • Ravioli • Data

    binding and MVVM • Navigation • Rich data
  3. Why a SPA? UX is King As rich and responsive

    as a desktop app but built with HTML5, CSS and JavaScript
  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
  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
  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
  7. Demo Trip to a SPA

  8. Ravioli (aka Modules)

  9. Avoiding Function Spaghetti Code Low Code Re-Use Global Scope Pollution

    Who’s Responsible For What?
  10. Ravioli Code Easier to Maintain and Understand Separation of Concerns

    Code Re-Use
  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 }; })($);​
  12. Core Libraries Sammy.js breeze.js knockout.js jQuery DOM / AJAX Data

    Binding / MVVM Rich data interactivity Nav / History toastr.js Alerts
  13. Custom Ravioli Modularity is the Key ViewModels Models Router Bootstrapper

    Data Service
  14. Demo Ravioli

  15. Data Binding and MVVM

  16. Data Binding via Knockout <input data-bind="value: firstName" /> var myViewModel

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

  18. Bindings in a View <input class="filter-box" type="text" data-bind="value: sessionFilter.searchText, valueUpdate:

    'afterkeydown', escape: clearFilter" placeholder="filter by room, speaker, tag, title, or track"/> <a class="clear-text" data-bind="click: clearFilter" title="Clear"></a> <button class="refresh" data-bind="command: forceRefreshCmd, activity:forceRefreshCmd.isExecuting"> Refresh</button> <small>Showing <span data-bind="text:sessions().length"></span>sessions</small>
  19. Date bindings 1 Filter Bindings 2 Session List Bindings 3

  20. ViewModel’s Role • Application/Presentation logic • Surface data on the

    screen and back • Expose actions
  21. Demo Data Binding and MVVM

  22. Navigation

  23. Improving Perceived Performance Transitions and Animations Avoid Complete Page Refreshes

    Have the Data Ready to Go
  24. Hook into Navigation Avoid Page Refreshes Hook Into Browser History

    Transition Between Multiple Views Pass Parameters Between Views
  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
  26. Demo Navigation

  27. Rich data

  28. Rich Data – Why do I Care? Because we do

    so much more than just get and display data
  29. Rich data Client Caching Change Tracking Queries (local or server)

    Extend the Model Object Graphs Roll Your Own http://breezejs.com 1
  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
  31. Demo Rich data

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

  33. Your Feedback is Important Please fill out a session evaluation

    form drop it off at the conference registration desk. Thank you!