Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

Single Page Apps

1.891 Aufrufe

Veröffentlicht am

Presentation about Single Pages Applications done in Bravi company.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×