Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building single page applications

6,036 views

Published on

A Lecture given in Aalto University course "Design of WWW Services".

Single page app is already several years old web application paradigm that is now gaining traction due to the interest towards HTML5 and particularly cross-platform mobile (web) applications. The presentation overviews the single page application paradigm and compares it with other web app paradigms.

The presentation uses Backbone.js as the sample and gives practical tips on how to best structure Backbone.js applications. It contains an extensive set of tips and links in the notes section.

The reader is adviced to download the presentation for better readability of the notes.

Published in: Technology
  • Be the first to comment

Building single page applications

  1. 1. Building Single-pageApplications HTML5 expertise at your service
  2. 2. About Lauri & SC5 Online • ”Powerhouse for software projects” • HUT graduate, Information Networks • 15 years in software engineering business • A few startups & corporations behind • Now in SC5 Online as a Software Architect • Specializes in HTML5 application development • Located in Helsinki (Kamppi) + Jyväskylä (Innova 2) • Founded in 2006, employs 50 people • Customers e.g. Sanoma, YLE, Veikkaus, F-Secure • blog.sc5.io, twitter: @sc5io
  3. 3. Single-page Application A web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. Wikipedia
  4. 4. Single-page ApplicationSingle page apps typically have – “application like” interaction – dynamic data loading from the server-side API – fluid transitions between page states – more JavaScript than actual HTMLThey typically do not have – support for crawlers (not for sites relying on search traffic) – support for legacy browsers (IE7 or older, dumbphone browsers)
  5. 5. SPAs Are Good For …• “App-like user experience”• Binding to your own (or 3rd party) RESTful API• Replacement for Flash or Java in your web pages• Hybrid (native) HTML5 applications• Mobile version of your web site The SPA sweet spot is likely not on web sites, but on content-rich cross-platform mobile apps
  6. 6. App-like User Experience Note: These (all) are not our work but showcases that Finns can do good stuff!
  7. 7. Native Apps vs. Hybrid/Mobile Web Sites“The real problem with apps was that when people read on electronicmedia, they expect the stories to possess the linky-ness of the Web—but stories in apps didn’t really link.”“Software development of apps was much harder than publishers hadanticipated, because they had hired Web developers who knewtechnologies like HTML, CSS, and JavaScript. Publishers wereastonished to learn that iPad apps were in fact real, ifsmall, applications, written mostly in a language called ObjectiveC, which no one in their Web-dev departments knew. Publishersresponded by outsourcing app development, which wasexpensive, time-consuming, and unbudgeted.” Why Publishers Dont Like Apps in MIT Technology Review
  8. 8. SPAs and Other Web App Architectures Server-side Server-side + AJAX PJAX SPAWhat Server round-trip on Render initial page on Render initial page on Serve static page every app state change server, state changes server, state changes skeleton from server; on the client on server, inject into render every change on DOM on client-side client-sideHow UI code on server; links UI code on both ends; UI code on server, UI code on client, & form posting AJAX calls, ugly server client to inject HTTP, server API API server API if you likeEase of developmentUX & responsivenessRobots & old browsersWho’s using it? Amazon, Wikipedia; Facebook?; Twitter, Basecamp, Google+, Gmail, FT; banks, media sites etc. widgets, search GitHub mobile sites, startups
  9. 9. SPA FrameworksNeed help in comparison? Try TodoMVC!
  10. 10. Anatomy of a Backbone SPA • Application as a „singleton‟ reference holder • Router handles the navigation and toggles between views • Models synchronize with Server API • Bulk of the code in views • All HTML in templates
  11. 11. SPA Client-Server Communication • HTML and all the assets are loaded in first request • Additional data is fetched over XMLHTTPRequest • In addition to normal server stack, you need to have API endpoints in the same level as presentation layer • If you want to go real-time, WebSockets (socket.io) can help you • When it gets slow, cluster the backend behind a caching reverse proxy like Varnish
  12. 12. Sample App Stack App Backbone App When the app gets complex, you need modularity (Backbone Router)  require.js Views Models Router (Backbone View) (Backbone Model) (Backbone Router) When the devices have differences, you need feature detection (only a few shims really work) modernizr (feature Backbone LayoutManager Handlebars  modernizr, semantic.gs (template engine) detection) (view utility) DOMReady fastclick (normalise (bootstrapping) View & Templating Stack When you want to have an optimized app,click handling) Underscore.js (object/array Backbone variability or a native app, you need builds  grunt (MVC framework) utils)Cross-Browser jQuery Compatibility Utility Belt (DOM access) RequireJS (dependency mgmt) Sample boilerplate available at SC5 GitHub 320 and Up Semantic.gs (boilerplate) HTML5 Foundation (boilerplate) Our component Bower LESS Jasmine Grunt Node.js & Express(package mgmt) (CSS) (unit tests) (builds) (web/API server) 3rd party component Build, Testing & Deployment Subsystems
  13. 13. Handling Navigation (location)• Browsers already have navigation controls; support them• HTML5 pushState exists exactly for this purpose• Handled by History in Backbone and $location in Angular• Remember fallback to hashbang „#‟ with legacy browsers• Remember to use URL rewrites in the server side
  14. 14. Handling Models (dynamic data)• Backbone has a flat model of Collections containing Models• Input validation (can block the invalid input, blocks on save())• Multiple view bindings (through events)• Custom data - model mappings (through parse())• Synchronizing with servers • fetch() -> GET • save() -> POST or PUT • delete() -> DELETE
  15. 15. Handling Models (dynamic data)• Can be easily extended by overriding Backbone.sync() • Real-time communications (web sockets) • Offline use (localStorage)• Avoid spaghetti code: • If your UI state does not fit the server schema, override parse() and save() • Use the models as the state of your views • Isolate client-server communication to models and collections • If you ever plan to reuse your models, fix your schema and don‟t hard-code your URLs
  16. 16. Handling Views (DOM)• Usually your sequence is as simple as: 1.Update model  triggers change in views 2.Refresh views (render)  render template  apply into DOM 3.Notify the other views (if for some reason they cannot listen to the same model)
  17. 17. Handling Views (DOM)• Avoid spaghetti code • Backbone expects to keep Models and Views in sync • A view should only alter the parts of DOM it owns • A view should not call directly other views than its children • Use the event binding facilities offered by framework (e.g. Backbone.view.events: {}) • A few jQuery calls to alter a subset of DOM is more code and more expensive than replacing the same subset by a template Always drive your view changes through your model Use events for messaging between the application parts Use templates; usually it is ok to render the view again
  18. 18. Page Rendering – Templates• Easier way of creating a bunch of HTML elements• Inject HTML into DOM using $.html()• The principle is the same in server-side: call template with the parameters as data-object to get HTMLSamples: Handlebars, Dust.js, EJS, Google ClosureTemplatesSee: LinkedIn comparison of template engines
  19. 19. Summary• SPA ~ MV(C) Pattern ~ Server API driven app• A toolbelt of a JS framework and supplementary libraries• Still fairly new paradigm, not in wide use yet• Good complement to your existing web site • Mobile/Hybrid app • May replace your existing site when solving the crawling issue
  20. 20. Further Reading• HTML5 sovellusalustana (a book by Pyry L & Jukka K) http://www.julkaisija.fi/yleista/html5.php• Developing Backbone.js Applications (a CC book by Addy Osmani) https://github.com/addyosmani/backbone-fundamentals• HTML5 Rocks as a vault of information http://www.html5rocks.com/en/• A catalogue of JavaScript libraries to choose among http://www.jsdb.io/
  21. 21. Thank you ! Lauri Svan Software Architect, SC5 Online Ltd https://github.com/laurisvan https://twitter.com/laurisvanHTML5 expertise at your service

×