Single Page Apps

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

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!