Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frontend Architecture

Lucas Dohmen
May 11, 2022
53

Frontend Architecture

A short introduction to frontend architecture and integration patterns

Lucas Dohmen

May 11, 2022
Tweet

Transcript

  1. 1
    W e b A r c h i t e c t u r e
    Frontend
    Architecture

    View full-size slide

  2. What We Will Cover
    • Architecture Variants
    • Integration Patterns

    View full-size slide

  3. State
    Business
    Logic
    Routing
    Rendering
    Logic

    View full-size slide

  4. SSR
    State
    Business
    Logic
    Routing
    Rendering
    Logic

    View full-size slide

  5. State
    Business
    Logic
    Routing
    Rendering
    Logic

    View full-size slide

  6. Templating
    6
    Demo

    ...


    Age:

    View full-size slide

  7. Data binding
    7
    var myViewModel = {
    personName: ko.observable('Bob‘),
    personAge: ko.observable(123)
    };
    Hallo !
    myViewModel.personName('Mary');
    Demo

    View full-size slide

  8. Custom Elements
    8
    Example
    class MyElement extends HTMLElement {
    connectedCallback() {
    // ... do something inside the element
    }
    }
    customElements.define('my-element', MyElement);

    Hello World

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. State
    Business
    Logic
    Rendering
    Logic
    API
    Client
    API
    State
    Business
    Logic

    View full-size slide

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

    View full-size slide

  13. Ember Data
    13
    App.Article = DS.Model.extend({
    title: DS.attr('string'),
    content: DS.attr('string'),
    comments: DS.hasMany('comment')
    });
    App.Comment = DS.Model.extend({
    author: DS.attr('string'),
    content: DS.attr('string'),
    article: DS.belongsTo('article')
    });
    let article = this.store.find('article', 32);
    GET /article/32 HTTP/1.1…
    article.get('comments').forEach(...
    GET /comments?id[]=4711&id[]=4712 HTTP/1.1…

    View full-size slide

  14. State
    Business
    Logic
    Rendering
    Logic
    CSR
    API
    Client
    API
    State
    Business
    Logic
    Routing
    *

    View full-size slide

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

    View full-size slide

  16. Routing
    16
    RouterModule.forRoot([
    { path: 'customers', component: CustomersComponent },
    { path: 'customers/:id', component: CustomerComponent },
    { path: '', redirectTo: '/customers' }
    ])
    without
    http://example.com/index.html#/
    http://example.com/index.html#/customers
    http://example.com/index.html#/customers/4711
    History API?
    with
    http://example.com/
    http://example.com/customers
    http://example.com/customers/4711

    View full-size slide

  17. State
    Business
    Logic
    Rendering
    Logic
    API
    Client
    API
    State
    Business
    Logic
    Routing Routing
    Rendering
    Logic
    v
    v

    View full-size slide

  18. Prerendering
    18

    View full-size slide

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

    View full-size slide

  20. State
    Business
    Logic
    Rendering
    Logic
    API
    Client
    API
    State
    Business
    Logic
    Routing
    CSR with Prerendering
    Routing
    Rendering
    Logic
    v
    v
    Hydration

    View full-size slide

  21. Special case: Searchability
    21
    No Hydration needed

    View full-size slide

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

    View full-size slide

  23. 23
    SPA architecture variants

    View full-size slide

  24. Classic SPA Architecture
    24
    Component 1
    View
    Component 2 Component …
    Service 1 Service 2 Service 3
    Model
    App

    View full-size slide

  25. Flux SPA Architecture
    25
    Component 1
    View
    Component 2 Component …
    Dispatcher 1 Store 1
    App
    Dispatcher 2 Store 2

    View full-size slide

  26. Self Contained Component SPA
    26
    Component 1
    Model / Service /
    Dispatcher / …
    App
    Component 2
    Model / Service /
    Dispatcher / …
    Component …
    Model / Service /
    Dispatcher / …
    Router Component

    View full-size slide

  27. Self Contained Components
    27
    Component 1
    Model / Service /
    Dispatcher / …
    Web Browser: (server-side rendered) HTML/DOM
    Component 2
    Model / Service /
    Dispatcher / …
    Component …
    Model / Service /
    Dispatcher / …

    View full-size slide

  28. State
    Business
    Logic
    Rendering
    Logic
    API
    Client
    API
    State
    Business
    Logic
    Self Contained Components
    Routing
    Rendering
    Logic
    of the page
    of components

    View full-size slide

  29. 29
    Edge Rendering

    View full-size slide

  30. Latency
    Browser DC
    CDN
    Latency Latency

    View full-size slide

  31. ESR
    State
    Business
    Logic
    API
    State
    Business
    Logic
    Routing
    Rendering
    Logic

    View full-size slide

  32. CSR with Edge Prerendering
    State
    Business
    Logic
    Routing
    Hydration
    State
    Business
    Logic
    API
    Client
    API
    Rendering
    Logic
    State
    Business
    Logic
    Routing
    Rendering
    Logic
    v
    v

    View full-size slide

  33. 33
    Consequences

    View full-size slide

  34. Executing Code
    No Trust Trust Trust
    No Control Low Control High Control
    Low Observability Low Observability High Observability
    No Latency to User Low Latency to User High Latency to User

    View full-size slide

  35. Rendering
    Logic
    API
    Client
    API
    Routing
    CSR with Prerendering
    Routing
    Rendering
    Logic
    v
    v
    Hydration
    State
    Business
    Logic
    State
    Business
    Logic
    Same functionality,
    different implementation?

    View full-size slide

  36. 36
    ROCA
    (Resource-oriented client architecture)
    ROCA-style.org

    View full-size slide

  37. ROCA
    37
    RESTful Server-side HTML (SSR)
    All application logic on server
    No duplicated logic on client
    +
    No application logic on client!
    Client-side (self contained) JavaScript components
    =

    View full-size slide

  38. State
    Business
    Logic
    Rendering
    Logic
    API
    Client
    API
    State
    ROCA
    Routing
    Rendering
    Logic

    View full-size slide

  39. 39
    Integration

    View full-size slide

  40. Why integration?
    Legacy systems
    Microservices
    Internet services
    In general: Workflows spanning multiple systems
    40

    View full-size slide

  41. How to integrate?
    Backend
    • RESTful APIs, Central Brokers, Database, SOAP,
    Data replication, Build dependencies, ...
    Frontend?
    41

    View full-size slide

  42. Frontend integration?
    42

    View full-size slide

  43. Links
    Magic integration
    concept
    User doesn't recognize
    system changes as long
    as the styling stays the
    same
    43

    View full-size slide

  44. Links (redirection)
    Where to go back after
    completing (or
    aborting) a workflow?
    Return URIs may
    cascade
    Simple but very
    powerful concept
    44

    View full-size slide

  45. Monolithic SPA
    Dedicated frontend
    app team
    Tends to grow
    Backend are API only
    45

    View full-size slide

  46. Modular SPA
    Teams expose own
    functionality via app
    modules
    Modules may be loaded
    asynchronous
    Framework updates
    are hard
    46

    View full-size slide

  47. Flat SPA
    Backends with own UIs
    Central App should not
    implement much logic
    Suitable for
    Dashboards
    47

    View full-size slide

  48. Complex DOM components
    Teams develop web
    components for their
    functionality
    CSS may be bundled or
    even isolated
    (ShadowDOM)
    Components should be
    loaded from the
    backend defining them
    48

    View full-size slide

  49. Transclusion
    Clientside
    Serverside (ESI/SSI)
    Challenge: CSS/JS
    49

    View full-size slide

  50. IFrames
    Nearly as secure as
    Links
    Nobody likes IFrames...
    ... but nobody knows
    why
    50

    View full-size slide

  51. https://crimson.innoq.org
    51

    View full-size slide