Single Page Applications have gained tremendous popularity over the past few years and have prompted the creation of several frameworks to support their development. Unlike traditional web applications, most of the heavy lifting for SPA happens on the client side in your web browser. These applications rely on hundreds of lines of JavaScript coupled with asynchronous web service calls to provide a desktop-like experience that is accessible from virtually any device. Join Principal Architect, Jeremy Likness, to learn more about SPA, including how to determine when you should choose this approach, how SPA compares and contrasts with traditional server-based approaches including ASP.NET WebForms and MVC, and what frameworks and tools (such as jQuery, AngularJS, and Aurelia) make building SPA easier. Discover how single page applications powered by HTML5 and JavaScript transform your browser into a web-based operating system.

1. Single Page Applications (SPA)
Jeremy Likness
Principal Architect
@JeremyLikness

2. Our Mission, Vision, and Values

3. Our Solutions

4. INDUSTRIES WE WORK WITH

5. OUR AWARDS

6. 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

7. WHY?

8. 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

9. 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!

10. DEMO: Before SPA

11. Disadvantages
UX Reload Real-time
Server
Load
Network
Load
Mobile

12. 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

13. 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

14. Support for Real-time
Real-time
• Only practical method without SPA is to POST on a timer
• Notifications require rebuilding the entire page

15. 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

16. Chattiness on the Network
Network
Load
Vs.

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

18. Challenges
DOM
Standards
Routing Security
Modularity Testing Development

19. WHAT?

20. What? Typical SPA Features
Data Binding
Views /
Components
Routing
Dependency
Injection
Data
Services
Testing

21. 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”

22. 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

23. 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

24. 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

25. Would You Rather This …
Data
Services

26. … Or This?
Data
Services

27. 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

28. HOW?

29. 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

30. 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

31. 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

32. 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

33. 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

34. 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

35. 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

36. 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

37. 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

38. DEMO: Todo SPA

39. 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