1 1 7 . S e p t e m b e r C o l o g n e . r b AdequateJS Lucas Dohmen

2 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client HTML

3 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON

5 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client

7 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client

Single Page Apps – Why Routing? 8 Bookmarks? Deep links? Reload? Solution: Store some app state in the URI

9 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client

10 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML

Prerendering 11

Hydration 12 How to simulate readiness? What about Events (Clicks etc)? How to match server-side HTML to client-side DOM?

13 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML

14 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML Hydration

Special case: Searchability 15 No Hydration needed

16 State Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON Client (Pre-)Rendering Logic Routing HTML Hydration Business Logic JSON API State Business Logic Same functionality, different languages!

17 State Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON Client (Pre-)Rendering Logic Routing HTML Hydration Business Logic JSON API State Business Logic Much, much more JavaScript

18 Everyone has JavaScript, right? All your users are non-JS while they're downloading your JS If they're on a train and their net connection goes away before your JavaScript loads, then there's no JavaScript. Did the HTTP request for the JavaScript complete? Does the corporate firewall block JavaScript? Does their ISP or mobile operator interfere with downloaded JavaScript? Does their browser support the JavaScript you’ve written? Do your users get the JavaScript?

19 The cost of JavaScript in 2019

Moving code to the client 20 On a server, we can write logs and catch and collect exceptions. This is also possible on the client, but is much more complex and error-prone.

Resilience of JavaScript 21 Modern API in JavaScript customElements.define( "my-element", MyElement ); Chrome 69 ! Firefox 63 ! Microsoft Edge 18 " Modern API in CSS .item { display: contents; } Chrome 69 # Firefox 63 ! Microsoft Edge 18 #

22 ROCA (Resource-oriented client architecture) ROCA-style.org

ROCA 23 RESTful Server-side HTML (SSR) Application logic only on server No duplicated logic on client + No application logic on client! Client-side (self contained) JavaScript components =

24 Client Side Logic is generic Presentation logic only. It enhances HTML HTML CSS Content Layout JavaScript Presentation logic

Progressive Enhancement 25 A web page needs to work without graphical elements, CSS and JS This makes sure, our page will even work under unfavorable circumstances We also lay the foundation for accessibility Doesn't mean that everything needs to work without CSS and JavaScript It means that the fundamental functionality of our web page works with HTML only Every thing that goes beyond that is seen as an enhancement

26 http://rocair.herokuapp.com

Danke! Fragen? 27 Lucas Dohmen [email protected] +49 151 75062496 @moonbeamlabs Krischerstr. 100 40789 Monheim am Rhein Germany +49 2173 3366-0 Ohlauer Str. 43 10999 Berlin Germany +49 2173 3366-0 Ludwigstr. 180E 63067 Offenbach Germany +49 2173 3366-0 Kreuzstr. 16 80331 München Germany +49 2173 3366-0 Hermannstrasse 13 20095 Hamburg Germany +49 2173 3366-0 Gewerbestr. 11 CH-6330 Cham Switzerland +41 41 743 0116 innoQ Deutschland GmbH innoQ Schweiz GmbH www.innoq.com