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

S

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

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. 16.11.16 eSailors IT solutions

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. 16.11.16 eSailors IT solutions

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. 16.11.16 eSailors IT solutions

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. 16.11.16 eSailors IT solutions

Problems • Dynamic parts of the template (products, items etc.) might become rather complicated. • Code duplications and flickering. • Browser back button can be really painful. 16.11.16 eSailors IT solutions

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 or 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 Angular Universal https://github.com/angular/universal-starter 16.11.16 eSailors IT solutions

S