S Abhishek Ghosh Client and Server Side Dimitris Kiriakakis - - PowerPoint PPT Presentation

S

Client and Server Side Rendering is not a contradiction Abhishek Ghosh Dimitris Kiriakakis

Who we are and what we do

Online Lottery Software & Service Provider

16.11.16 eSailors IT solutions 3

Agenda

• Why webpage rendering is so important?
• What is server side rendering?
• What is client side rendering?
• Can we combine them?
• Sample implementations & performance measurements
• Conclusions

16.11.16 eSailors IT solutions 4

Why even bother?

• Keep the initial page request optimal
• Benefit from the advantages of single-page applications
• Build something optimized from a user perspective

16.11.16 eSailors IT solutions 5

User facts

• Most of the users would wait 6-10 seconds for a site to

load before they abandon it.

• An 1 second delay in page response can result in a 7%

reduction in conversions.

eSailors IT solutions 16.11.16

Server side rendering

• Everything is prerendered by the server.
• Assets (like images, CSS styles and JS files) can be

loaded asynchronously.

• Consecutive requests have a lot of rendering overhead.

eSailors IT solutions 16.11.16

Client side rendering (SPA)

• Everything is being controlled by JS.
• Smooth navigation after first load.
• But on first load we have to wait for our framework (and

its dependencies) to be loaded. Until then we are able to see almost nothing.

• A SPA might have implications for SEO.

eSailors IT solutions 16.11.16

Hybrid Approach

• We server-side render the HTML template.
• As soon as the JS assets are available, we are able to

load HTML partials and use them accordingly, without the need to rerender the whole template (Header, Footer etc).

• Higher complexity and the implementation takes more

time.

eSailors IT solutions 16.11.16

Problems

• Dynamic parts of the template (products, items etc.)

might become rather complicated.

• Code duplications and flickering.
• Browser back button can be really painful.

eSailors IT solutions 16.11.16

16.11.16 eSailors IT solutions

Performance

• Performance is a key ingredient in keeping audience on

your website

16.11.16 eSailors IT Solutions GmbH 12

Time to First Byte

• Time To First Byte (TTFB) is a measurement used as an

indication of the responsiveness of a webserver or other network resource. It measures the duration from the user

• r client making an HTTP request to the first byte of the

page being received by the client's browser.

(* source wiki)

16.11.16 eSailors IT Solutions GmbH 13

Document complete

16.11.16 eSailors IT Solutions GmbH 14

Results for Hybrid Rendering

16.11.16 eSailors IT solutions

Results for Client Rendering

Side by side comparison

16.11.16 eSailors IT solutions

Conclusion

Should I consider buliding a Hybrid application?

16.11.16 eSailors IT solutions

It is simply “nice to have”

16.11.16 eSailors IT solutions

High testing effort

16.11.16 eSailors IT solutions

Sometimes client/server-side only pages are helpful

16.11.16 eSailors IT solutions

Recommendations

When to consider to build hybrid apps?

• Customer speed is part of your business
• You take SEO seriously

When not?

• Unique business model
• Implementation time is critical

16.11.16

Isomorphic JS - Angular Universal

• Isomorphic applications are made of code, which can

be run both in the server and the client

• Rendering starts on server, which means generating

all HTML needed for a page at a given route

• Preboot.js gives us the ability to record user activity
• When angular is ready, preboot replays user activity

16.11.16 eSailors IT solutions

Thank you Q&A

Prototypes’ repositories https://github.com/dkiriakakis/boot-thymeleaf https://github.com/dkiriakakis/angular-webshop

16.11.16 eSailors IT solutions

Angular Universal https://github.com/angular/universal-starter

S