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

Frontend Architecture

Lucas Dohmen
May 11, 2022
60

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
  2. 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>
  3. Data binding 7 var myViewModel = { personName: ko.observable('Bob‘), personAge:

    ko.observable(123) }; Hallo <span data-bind="text:personName"></span>! myViewModel.personName('Mary'); Demo
  4. 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>
  5. 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>
  6. 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…
  7. Single Page Apps – Why Routing? 15 Bookmarks? Deep links?

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

    Logic Routing Routing Rendering Logic v v
  10. Hydration 19 How to simulate readiness? What about Events (Clicks

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

    Logic Routing CSR with Prerendering Routing Rendering Logic v v Hydration
  12. Features of an SPA Framework 22 Data binding Templating Components

    Dependency Injection Routing Talking to backend services Prerendering Hydration
  13. Classic SPA Architecture 24 Component 1 View Component 2 Component

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

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

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

    Logic Self Contained Components Routing Rendering Logic of the page of components
  18. 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
  19. 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
  20. 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?
  21. 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 =
  22. How to integrate? Backend • RESTful APIs, Central Brokers, Database,

    SOAP, Data replication, Build dependencies, ... Frontend? 41
  23. Links (redirection) Where to go back after completing (or aborting)

    a workflow? Return URIs may cascade Simple but very powerful concept 44
  24. Modular SPA Teams expose own functionality via app modules Modules

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

    implement much logic Suitable for Dashboards 47
  26. 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