Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Frontend Architecture
Search
Lucas Dohmen
May 11, 2022
1
66
Frontend Architecture
A short introduction to frontend architecture and integration patterns
Lucas Dohmen
May 11, 2022
Tweet
Share
More Decks by Lucas Dohmen
See All by Lucas Dohmen
Weird Parts
moonglum
0
79
Webanwendungen – Eine Frage des Stils
moonglum
0
260
AdequateJS: Where should I run my Code?
moonglum
0
45
Per Anhalter durch JavaScript
moonglum
0
140
Architectures for Modern Web Front Ends
moonglum
2
470
Per Anhalter durch JavaScript
moonglum
0
180
Architectures for Modern Web Front Ends
moonglum
0
100
AdequateJS: Wie viel JavaScript darf es denn sein?
moonglum
1
360
JavaScript? Gern, aber bitte in Maßen
moonglum
0
180
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
65
4.4k
Statistics for Hackers
jakevdp
796
220k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
How GitHub (no longer) Works
holman
311
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Agile that works and the tools we love
rasmusluckow
327
21k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Writing Fast Ruby
sferik
626
61k
Practical Orchestrator
shlominoach
186
10k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Docker and Python
trallard
40
3.1k
Transcript
1 W e b A r c h i t
e c t u r e Frontend Architecture
What We Will Cover • Architecture Variants • Integration Patterns
State Business Logic Routing Rendering Logic
SSR State Business Logic Routing Rendering Logic
State Business Logic Routing Rendering Logic
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>
Data binding 7 var myViewModel = { personName: ko.observable('Bob‘), personAge:
ko.observable(123) }; Hallo <span data-bind="text:personName"></span>! myViewModel.personName('Mary'); Demo
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>
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>
React 10 Templating & data binding done differently Core concept:
"Virtual DOM" Basic Example
State Business Logic Rendering Logic API Client API State Business
Logic
Backend communication with Fetch 12 fetch('http://example.com/movies.json‘) .then(function(response) { return response.json();
})
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…
State Business Logic Rendering Logic CSR API Client API State
Business Logic Routing *
Single Page Apps – Why Routing? 15 Bookmarks? Deep links?
Reload? Solution: Store some app state in the URI
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
State Business Logic Rendering Logic API Client API State Business
Logic Routing Routing Rendering Logic v v
Prerendering 18
Hydration 19 How to simulate readiness? What about Events (Clicks
etc)? How to match server-side HTML to client-side DOM?
State Business Logic Rendering Logic API Client API State Business
Logic Routing CSR with Prerendering Routing Rendering Logic v v Hydration
Special case: Searchability 21 No Hydration needed
Features of an SPA Framework 22 Data binding Templating Components
Dependency Injection Routing Talking to backend services Prerendering Hydration
23 SPA architecture variants
Classic SPA Architecture 24 Component 1 View Component 2 Component
… Service 1 Service 2 Service 3 Model App
Flux SPA Architecture 25 Component 1 View Component 2 Component
… Dispatcher 1 Store 1 App Dispatcher 2 Store 2
Self Contained Component SPA 26 Component 1 Model / Service
/ Dispatcher / … App Component 2 Model / Service / Dispatcher / … Component … Model / Service / Dispatcher / … Router Component
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 / …
State Business Logic Rendering Logic API Client API State Business
Logic Self Contained Components Routing Rendering Logic of the page of components
29 Edge Rendering
Latency Browser DC CDN Latency Latency
ESR State Business Logic API State Business Logic Routing Rendering
Logic
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 Consequences
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
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 ROCA (Resource-oriented client architecture) ROCA-style.org
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 =
State Business Logic Rendering Logic API Client API State ROCA
Routing Rendering Logic
39 Integration
Why integration? Legacy systems Microservices Internet services In general: Workflows
spanning multiple systems 40
How to integrate? Backend • RESTful APIs, Central Brokers, Database,
SOAP, Data replication, Build dependencies, ... Frontend? 41
Frontend integration? 42
Links Magic integration concept User doesn't recognize system changes as
long as the styling stays the same 43
Links (redirection) Where to go back after completing (or aborting)
a workflow? Return URIs may cascade Simple but very powerful concept 44
Monolithic SPA Dedicated frontend app team Tends to grow Backend
are API only 45
Modular SPA Teams expose own functionality via app modules Modules
may be loaded asynchronous Framework updates are hard 46
Flat SPA Backends with own UIs Central App should not
implement much logic Suitable for Dashboards 47
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
Transclusion Clientside Serverside (ESI/SSI) Challenge: CSS/JS 49
IFrames Nearly as secure as Links Nobody likes IFrames... ...
but nobody knows why 50
https://crimson.innoq.org 51