JavaScript? Gern, aber bitte in Maßen

This is a presentation I gave at [Tomorrow Ländle](http://www.tomorrow-ländle.de) in Stuttgart (the title is German, but the slides are in English).

Transcript

1. 30.1.2019 JavaScript? Gern,aber bitte in Maßen Lucas Dohmen
2. Server Client HTML State Business Logic Routing Presentation Logic (incl. Templating) Look (CSS) & Behaviour (JS)
3. But what about... React Preact Ember Angular Vue Polymer Stencil Elm Backbone
4. Lucas Dohmen
 Senior Consultant innoQ Deutschland GmbH “I build Web applications and fiddle with databases”
5. Server Client HTML State Business Logic Routing Presentation Logic (incl. Templating) Look (CSS) & Behaviour (JS)
6. Server Client State Business Logic Routing Presentation Logic (incl. Templating) Look (CSS) & Behaviour (JS) JSON
7. Server Client JSON State Business Logic Routing Presentation Logic (incl. Templating) Look (CSS) & Behaviour (JS)
8. Server Client State Business Logic Routing Presentation Logic (incl. Templating) Look (CSS) & Behaviour (JS) JSON-API JSON-Client JSON
9. Server Client State Business Logic Routing Presentation Logic (incl. Templating) Look (CSS) & Behaviour (JS) JSON-API JSON-Client Business Logic JSON
10. Server Client State Business Logic Routing Presentation Logic (incl. Templating) Look (CSS) & Behaviour (JS) JSON-API JSON-Client Business Logic State JSON
11. 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
12. 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
14. iCloud
15. Offline First • A very good reason to go the “SPA route” • ⚠ synchronising state is more complicated than you think iCloud
16. 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
17. Why is moving code to the browser a problem?
18. 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
19. Average mobile phone • Motorola Moto G4 • We need to test our apps on representative devices Alex Russel: Can You Afford It?
20. Addy Osmani: The Cost of JavaScript
21. Addy Osmani: The Cost of JavaScript
22. 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
23. Server side development JDK 7
24. Browser development Chrome 66 Firefox 61 Safari 11 Edge 42 Opera Mini Samsung Internet UC Browser Chrome 42 Firefox 55 IE11 IE10 Safari 7
25. Declarative vs. imperative: HTML & CSS are more resilient
26. Errors in JavaScript a(); b(); c(); Throws an Exception Is never executed
27. Errors in CSS .item { foo: bar; color: red; } Unknown, is ignored Is still interpreted
28. Errors in HTML <foo> <strong> X </strong> </foo> Unknown, is treated as a <span> Is still evaluated
29. 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
30. Modern API in JavaScript customElements.define( "my-element", MyElement ); Chrome 69 Firefox 63 Microsoft Edge 18
31. Modern API in CSS .item { display: contents; } Firefox 63 Microsoft Edge 18 Chrome 69
32. 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
33. As an architect we need to decide: Where should this be executed? On the server or on the client?
34. We should decide that on a component level
35. Header Posts Nav Rich-Text Editor Only this component needs client side rendering
36. 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
37. 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
38. Custom Elements • Define new HTML Elements and their behavior in JavaScript • Native support in modern browsers • No support for data binding and templating
39. 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
40. <embeddable-content> <a href="/cart.html">Shopping Cart</a> </embeddable-content> <embeddable-content> <ul> <li>Yummy Cake</li> </ul> </embeddable-content>
41. class EmbeddableContent extends HTMLElement { connectedCallback() { //… } } customElements.define("embeddable-content", EmbeddableContent);
42. let response = await fetch(href); this.innerHTML = await response.text(); element.querySelector(“a”).href
43. 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);
46. 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
47. 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 <body> instead of the entire document • Turbolinks is a modern variant of PJAX
48. Wrap-Up
49. “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
50. 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