JavaScript? Gern, aber bitte in Maßen

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.

B049f961d55097ef9104ff4b275a517b?s=128

Lucas Dohmen

July 11, 2019
Tweet

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