Architekturoptionen für moderne Web-Frontends

Slide 1

Slide 1 text

Architectures for Modern Web Front Ends 2 0 2 0 / 0 5 / 2 6 J U G S w i t z e r l a n d Stefan Tilkov @stilkov Lucas Dohmen @moonbeamlabs

Slide 2

Slide 2 text

Annoying your app users in 10 easy steps

Slide 3

Slide 3 text

1. Forbid the use of the back and forward buttons

Slide 4

Slide 4 text

2. Send them to the home page when they hit “refresh” …

Slide 5

Slide 5 text

3. … or at least ensure the browser pops up a warning window

Slide 6

Slide 6 text

4. Make sure they can’t open a second browser window

Slide 7

Slide 7 text

5. Let them see UI decoration and ads first, content last

Slide 8

Slide 8 text

6. Make sure they can’t bookmark or send a link

Slide 9

Slide 9 text

7. Don’t let Google index anything

Slide 10

Slide 10 text

8. Show users a picture of your app – it’s surely better than nothing

Slide 11

Slide 11 text

9. Disable assistive technologies. Who needs a screen reader, anyway?

Slide 12

Slide 12 text

10. Ensure non-functioning JavaScript gives them a blank page

Slide 13

Slide 13 text

History repeating … CORBA Web WS-* REST

Slide 14

Slide 14 text

What’s the client side analogy?

Slide 15

Slide 15 text

1) in the SOAP/WSDL sense “Web app”2) 2) built as a careless SPA “Web service”1) > Uses HTTP as transport > Ignores HTTP verbs > Ignores URIs > Exposes single “endpoint” > Fails to embrace the Web > Uses browser as runtime > Ignores forward, back, refresh > Does not support linking > Exposes monolithic “app” > Fails to embrace the browser

Slide 16

Slide 16 text

The web-native way of distributing logic Process Flow Presentation Domain Logic Data Server Client > Rendering, layout, styling on an unknown client > Logic & state machine on server > Client user-agent extensible via code on demand

Slide 17

Slide 17 text

HTML & Hypermedia • In REST, servers expose a hypermedia format • Option 1: Just invent your own JSON-based, incomplete clone • Option 2: Just use HTML • Clients need to be RESTful, too • Option 1: Invent your own, JS-based, buggy, incomplete implementation • Option 2: Use the browser

Slide 18

Slide 18 text

A great REST hypermedia API is very similar to a simple, server-sided rendered web application

Slide 19

Slide 19 text

The role of JS in modern Web applications

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Why Routing? Solution: Store some app state in the URI! Bookmarks? Deep links? Reload? Browser Server GET / 200 OK… GET /app.js 200 OK… App start…

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Searchability Crawler Server GET / Static HTML Snapshot API run App AJAX Fun…

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client Rendering Logic Routing HTML Same Code

Slide 29

Slide 29 text

“All your users are non-JS users while they‘re downloading your JS” Jake Archibald, developer advocate for Google Chrome

Slide 30

Slide 30 text

Prerendering Browser Server GET / Static HTML Snapshot API run App AJAX Fun… FCP TTI load & run App AJAX Fun…

Slide 31

Slide 31 text

Hydration How to simulate readiness? What about Events (Clicks etc)? How to match server-side HTML to client-side DOM? Browser GET / Static HTML Snapsho FCP TTI load & run App

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

State Business Logic JSON API Business Logic State Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON Client (Pre-)Rendering Logic Routing HTML Hydration high control, high observability low control, low observability

Slide 36

Slide 36 text

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 client side JavaScript

Slide 37

Slide 37 text

37 Resilience customElement.deﬁne( "my-element", MyElement ); Modern API in JS Modern API in CSS .item { display: contents; } Firefox 63: It works Firefox 63: It works Chrome 69: Exception Chrome 69: Skips that line

Slide 38

Slide 38 text

“JavaScript is the most expensive part of your page” Addy Osmani, Speed team lead for Google Chrome

Slide 39

Slide 39 text

Cost of JavaScript on Reddit.com Pixel 3 Moto G4 Alcatel 2X 5059D 0 seconds 1 second 2 seconds Main thread Worker thread The cost of JavaScript in 2019

Slide 40

Slide 40 text

Test your app on real, low-cost devices and slow networks (No, an emulator is not enough)

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

RAGE CLICKS “15% of users tried to interact sometime between onload and interactive.” Akamai: Metrics That Matter RAGE CLICKS

Slide 43

Slide 43 text

Hydration is not a progressive enhancement, it‘s an uncanny valley

Slide 44

Slide 44 text

Now what?

Slide 45

Slide 45 text

• Client-side state handling • Better offline support • Closer to desktop model • Better performance • Server-side state handling • Simpler • More resilient & observable • Smaller client footprint • Better performance

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client HTML Rendering Logic Look & Presentation Logic JSON/ HTML

Slide 48

Slide 48 text

48 Let's use the technologies from SPAs, but keep the architecture of the Web.

Slide 49

Slide 49 text

Pure SPA SSR+RC Pure SSR • Large number of users • Basic UX needs • Support for past, present and future devices • Complex global client state • Offline support • Controlled device landscape • Like SSR, but with • more UX needs • Complex component state • Basic offline support

Slide 50

Slide 50 text

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 50 Thanks! Questions? Stefan Tilkov [email protected] +49 170 4712625 stilkov Lucas Dohmen [email protected] +49 151 75062496 moonbeamlabs