Single Page Apps Faster, more responsive and richer web

apps

Danillo Corvalan and Max Nunes

A long time ago

- Session and Routing;

- Deal with elements State

(ViewState);

- Return Processed HTML;

MVC on the server

- Routing, less session

- Process Html to return

What is SPA

• Stands for Single Page Applications;

• No page refresh;

• Download features as required (AMD - Asynchronous module

definition);

• On Web, think the Server as an API;

• Mainly client development (e.g.: Javascript);

• Collection of frameworks that make everything work;

• MVC on Client (usually);

SPA Architecture

Advantages

• User experience;

• Easy to design an offline environment;

• Save bandwidth;

• Less roundtrips;

• MVC on client;

Drawbacks

• Much effort to start (Javascript knowledge, HTTP, Services on

Server);

• You don't need SPA for everything;

• SEO Complications (even though there are some tricks to sort it out);

• Broken back button;

What does make SPA so

fast?

• Bring more process to client side

• Less requests

• Render just the exactly HTML block you need

• Once load, will not request that again (Cache for browser/server)

How does the user feel about

waiting requests to finish

2 seconds waiting

4 seconds waiting

6 seconds waiting

8 seconds waiting

10 seconds waiting

Longer than 10 seconds waiting

Performance

80% 20%

Loading...

Please Wait

Front End Back End

How To Do SPA

• Get your API Ready (API World);

• Move logic and data to client;

• Tests are not an option. Do it!

• Load only changed data (Cache);

• Try to minimize DOM dependent-code;

• Meet the framework of your needs;

Complementary Frameworks

Many others...

SPA Frameworks

Many, many others...

DEMOS

• Require

• Knockout

• Durandal

• Angular

Questions