This is the slide deck to introduce important topics to developer to build great, high performance Single Page Web Applications. The slide deck is used to setup a review of the code and architecture in my demonstration movie web application used in my latest book. The site is live at http://movies.spawebbook.com and the source code is available on GitHub https://github.com/docluv/movies. Single page application are a new frontier to the web development world. They require a completely different mindset than classic, server-side heavy web development. Not only do developers need to understand modular JavaScript and the DOM API they also need to understand good responsive design practices, performance optimization, touch and a mobile first approach.

1. A Night @ The SPA
Chris Love
@ChrisLove
Love2Dev.com

2. Who Am I
• ASP.NET MVP
• ASP Insider
• Internet Explorer User Agent
• Author
• Speaker
• Tweaker, Lover of Web, JavaScript, CSS & HTML5
• @ChrisLove
• Love2Dev.com

3. High Performance Single Page Web
Applications
• Responsive Design
• Touch
• Mobile First
• SPA
• Extensible, Scalable Architecture
• Web Build and Workflow
• Goes Really Fast!
• ~395 Pages
• 20 Chapters
• $9.99 http://amzn.to/1a55L89

4. Slide Deck & Source Code
• Slide Deck – slidesha.re/15YTrTT
• Source Code – http://GitHub.com/docluv

5. What Does A Modern
Web App Look Like?
What is Changing the
Definition of the Web?

6. Performance
• Multiple Studies Show Correlation Between Conversions & Speed
• 57% Will Abandon a Slow Site After 3 Seconds
• We Have to Concentrate 50% Harder For Slow Sites
• 78% Have Felt Stress or Anger With Slow Sites
• 44% Say Slow Sites Make Them Anxious
• 4% Have Thrown Their Phone

7. Mobile or Device Fragmentation

8. Touch

9. Web APIs

10. HTML5 CSS3 JavaScript

11. The Modern Web Hour Glass
HTML5
JavaScript
CSS3
ASP.NET.IIS
DB – SQL Server/NoSQL

12. (API + HTML5 + CSS3 + JavaScript +
Standards Compliant Browser) *
(Touch + Mobility + Performance)
=== Great Single Page Application

13. How Do We Get There?

14. What About These Guys?
•Angular
•Ember
•Backbone
•Durandal

15. Common Problems
•Too Large
•Try to be everything to everybody
•Memory Leaks
•Many Brittle Practices
•Routing
•Virtualize Native Functionality

17. The Love2SPA Way
• SPAjs
• Backpack/Mud Bath *
• DollarBill**
• Caching AJAX Layer
• HTML Template Engine
• Deeptissue
• Toolbar, Panorama, Other Small UI Libraries
* Under Development ** jQuery Compatible

18. The Love2SPA Way – Typical Stats
• 35-80kb minified, not gzipped JavaScript
• 20-35kb minified, not gzipped CSS
• 5-35kb minified, not gzipped HTML
• 3 Core Http Requests
• < 1 second Load Time

20. The Love2SPA Way
• Extensible
• Scalable
• Maintainable
• Testable
• Deployable
• Have Tangible ROI

21. Extensible
Core
Module
Module
Module

22. Scalable
• Should Work As More Users Enter
• Should Work Throughout Day
• Should Work Across All Devices
• Should Keep Working On Errors

23. Maintainable
• Small Components
• Interchangeable Components
• Single Responsibilities
• Single Code Base (Responsive Design)

24. Testable
• Should be Easy to Write & Execute Unit Test on Application
Specific Code
• Test Should be Automated as Part of Build Process

25. Deployable
• Should Have a Developer Version
• Small View & Component Related Files & Modules
• Should Have a Production Version
• Bundled & Minified CSS & JavaScript
• Optimized Images
• CDN Deployed Static Resources

26. Tangible ROI
• Improved Business Experience
• Higher Productivity
• Lower Error Rates
• Lower Development Costs
• Application Will Last Longer as Technology Changes

27. Why Responsive Design Is Important
“this unspoken agreement to pretend that we had a certain size. And
that size changed over the years. For a while, we all sort of tacitly
agreed that 640 by 480 was the right size, and then later than
changed to 800:600, and 1024; we seem to have settled on this 960
pixel as being this like, default. It’s still unknown. We still don’t know
the size of the browser; it’s just like this consensual hallucination that
we’ve all agreed to participate in: “Let’s assume the browser has a
browser width of at least 960 pixels.”
Jeremy Keith
bit.ly/1bhH6rw

28. Why Responsive Design Is Important
“The emergence of ideas like “responsive design” and “future-friendly
thinking” are in part a response to the collective realization that
designing products that solve one problem in one context at a time is
no longer sustainable. By refocusing our process on systems that are
explicitly designed to adapt to a changing environment, we have an
opportunity to develop durable, long-lasting designs that renew their
usefulness and value over time.”
Wilson Miner
bit.ly/1fbq5lB

29. Why Responsive Design Is Important
“With such a wide range of possibilities, the sensible thing to do is to
zero in on the harshest conditions (or toughest things to deliver) and
build from there. Like cars designed to perform in extreme heat or on
icy roads, websites should be built to face the reality of the web’s
inherent variability.”
Trent Walton
http://trentwalton.com/2014/03/10/device-agnostic/

30. Mobile First
• The Current Harshest Condition
• Determine The Most Important Information
• Expand From There
• Start Responsive Design Mobile First

31. Architecting Web Applications
• A Core App
• Add Functionality As Needed
App
View
View
View

32. JavaScript Objects
• Do Not Use the Global Namespace
• Use a Module
• JavaScript Object – {}
• Make it Extensible
• Think Like jQuery

33. Organize Files
• Break JavaScript, CSS and
Markup into Targeted Files
• Bundle & Minify With a Task
Runner like Grunt or Gulp

34. The Server’s Role
• Serve Needed Content & Resources
• Provide a Data API
• Use JSON
• Deal with Search Engines & Obsolete Browsers
• _escape_fragment_
• https://developers.google.com/webmasters/ajax-
crawling/docs/specification
• SPAHelper Library
• Extends ASP.NET MVC

35. The Client’s Role
• Does the Browser Cut the Mustard?
• Simple Feature Detection
• Do I Use the SPA or Classic Web?
• Use Declarative Syntax For Routing & View Configuration
• Cache Content in localStorage or IndexDB
• Transition Views
• #!
• CSS Animations

36. The Client’s Role
• Dynamically Build Markup
• Templating Engine
• Handlebars
• Mustache
• Micro-Template
• Append and Remove Markup on Demand

37. Questions

38. Let’s Code

39. High Performance Single Page Web
Applications
• Responsive Design
• Touch
• Mobile First
• SPA
• Extensible, Scalable Architecture
• Web Build and Workflow
• Goes Really Fast!
• ~395 Pages
• 20 Chapters
• $9.99 http://amzn.to/1a55L89