JavaScript? Gern, aber bitte in Maßen

Slide 1

Slide 1 text

30.1.2019 JavaScript? Gern,aber bitte in Maßen Lucas Dohmen

Slide 2

Slide 2 text

Server Client HTML State Business Logic Routing Presentation Logic (incl. Templating) Look (CSS) & Behaviour (JS)

Slide 3

Slide 3 text

But what about... React Preact Ember Angular Vue Polymer Stencil Elm Backbone

Slide 4

Slide 4 text

Lucas Dohmen  Senior Consultant innoQ Deutschland GmbH “I build Web applications and fiddle with databases”

Slide 5

Slide 5 text

Server Client HTML State Business Logic Routing Presentation Logic (incl. Templating) Look (CSS) & Behaviour (JS)

Slide 6

Slide 6 text

Server Client State Business Logic Routing Presentation Logic (incl. Templating) Look (CSS) & Behaviour (JS) JSON

Slide 7

Slide 7 text

Server Client JSON State Business Logic Routing Presentation Logic (incl. Templating) Look (CSS) & Behaviour (JS)

Slide 8

Slide 8 text

Server Client State Business Logic Routing Presentation Logic (incl. Templating) Look (CSS) & Behaviour (JS) JSON-API JSON-Client JSON

Slide 9

Slide 9 text

Server Client State Business Logic Routing Presentation Logic (incl. Templating) Look (CSS) & Behaviour (JS) JSON-API JSON-Client Business Logic JSON

Slide 10

Slide 10 text

Server Client State Business Logic Routing Presentation Logic (incl. Templating) Look (CSS) & Behaviour (JS) JSON-API JSON-Client Business Logic State JSON

Slide 11

Slide 11 text

Server Client State Business Logic Routing Presentation Logic (incl. Templating) Look (CSS) & Behaviour (JS) JSON-API JSON-Client Business Logic State Routing Presentation Logic (incl. Templating) HTML Hydration JSON

Slide 12

Slide 12 text

In a nutshell • Moving routing and presentation logic to the client moves other responsibilities to the client as well • Additionally, we need more infrastructure and coordination and increase duplication and indirection

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

iCloud

Slide 15

Slide 15 text

Offline First • A very good reason to go the “SPA route” • ⚠ synchronising state is more complicated than you think iCloud

Slide 16

Slide 16 text

Portable app • Use Web technologies to build a “native app” • One code base for all platforms • VS Code, Atom, Slack... • ⚠ more resource intensive than a native app iCloud

Slide 17

Slide 17 text

Why is moving code to the browser a problem?

Slide 18

Slide 18 text

Reduced Observability • 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

Slide 19

Slide 19 text

Average mobile phone • Motorola Moto G4 • We need to test our apps on representative devices Alex Russel: Can You Afford It?

Slide 20

Slide 20 text

Addy Osmani: The Cost of JavaScript

Slide 21

Slide 21 text

Addy Osmani: The Cost of JavaScript

Slide 22

Slide 22 text

Single-Threaded (Mostly) • JavaScript is executed in a single thread* • I/O operations are executed outside of that thread • But a CPU task blocks the thread* • If we execute a lot of business logic, we block the thread • If the thread is blocked, the entire browser tab becomes unresponsive *With Web Workers we can execute code on a separate thread

Slide 23

Slide 23 text

Server side development JDK 7

Slide 24

Slide 24 text

Browser development Chrome 66 Firefox 61 Safari 11 Edge 42 Opera Mini Samsung Internet UC Browser Chrome 42 Firefox 55 IE11 IE10 Safari 7

Slide 25

Slide 25 text

Declarative vs. imperative: HTML & CSS are more resilient

Slide 26

Slide 26 text

Errors in JavaScript a(); b(); c(); Throws an Exception Is never executed

Slide 27

Slide 27 text

Errors in CSS .item { foo: bar; color: red; } Unknown, is ignored Is still interpreted

Slide 28

Slide 28 text

Errors in HTML X Unknown, is treated as a Is still evaluated

Slide 29

Slide 29 text

Reminder • An error doesn't need to be a bug • It could be a new JavaScript API or CSS rule that older browser don't know

Slide 30

Slide 30 text

Modern API in JavaScript customElements.define( "my-element", MyElement ); Chrome 69 Firefox 63 Microsoft Edge 18

Slide 31

Slide 31 text

Modern API in CSS .item { display: contents; } Firefox 63 Microsoft Edge 18 Chrome 69

Slide 32

Slide 32 text

JavaScript in the Browser... • is time intensive • is error-prone • the errors are less observable • the code is only executed in one thread (mostly) • needs to run in a variety of browsers

Slide 33

Slide 33 text

As an architect we need to decide: Where should this be executed? On the server or on the client?

Slide 34

Slide 34 text

We should decide that on a component level

Slide 35

Slide 35 text

Header Posts Nav Rich-Text Editor Only this component needs client side rendering

Slide 36

Slide 36 text

Hybrid approach • Routing and most of the state stays on the server • The page and most of the components are rendered on the server • Individual, complex components can use a library like Preact or Vue and manage their state locally

Slide 37

Slide 37 text

View Libraries Uncompressed Size Custom Elements 0kb Custom Elements Polyfill 2kb / 13kb Polymer Lit-Element 87kb Angular Elements 197kb Stencil 16kb Preact 20kb React 169kb Source: https://tillsc.github.io/component-frameworks-test

Slide 38

Slide 38 text

Custom Elements • Define new HTML Elements and their behavior in JavaScript • Native support in modern browsers • No support for data binding and templating

Slide 39

Slide 39 text

Transclusion • Embed (parts of) other pages • The control over the exact content remains in the target document • This could even be a separate system • Much looser coupling than JSON • Transclusion doesn't even need business logic • h-include, embeddable-content

Slide 40

Slide 40 text

Shopping Cart

Yummy Cake

Slide 41

Slide 41 text

class EmbeddableContent extends HTMLElement { connectedCallback() { //… } } customElements.define("embeddable-content", EmbeddableContent);

Slide 42

Slide 42 text

let response = await fetch(href); this.innerHTML = await response.text(); element.querySelector(“a”).href

Slide 43

Slide 43 text

class EmbeddableContent extends HTMLElement { async connectedCallback() { let response = await fetch(this.link.href); this.innerHTML = await response.text(); } get link() { return this.querySelector("a"); } } customElements.define("embeddable-content", EmbeddableContent);

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Integration Patterns • Links/Forms for most things • Use Transclusion mainly for content, not highly interactive components • Great for personalized fragments to improve cacheability of the main content • Use client side JavaScript for complex components

Slide 47

Slide 47 text

Speed up Page Transitions • We want to parse and execute CSS & JS only once • We don't want to see a white page when transitioning between pages • PJAX was introduced by GitHub in 2011 • PJAX enhances links, such that they only switch the content of the instead of the entire document • Turbolinks is a modern variant of PJAX

Slide 48

Slide 48 text

Wrap-Up

Slide 49

Slide 49 text

“The Web Way” “The App Way” Initial Load Fast Slow (can be improved with Hydration) Page Transitions Fast (using PJAX) Fast Integration Patterns A lot of choices (within and between systems) Rather monolithic Resilience High Low Offline Mode Hard to impossible Possible Portable Native App Turbolinks? Possible

Slide 50

Slide 50 text

www.innoq.com innoQ Deutschland GmbH 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 innoQ Schweiz GmbH Gewerbestr. 11 CH-6330 Cham Switzerland +41 41 743 0116 Thanks! Questions? Lucas Dohmen lucas.dohmen@innoq.com moonbeamlabs