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