Frontend Architecture

A short introduction to frontend architecture and integration patterns

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