Single Page Applications: Your Browser is the OS!
Download as PPTX, PDF1 like4,882 views
The document provides an overview of single page applications (SPAs), discussing their historical context, key features, and advantages over traditional web applications. It covers the evolution of SPAs, challenges they address, and various frameworks available for development. Key topics include data binding, routing, and the importance of user experience in mobile and web environments.
Single Page Applications: Your Browser is the OS!
- 1. Single Page Applications (SPA) Jeremy Likness Principal Architect @JeremyLikness
- 2. Our Mission, Vision, and Values
- 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
- 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
- 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