single page apps

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

Upload: max-claus-nunes

Post on 06-Dec-2014

1.560 views

Category:

Technology


4 download

DESCRIPTION

Presentation about Single Pages Applications done in Bravi company.

TRANSCRIPT

Page 1: Single Page Apps

Single Page Apps Faster, more responsive and richer web

apps

Danillo Corvalan and Max Nunes

Page 2: Single Page Apps
Page 3: Single Page Apps

A long time ago

- Session and Routing;

- Deal with elements State

(ViewState);

- Return Processed HTML;

Page 4: Single Page Apps

MVC on the server

- Routing, less session

- Process Html to return

Page 5: Single Page Apps

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

SPA Architecture

Page 7: Single Page Apps

Advantages

• User experience;

• Easy to design an offline environment;

• Save bandwidth;

• Less roundtrips;

• MVC on client;

Page 8: Single Page Apps

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

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

How does the user feel about

waiting requests to finish

Page 11: Single Page Apps

2 seconds waiting

Page 12: Single Page Apps

4 seconds waiting

Page 13: Single Page Apps

6 seconds waiting

Page 14: Single Page Apps

8 seconds waiting

Page 15: Single Page Apps

10 seconds waiting

Page 16: Single Page Apps

Longer than 10 seconds waiting

Page 17: Single Page Apps

Performance

80% 20%

Loading...

Please Wait

Front End Back End

Page 18: Single Page Apps

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

Complementary Frameworks

Many others...

Page 20: Single Page Apps

SPA Frameworks

Many, many others...

Page 22: Single Page Apps

Questions