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. Agenda • What’s a SPA ? • Ravioli • Data

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

    as a desktop app but built with HTML5, CSS and JavaScript
  3. 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
  4. 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
  5. 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
  6. 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 }; })($);​
  7. Core Libraries Sammy.js breeze.js knockout.js jQuery DOM / AJAX Data

    Binding / MVVM Rich data interactivity Nav / History toastr.js Alerts
  8. 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
  9. 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>
  10. Hook into Navigation Avoid Page Refreshes Hook Into Browser History

    Transition Between Multiple Views Pass Parameters Between Views
  11. 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
  12. Rich Data – Why do I Care? Because we do

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

    Extend the Model Object Graphs Roll Your Own http://breezejs.com 1
  14. 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
  15. Your Feedback is Important Please fill out a session evaluation

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