Single Page Apps - Speaker Deck

Slide 1

Slide 1 text

Single-Page Apps John Papa Twitter: @john_papa

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Demo Trip to a SPA

Slide 8

Slide 8 text

Ravioli (aka Modules)

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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 }; })($);

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Demo Ravioli

Slide 15

Slide 15 text

Data Binding and MVVM

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

MVVM View Model ViewModel

Slide 18

Slide 18 text

Bindings in a View Refresh Showing sessions

Slide 19

Slide 19 text

Date bindings 1 Filter Bindings 2 Session List Bindings 3

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Demo Data Binding and MVVM

Slide 22

Slide 22 text

Navigation

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Demo Navigation

Slide 27

Slide 27 text

Rich data

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Demo Rich data

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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