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.

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. Single Page Apps – Why Routing?
   8
   Bookmarks?
   Deep links?
   Reload?
   Solution:
   Store some app state in the URI
   

   View Slide

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

   View Slide

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

   View Slide

9. Prerendering
   11
   

   View Slide

10. Hydration
    12
    How to simulate readiness?
    What about Events (Clicks etc)?
    How to match server-side HTML to
    client-side DOM?
    

    View Slide

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

    View Slide

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

    View Slide

13. Special case: Searchability
    15
    No Hydration needed
    

    View Slide

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!
    

    View Slide

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
    

    View Slide

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?
    

    View Slide

17. 19 The cost of JavaScript in 2019
    

    View Slide

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.
    

    View Slide

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 #
    

    View Slide

20. 22
    ROCA
    (Resource-oriented client architecture)
    ROCA-style.org
    

    View Slide

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
    =
    

    View Slide

22. 24
    Client Side Logic is generic Presentation logic only. It enhances HTML
    HTML CSS
    Content Layout
    JavaScript
    Presentation logic
    

    View Slide

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
    

    View Slide

24. 26
    http://rocair.herokuapp.com
    

    View Slide

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
    

    View Slide