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