Presentation about Single Pages Applications done in Bravi company.

1. Single Page Apps
Faster, more responsive and richer web
apps
Danillo Corvalan and Max Nunes

3. A long time ago
- Session and Routing;
- Deal with elements State
(ViewState);
- Return Processed HTML;

4. MVC on the server
- Routing, less session
- Process Html to return

5. 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);

6. SPA Architecture

7. Advantages
• User experience;
• Easy to design an offline environment;
• Save bandwidth;
• Less roundtrips;
• MVC on client;

8. 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;

9. 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)

10. How does the user feel about
waiting requests to finish

11. 2 seconds waiting

12. 4 seconds waiting

13. 6 seconds waiting

14. 8 seconds waiting

15. 10 seconds waiting

16. Longer than 10 seconds waiting

17. Performance
80% 20%
Loading...
Please Wait
Front End Back End

18. 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;

19. Complementary Frameworks
Many others...

20. SPA Frameworks
Many, many others...

21. DEMOS
• Require
• Knockout
• Durandal
• Angular

22. Questions