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 ...
SPA Architecture
Advantages
• User experience;
• Easy to design an offline environment;
• Save bandwidth;
• Less roundtrips;
• MVC on clien...
Drawbacks
• Much effort to start (Javascript knowledge, HTTP, Services on
Server);
• You don't need SPA for everything;
• ...
What does make SPA so
fast?
• Bring more process to client side
• Less requests
• Render just the exactly HTML block you n...
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 ...
Complementary Frameworks
Many others...
SPA Frameworks
Many, many others...
DEMOS
• Require
• Knockout
• Durandal
• Angular
Questions
Single Page Apps
Upcoming SlideShare
Loading in …5
×

Single Page Apps

1,729 views
1,677 views

Published on

Presentation about Single Pages Applications done in Bravi company.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,729
On SlideShare
0
From Embeds
0
Number of Embeds
650
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Single Page Apps

  1. 1. Single Page Apps Faster, more responsive and richer web apps Danillo Corvalan and Max Nunes
  2. 2. A long time ago - Session and Routing; - Deal with elements State (ViewState); - Return Processed HTML;
  3. 3. MVC on the server - Routing, less session - Process Html to return
  4. 4. 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);
  5. 5. SPA Architecture
  6. 6. Advantages • User experience; • Easy to design an offline environment; • Save bandwidth; • Less roundtrips; • MVC on client;
  7. 7. 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;
  8. 8. 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)
  9. 9. How does the user feel about waiting requests to finish
  10. 10. 2 seconds waiting
  11. 11. 4 seconds waiting
  12. 12. 6 seconds waiting
  13. 13. 8 seconds waiting
  14. 14. 10 seconds waiting
  15. 15. Longer than 10 seconds waiting
  16. 16. Performance 80% 20% Loading... Please Wait Front End Back End
  17. 17. 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;
  18. 18. Complementary Frameworks Many others...
  19. 19. SPA Frameworks Many, many others...
  20. 20. DEMOS • Require • Knockout • Durandal • Angular
  21. 21. Questions

×