Downloaded 20 times
Uploaded byJeremy Likness
Single Page Applications: Your Browser is the OS!
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.
More Related Content
Similar to Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
- 1. Single Page Applications(SPA) Jeremy Likness Principal Architect @JeremyLikness
- 2. Our Mission, Vision,and Values
- 3.
- 4.
- 5.
- 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.
- 8. Why? A BriefHistory (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 BriefHistory 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.
- 11.
- 12. The Experience UX • Lacksresponsiveness (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 theNetwork Network Load Vs.
- 17. Mobile-Friendliness Mobile • Requires lighterpayloads • Needs simplified model • Less processing (but less rendering is needed) • Less data when going over metered networks
- 18.
- 19.
- 20. What? Typical SPAFeatures Data Binding Views / Components Routing Dependency Injection Data Services Testing
- 21. Data-Binding Support Data- Binding • Separatepresentation 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 theBrowser! 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 CodeBases 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 RatherThis … Data Services
- 26.
- 27. Given SPA WhenTest 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.
- 29. http://jquery.com/ • “Normalize theDOM” • 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 inearly 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 • Ideaof “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 onproductivity • 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 HTMLNew 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 andMobile • 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 • EmbracesECMAScript 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 • Builtfor ECMAScript 6 from the ground up • Former member of AngularJS 2.0 team • Examples: http://aurelia.io/get-started.html
- 38.
- 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