Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript? Gern, aber bitte in Maßen

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).

B049f961d55097ef9104ff4b275a517b?s=128

Lucas Dohmen

January 30, 2019
Tweet

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
  13. None
  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);
  44. None
  45. None
  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