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