Single Page Applications (SPA)

Jeremy LiknessPrincipal Architect

@JeremyLikness

Our Mission, Vision, and Values

Our Solutions

INDUSTRIES WE WORK WITH

OUR AWARDS

TODAY’S AGENDA

1. Why? Drivers behind adoption of SPA applications

2. What? Features that Make up a Single Page App

3. How? Frameworks make building apps easier

4. Q&A You have questions, we have answers

WHY?

Why? A Brief History (Pt. 1)

1995

• Complete pages are loaded from the server

• Pages disappear, then reappear

1996

• Internet Explorer introduces the IFRAME

• Dozens of websites adopt this ugly hack

1998• Microsoft Outlook Web App introduces the XMLHTTP component

1999

• XMLHTTP elevated to ActiveX status

• Mozilla, Safari, Operate implement XMLHttpRequest

2004

• Another web-based email app, GMail, pushes the envelope

• The Ajax standard is born. Work on HTML5 begins (yeah, really!)

2006• W3C standardizes XMLHttpRequest

Why? (A Brief History Pt. 2)

2006

• jQuery normalizes the DOM

• Developers suddenly have a lot more free time

2007

• Silverlight released

• Microsoft successfully distracts developers away from building SPA apps

2009• First version of AngularJS is released

2010

• Silverlight 5 is released. It is almost immediately killed

• KnockoutJS is released. BackboneJS is released a few months later

2011

• Last call for HTML5 specification

• EmberJS is released

2015• It’s simple. “We want to access any app, from anywhere, on any device.”

And you’re responsible to make it happen!

DEMO: Before SPA

Disadvantages

UX Reload Real-time

Server Load

Network Load

Mobile

The Experience

UX

• Lacks responsiveness (click and wait)• Page abandonment• Amazon: 100ms slower = 1% lost revenue• Google: 500ms slower = 20% decreased traffic• Lots of manual effort, limited “one-click” experience• Real-time notifications and updates are difficult

Reloading and Round-Trips

Reload

• Server logic is often convoluted when trying to pull data from various areas to aggregate in order to render

• Must remember state and re-render state each time (as opposed to state being preserved in the client)

• Flicker/page freeze is disruptive

Support for Real-time

Real-time

• Only practical method without SPA is to POST on a timer• Notifications require rebuilding the entire page

Server and Scalability

Server Load

• Server must aggregate data from multiple places• Server now has to process everything again or resort to exotic

cache methods to avoid re-processing on refresh• Server is responsible for the logic of taking data and

transforming it into presentation, so 1000 clients = 1000x CPU-bound logic on the server

Chattiness on the Network

Network Load

Vs.

Mobile-Friendliness

Mobile

• Requires lighter payloads • Needs simplified model• Less processing (but less rendering is needed) • Less data when going over metered networks

Challenges

DOM Standards

Routing Security

Modularity Testing Development

WHAT?

What? Typical SPA Features

Data BindingViews /

ComponentsRouting

Dependency Injection

Data Services

Testing

Data-Binding Support

Data-Binding

• Separate presentation logic from actual presentation• For example: “button click” vs. “my action” that can then be

bound to a button, hyperlink, or other action• Validation • Data transformation• Leads to testability and scale• “Designer/developer workflow”

Don’t Repeat Yourself!

Views / Components

• Support for rendering to a part of the page • Reusable data transformations (i.e. filters, value converters)• Reusable components (i.e. grids, type-ahead, dialog boxes, etc.)• HTML5 standards (Web Components)• Responsive

• Master/detail side-by-side on desktop• Master/detail separate pages on mobile

It’s Still the Browser!

Routing

• Navigation: I can browse to an area of the application• Bookmarks: I can save the hyperlink to a useful piece of

information or workflow that I am a part of • State: I can persist my state between areas of the application• Journal: I can use the back and forward buttons on my browser

the way I’m used to

Managing Large Code Bases

Dependency Injection

• Loosely couple JavaScript objects• Separation of concerns enables parallel development • Inversion of control enables testability and promotes reusability• Service location makes it easier to develop components with

dependencies

Would You Rather This …

Data Services

… Or This?

Data Services

Given SPA When Test Then OK!

Testing

• Many frameworks come with their own test suites • Some have specific support for testing and mocking interfaces • All should expose a straightforward means to test• Best frameworks don’t require a dependency on a visible

browser

HOW?

http://jquery.com/

• “Normalize the DOM” • Most popular JavaScript library in use• One of the longest maintained frameworks• Many SPA frameworks can layer on top of this• DEMO: http://todomvc.com/examples/jquery/#/all• Source: https://github.com/tastejs/todomvc/blob/gh-

pages/examples/jquery/js/app.js

http://www.typescriptlang.org/

• Fooled you, this isn’t a SPA framework• Works well with many existing SPA frameworks• Helps “tame” JavaScript• Very useful for projects with scale (lots of code and/or many developers)• Page: https://github.com/tastejs/todomvc/blob/gh-

pages/examples/typescript-angular/index.html• Source: https://github.com/tastejs/todomvc/tree/gh-

pages/examples/typescript-angular/js

http://knockoutjs.com/

• Introduced in early MVC templates by Microsoft • Declarative bindings• Automatic refresh of UI • Relationships and computed models• Templates • Page: https://github.com/tastejs/todomvc/blob/gh-

pages/examples/knockoutjs/index.html• Source: https://github.com/tastejs/todomvc/blob/gh-

pages/examples/knockoutjs/js/app.js

http://backbonejs.org/

• Model-driven• Idea of “entities” and “collections” • Views • Convention-based REST interface• Page: https://github.com/tastejs/todomvc/blob/gh-

pages/examples/backbone/index.html• Source: https://github.com/tastejs/todomvc/tree/gh-

pages/examples/backbone/js

http://emberjs.com/

• Focused on productivity• Handlebar templates • Common idioms / convention based• Page: https://github.com/tastejs/todomvc/blob/gh-

pages/examples/emberjs/index.html• Source: https://github.com/tastejs/todomvc/tree/gh-

pages/examples/emberjs/js

https://angularjs.org/

• Teach HTML New Tricks• Extensible • Dependency injection out of the box • My favorite framework to use, especially on large projects• Page: https://github.com/tastejs/todomvc/blob/gh-

pages/examples/angularjs/index.html• Source: https://github.com/tastejs/todomvc/tree/gh-

pages/examples/angularjs/js

http://www.telerik.com/kendo-ui

• Web and Mobile• HTML5 and JavaScript focused• Layered on top of jQuery• Adapters for AngularJS and BackboneJS “out of the box” • Page: http://kendotodo.apphb.com/Home/Batch

Angular 2.0

• Embraces ECMAScript 6 • Built on TypeScript • Example: https://github.com/Microsoft/ngconf2015demo• Page:

https://github.com/Microsoft/ngconf2015demo/blob/master/todo.html• Source:

https://github.com/Microsoft/ngconf2015demo/blob/master/todo.ts

http://aurelia.io/

• Convention-based• Built for ECMAScript 6 from the ground up• Former member of AngularJS 2.0 team• Examples: http://aurelia.io/get-started.html

DEMO: Todo SPA

Questions?• Demo Code: https://github.com/JeremyLikness/SPAAppsExplained• A Different Angle: What is AngularJS?

http://csharperimage.jeremylikness.com/2014/10/a-different-angle-what-is-angularjs.html

• Let’s Build an AngularJS App! http://csharperimage.jeremylikness.com/2014/10/lets-build-angularjs-app.html

• iVision Application Development:http://ivision.com/our-services/technology-services/application-development/

Jeremy Likness, Principal Architect @JeremyLikness