JavaScript? Gern, aber bitte in Maßen

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 2 0 1 9 / 0 7 / 1 1 G e e k t a s t i c C o n n e c t D ü s s e l d o r f JavaScript? Gerne, aber bitte in Maßen Architekturoptionen für moderne Web-Frontends
2. 2 Lucas Dohmen Senior Consultant INNOQ
3. 3 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client HTML
4. 4 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON
5. Components 5 @Component({ selector: 'my-user‘, template: '<div class="{{type}}">Hello <ng-content></ng-content></div>' }) export class MyUserComponent { // View data for data binding type = 'default‘; tags: Array<Tag>; } <my-user [type]="vip">Harry Horse</my-user>
6. React 6 Templating & data binding done differently Core concept: "Virtual DOM" Basic Example
7. 7 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON
8. 8 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client
9. Simple Backend communication 9 fetch('http://example.com/movies.json‘) .then(function(response) { return response.json(); })
10. Service Definition 10 @Injectable() export class MyCustomerService { constructor(private httpClient: HttpClient) {} customers: Array<MyCustomer>; getCustomers() { httpClient.get('/customers').subscribe(result => this.customers = result.data); } };
11. 11 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client
12. 12 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client
13. Single Page Apps – Why Routing? 13 Bookmarks? Deep links? Reload? Solution: Store some app state in the URI
14. Routing 14 RouterModule.forRoot([ { path: 'customers', component: CustomersComponent }, { path: 'customers/:id', component: CustomerComponent }, { path: '', redirectTo: '/customers' } ])
15. Prerendering 15
16. 16 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client
17. 17 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML
18. Hydration 18 How to simulate readiness? What about Events (Clicks etc)? How to match server-side HTML to client-side DOM?
19. 19 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML Hydration
20. Features of an SPA Framework 20 Data binding Templating Components Dependency Injection Routing Talking to backend services Prerendering Hydration
21. 21 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client Rendering Logic Routing HTML Hydration
22. 22 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client Rendering Logic Routing HTML Hydration State Business Logic
23. Why is more JS a problem? 23 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. JavaScript processing is slow. JavaScript is mostly executed in a single thread. If we execute a lot of business logic, we block the thread. Everyone has JS, right? JS is less resilient than HTML & CSS, while the browser is a pretty hostile environment.
24. Resilience of JavaScript 24 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
25. State Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON Client Rendering Logic Routing HTML Hydration 25 Business Logic JSON API Same functionality, different Languages! Business Logic State
26. 26 Client Side Logic is generic Presentation logic only. It enhances HTML HTML CSS Content Layout JavaScript Presentation logic
27. 27 http://rocair.herokuapp.com
28. 28 Server-side HTML without JavaScript Self Contained Components Single Page Apps Server Client
29. Frameworks 29 Useable to build self-contained components Svelte Stencil Polymer Lit-Element Vue.js React? / Preact? Angular Elements Vanilla JS (no Framework) ... Playground with different Frameworks
30. Thanks for listening 30 Lucas Dohmen (@moonbeamlabs) https://www.innoq.com https://www.innoq.com/de/podcast