AdequateJS: Wie viel JavaScript darf es denn sein?

B049f961d55097ef9104ff4b275a517b?s=47 Lucas Dohmen
September 18, 2019

AdequateJS: Wie viel JavaScript darf es denn sein?

Eine moderne Web-Anwendung wird selbstverständlich in JavaScript implementiert, erzeugt ihr HTML clientseitig im Browser selbst und kommuniziert mit dem Server nur, um über ein HTTP/REST-API Daten im JSON-Format abzuholen – das, so scheint es, ist die gängige Weisheit. Aber haben die bewährten Ansätze wie serverseitiges HTML und „Progressive Enhancement“ tatsächlich ausgedient? In diesem Talk möchten wir darüber diskutieren, welche Vor- und Nachteile es hat, eine Anwendung in diesem Stil zu bauen und wieso teilweise als altmodisch angesehene Ansätze für viele Anwendungen eine gute Wahl sind.

B049f961d55097ef9104ff4b275a517b?s=128

Lucas Dohmen

September 18, 2019
Tweet

Transcript

  1. 1 1 7 . S e p t e m

    b e r C o l o g n e . r b AdequateJS Lucas Dohmen
  2. 2 State Business Logic Routing Rendering Logic Look & Presentation

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

    Logic Server Client JSON
  4. 5 State Business Logic Routing Rendering Logic Look & Presentation

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

    Logic Server Client JSON JSON API JSON Client
  6. Single Page Apps – Why Routing? 8 Bookmarks? Deep links?

    Reload? Solution: Store some app state in the URI
  7. 9 State Business Logic Routing Rendering Logic Look & Presentation

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

    Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML
  9. Prerendering 11

  10. Hydration 12 How to simulate readiness? What about Events (Clicks

    etc)? How to match server-side HTML to client-side DOM?
  11. 13 State Business Logic Routing Rendering Logic Look & Presentation

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

    Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML Hydration
  13. Special case: Searchability 15 No Hydration needed

  14. 16 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 Same functionality, different languages!
  15. 17 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 JavaScript
  16. 18 Everyone has JavaScript, right? All your users are non-JS

    while they're downloading your JS If they're on a train and their net connection goes away before your JavaScript loads, then there's no JavaScript. Did the HTTP request for the JavaScript complete? Does the corporate firewall block JavaScript? Does their ISP or mobile operator interfere with downloaded JavaScript? Does their browser support the JavaScript you’ve written? Do your users get the JavaScript?
  17. 19 The cost of JavaScript in 2019

  18. Moving code to the client 20 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. Resilience of JavaScript 21 Modern API in JavaScript customElements.define( "my-element",

    MyElement ); Chrome 69 ! Firefox 63 ! Microsoft Edge 18 " Modern API in CSS .item { display: contents; } Chrome 69 # Firefox 63 ! Microsoft Edge 18 #
  20. 22 ROCA (Resource-oriented client architecture) ROCA-style.org

  21. ROCA 23 RESTful Server-side HTML (SSR) Application logic only on

    server No duplicated logic on client + No application logic on client! Client-side (self contained) JavaScript components =
  22. 24 Client Side Logic is generic Presentation logic only. It

    enhances HTML HTML CSS Content Layout JavaScript Presentation logic
  23. Progressive Enhancement 25 A web page needs to work without

    graphical elements, CSS and JS This makes sure, our page will even work under unfavorable circumstances We also lay the foundation for accessibility Doesn't mean that everything needs to work without CSS and JavaScript It means that the fundamental functionality of our web page works with HTML only Every thing that goes beyond that is seen as an enhancement
  24. 26 http://rocair.herokuapp.com

  25. Danke! Fragen? 27 Lucas Dohmen lucas.dohmen@innoq.com +49 151 75062496 @moonbeamlabs

    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