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
75
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
89
Webanwendungen – Eine Frage des Stils
moonglum
0
270
AdequateJS: Where should I run my Code?
moonglum
0
54
Per Anhalter durch JavaScript
moonglum
0
160
Architectures for Modern Web Front Ends
moonglum
2
480
Per Anhalter durch JavaScript
moonglum
0
190
Architectures for Modern Web Front Ends
moonglum
0
110
AdequateJS: Wie viel JavaScript darf es denn sein?
moonglum
1
380
JavaScript? Gern, aber bitte in Maßen
moonglum
0
200
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Invisible Side of Design
smashingmag
299
50k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
It's Worth the Effort
3n
184
28k
Fireside Chat
paigeccino
34
3.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Designing for Performance
lara
604
68k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Designing for humans not robots
tammielis
250
25k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
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