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

Lucas Dohmen

January 30, 2019
Tweet

More Decks by Lucas Dohmen

Other Decks in Programming

Transcript

  1. Server Client State Business Logic Routing Presentation Logic (incl. Templating)

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

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

    Look (CSS) & Behaviour (JS) JSON-API JSON-Client Business Logic State JSON
  4. 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
  5. 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
  6. Offline First • A very good reason to go the

    “SPA route” • ⚠ synchronising state is more complicated than you think iCloud
  7. 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
  8. 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
  9. Average mobile phone • Motorola Moto G4 • We need

    to test our apps on representative devices Alex Russel: Can You Afford It?
  10. 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
  11. Browser development Chrome 66 Firefox 61 Safari 11 Edge 42

    Opera Mini Samsung Internet UC Browser Chrome 42 Firefox 55 IE11 IE10 Safari 7
  12. Errors in CSS .item { foo: bar; color: red; }

    Unknown, is ignored Is still interpreted
  13. Errors in HTML <foo> <strong> X </strong> </foo> Unknown, is

    treated as a <span> Is still evaluated
  14. 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
  15. 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
  16. As an architect we need to decide: Where should this

    be executed? On the server or on the client?
  17. 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
  18. 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
  19. Custom Elements • Define new HTML Elements and their behavior

    in JavaScript • Native support in modern browsers • No support for data binding and templating
  20. 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
  21. class EmbeddableContent extends HTMLElement { connectedCallback() { //… } }

    customElements.define("embeddable-content", EmbeddableContent);
  22. 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);
  23. 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
  24. 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
  25. “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
  26. 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 [email protected] moonbeamlabs