Single Page Apps Faster, more responsive and richer web apps Danillo Corvalan and Max Nunes
Dec 06, 2014
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