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
   

   View Slide

2. 2
   Lucas Dohmen
   Senior Consultant
   INNOQ
   

   View Slide

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

   View Slide

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

   View Slide

5. Components
   5
   @Component({
   selector: 'my-user‘,
   template: 'Hello '
   })
   export class MyUserComponent {
   // View data for data binding
   type = 'default‘;
   tags: Array;
   }
   Harry Horse
   

   View Slide

6. React
   6
   Templating & data binding done differently
   Core concept: "Virtual DOM"
   Basic Example
   

   View Slide

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

   View Slide

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

   View Slide

9. Simple Backend communication
   9
   fetch('http://example.com/movies.json‘)
   .then(function(response) {
   return response.json();
   })
   

   View Slide

10. Service Definition
    10
    @Injectable()
    export class MyCustomerService {
    constructor(private httpClient: HttpClient) {}
    customers: Array;
    getCustomers() {
    httpClient.get('/customers').subscribe(result =>
    this.customers = result.data);
    }
    };
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. Routing
    14
    RouterModule.forRoot([
    { path: 'customers', component: CustomersComponent },
    { path: 'customers/:id', component: CustomerComponent },
    { path: '', redirectTo: '/customers' }
    ])
    

    View Slide

15. Prerendering
    15
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. Features of an SPA Framework
    20
    Data binding
    Templating
    Components
    Dependency Injection
    Routing
    Talking to backend services
    Prerendering
    Hydration
    

    View Slide

21. 21
    State
    Business Logic
    Routing
    Rendering Logic
    Look & Presentation Logic
    Server
    Client
    JSON
    JSON API
    JSON Client
    Rendering Logic
    Routing
    HTML
    Hydration
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

27. 27
    http://rocair.herokuapp.com
    

    View Slide

28. 28
    Server-side
    HTML without
    JavaScript
    Self Contained
    Components
    Single Page
    Apps
    Server Client
    

    View Slide

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
    

    View Slide

30. Thanks for listening
    30
    Lucas Dohmen (@moonbeamlabs)
    https://www.innoq.com
    https://www.innoq.com/de/podcast
    

    View Slide