Single Page Apps
0 likes2,009 views
Single page applications (SPAs) allow for faster, more responsive web apps by moving more processing to the client side. SPAs avoid full page refreshes by downloading only necessary features and using client-side MVC. This improves the user experience through reduced loading times, bandwidth usage, and roundtrips compared to traditional server-side MVC. However, SPAs require more initial effort due to JavaScript knowledge and implementing services on the server.
Single Page Apps
- 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);
- 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
- 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;
- 20. SPA Frameworks Many, many others...
- 21. DEMOS • Require • Knockout • Durandal • Angular
- 22. Questions