Single Page Application
by Amir Souchami
tweet to: @amirsouchami
WHAAAAT??
POWERCOINS.COM
Facebook.com
Twitter.com
plus.google.com
gmail.com - החלוץ
Some Facts
We've got 100 milliseconds to engage our users before they start to feel disconnected from the app.
That's 1/10th of a second.
After a whole second, we're starting to lose users.
This simple fact is motivation enough for us to employ good UI/UX and performance best practices, to create great apps
GOALS
Providing a more fluid/Real Time user experience, like a desktop application.
& of course Performance
WHY?!
הזקנה במסדרון
The problem
server-side web application
The classical approach disrupting the user experience quite badly.
There’s an obvious transition from one page to the next which requires you to wait until entire new pages have loaded for each click (2mb approx?)
This often means requesting the same content again and again (e.g. the sidebars, header, navigation etc).
DOES not FEEL
NATIVE
SPA for the rescue
With an SPA on the other hand, changes of application ‘state’ are handled using approaches such as XHR calls, making the user experience a lot more fluid.
Either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.
How its done
An SPA moves logic from the server to the client
especially: Layouting & Data retrieving
This results in the role of the web server evolving into a pure data API or web service.
And a more test able back-end.
This architectural shift AKA "Thin Server Architecture"
Which highlight that complexity has been moved from the server to the client.
With the argument that this ultimately "reduces overall complexity of the system".
TOOLing
The evolution of this architecture has brought lots of wonderful tools:
Client-side
JavaScript libraries addressing various issues.
i.e. AngularJS, Ember, Polymer, x-tags
Server side
Web frameworks that specialize in the SPA model.
i.e. NodeJS (express.js, sailor.js, etc)
BROWSER Wise
The evolution of browsers and the HTML5 specification aimed at the SPA model.
- History API
- Web components
- Local Storage
- indexDB / Web Storage
- APPCache
- Web workers
- Web Sockets / Server Sent Events / Web RTC
- Geo Location
- CORS
- ETC
SPA WINS
- URL routing without page REFRESH
- Back button works like a charm
- Bookmark-able links
- Richer UI / UX (e.g. loaders, forms validation)
- We can go offline
- Service oriented (REST, etc)
- Automate testing (Server & Client)
But hey hey hey...!
What about SEO, Analytics & Error tracking ?
PERFORMANCE WIN
Server load reduced
before after
Layout is rendered only once and everything gets cached for next time :)
demo!
AND THEN:
Q&A..?