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

Frontend Architecture

B049f961d55097ef9104ff4b275a517b?s=47 Lucas Dohmen
May 11, 2022
28

Frontend Architecture

A short introduction to frontend architecture and integration patterns

B049f961d55097ef9104ff4b275a517b?s=128

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
  2. What We Will Cover • Architecture Variants • Integration Patterns

  3. State Business Logic Routing Rendering Logic

  4. SSR State Business Logic Routing Rendering Logic

  5. State Business Logic Routing Rendering Logic

  6. Templating 6 Demo <div data-bind="template: { name: 'person-template', foreach: people

    }" ></div> ... <scrіpt type="text/html" id="person-template"> <h3 data-bind="text: name"></h3> <p>Age: <span data-bind="text: personAge"></span></p> </scrіpt>
  7. Data binding 7 var myViewModel = { personName: ko.observable('Bob‘), personAge:

    ko.observable(123) }; Hallo <span data-bind="text:personName"></span>! myViewModel.personName('Mary'); Demo
  8. Custom Elements 8 Example class MyElement extends HTMLElement { connectedCallback()

    { // ... do something inside the element } } customElements.define('my-element', MyElement); <!-- usage --> <my-element test="attribute">Hello World</my-element>
  9. Components 9 @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>
  10. React 10 Templating & data binding done differently Core concept:

    "Virtual DOM" Basic Example
  11. State Business Logic Rendering Logic API Client API State Business

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

    })
  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…
  14. State Business Logic Rendering Logic CSR API Client API State

    Business Logic Routing *
  15. Single Page Apps – Why Routing? 15 Bookmarks? Deep links?

    Reload? Solution: Store some app state in the URI
  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
  17. State Business Logic Rendering Logic API Client API State Business

    Logic Routing Routing Rendering Logic v v
  18. Prerendering 18

  19. Hydration 19 How to simulate readiness? What about Events (Clicks

    etc)? How to match server-side HTML to client-side DOM?
  20. State Business Logic Rendering Logic API Client API State Business

    Logic Routing CSR with Prerendering Routing Rendering Logic v v Hydration
  21. Special case: Searchability 21 No Hydration needed

  22. Features of an SPA Framework 22 Data binding Templating Components

    Dependency Injection Routing Talking to backend services Prerendering Hydration
  23. 23 SPA architecture variants

  24. Classic SPA Architecture 24 Component 1 View Component 2 Component

    … Service 1 Service 2 Service 3 Model App
  25. Flux SPA Architecture 25 Component 1 View Component 2 Component

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

    / Dispatcher / … App Component 2 Model / Service / Dispatcher / … Component … Model / Service / Dispatcher / … Router Component
  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 / …
  28. State Business Logic Rendering Logic API Client API State Business

    Logic Self Contained Components Routing Rendering Logic of the page of components
  29. 29 Edge Rendering

  30. Latency Browser DC CDN Latency Latency

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

    Logic
  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
  33. 33 Consequences

  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
  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?
  36. 36 ROCA (Resource-oriented client architecture) ROCA-style.org

  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 =
  38. State Business Logic Rendering Logic API Client API State ROCA

    Routing Rendering Logic
  39. 39 Integration

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

    spanning multiple systems 40
  41. How to integrate? Backend • RESTful APIs, Central Brokers, Database,

    SOAP, Data replication, Build dependencies, ... Frontend? 41
  42. Frontend integration? 42

  43. Links Magic integration concept User doesn't recognize system changes as

    long as the styling stays the same 43
  44. Links (redirection) Where to go back after completing (or aborting)

    a workflow? Return URIs may cascade Simple but very powerful concept 44
  45. Monolithic SPA Dedicated frontend app team Tends to grow Backend

    are API only 45
  46. Modular SPA Teams expose own functionality via app modules Modules

    may be loaded asynchronous Framework updates are hard 46
  47. Flat SPA Backends with own UIs Central App should not

    implement much logic Suitable for Dashboards 47
  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
  49. Transclusion Clientside Serverside (ESI/SSI) Challenge: CSS/JS 49

  50. IFrames Nearly as secure as Links Nobody likes IFrames... ...

    but nobody knows why 50
  51. https://crimson.innoq.org 51