HTML5 expertise at your service

Building Single-pageApplications

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

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

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 HTML

They typically do not have– support for crawlers (not for sites relying on search traffic)– support for legacy browsers (IE7 or older, dumbphone

browsers)

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

App-like User Experience

Note: These (all) are not our work but showcases that Finns can do good stuff!

Native Apps vs. Hybrid/Mobile Web Sites

“The real problem with apps was that when people read on electronic media, 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 had anticipated, because they had hired Web developers who knew technologies like HTML, CSS, and JavaScript. Publishers were astonished to learn that iPad apps were in fact real, if small, applications, written mostly in a language called Objective C, which no one in their Web-dev departments knew. Publishers responded by outsourcing app development, which was expensive, time-consuming, and unbudgeted.”

Why Publishers Don't Like Apps in MIT Technology Review

SPAs and Other Web App ArchitecturesServer-side Server-side + AJAX PJAX SPA

What Server round-trip on every app state change

Render initial page on server, state changes on the client

Render initial page on server, state changes on server, inject into DOM on client-side

Serve static page skeleton from server; render every change on client-side

How UI code on server; links & form posting

UI code on both ends; AJAX calls, ugly server API

UI code on server, client to inject HTTP, server API if you like

UI code on client,server API

Ease of development

UX & responsiveness

Robots & old browsers

Who’s using it? Amazon, Wikipedia;banks, media sites etc.

Facebook?;widgets, search

Twitter, Basecamp, GitHub

Google+, Gmail, FT;mobile sites, startups

SPA Frameworks

Need help in comparison? Try TodoMVC!

• 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

Anatomy of a Backbone SPA

• 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

SPA Client-Server Communication

Sample App StackWhen the app gets complex, you need modularity require.js

When the devices have differences, you need feature detection (only a few shims really work) modernizr, semantic.gs

When you want to have an optimized app, variability or a native app, you need builds grunt

Sample boilerplate available at SC5 GitHub

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

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

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

Handling Views (DOM)•Usually your sequence is as simple as:

1.Update model triggers change in views2.Refresh views (render) render template apply into

DOM3.Notify the other views (if for some reason they cannot

listen to the same model)

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

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 HTML

Samples: Handlebars, Dust.js, EJS, Google Closure TemplatesSee: LinkedIn comparison of template engines

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

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 informationhttp://www.html5rocks.com/en/

• A catalogue of JavaScript libraries to choose amonghttp://www.jsdb.io/

HTML5 expertise at your service

Lauri Svan

Thank you !

Software Architect, SC5 Online Ltdhttps://github.com/laurisvanhttps://twitter.com/laurisvan