Tweet
Tweet

Slide 1

Slide 1 text

1 W e b A r c h i t e c t u r e Frontend Architecture

Slide 2

Slide 2 text

What We Will Cover • Architecture Variants • Integration Patterns

Slide 3

Slide 3 text

State Business Logic Routing Rendering Logic

Slide 4

Slide 4 text

SSR State Business Logic Routing Rendering Logic

Slide 5

Slide 5 text

State Business Logic Routing Rendering Logic

Slide 6

Slide 6 text

Templating 6 Demo
...

Age:

Slide 7

Slide 7 text

Data binding 7 var myViewModel = { personName: ko.observable('Bob‘), personAge: ko.observable(123) }; Hallo ! myViewModel.personName('Mary'); Demo

Slide 8

Slide 8 text

Custom Elements 8 Example class MyElement extends HTMLElement { connectedCallback() { // ... do something inside the element } } customElements.define('my-element', MyElement); Hello World

Slide 9

Slide 9 text

Components 9 @Component({ selector: 'my-user', template: '
Hello
' }) export class MyUserComponent { // View data for data binding type = 'default'; tags: Array; } Harry Horse

Slide 10

Slide 10 text

React 10 Templating & data binding done differently Core concept: "Virtual DOM" Basic Example

Slide 11

Slide 11 text

State Business Logic Rendering Logic API Client API State Business Logic

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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…

Slide 14

Slide 14 text

State Business Logic Rendering Logic CSR API Client API State Business Logic Routing *

Slide 15

Slide 15 text

Single Page Apps – Why Routing? 15 Bookmarks? Deep links? Reload? Solution: Store some app state in the URI

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

State Business Logic Rendering Logic API Client API State Business Logic Routing Routing Rendering Logic v v

Slide 18

Slide 18 text

Prerendering 18

Slide 19

Slide 19 text

Hydration 19 How to simulate readiness? What about Events (Clicks etc)? How to match server-side HTML to client-side DOM?

Slide 20

Slide 20 text

State Business Logic Rendering Logic API Client API State Business Logic Routing CSR with Prerendering Routing Rendering Logic v v Hydration

Slide 21

Slide 21 text

Special case: Searchability 21 No Hydration needed

Slide 22

Slide 22 text

Features of an SPA Framework 22 Data binding Templating Components Dependency Injection Routing Talking to backend services Prerendering Hydration

Slide 23

Slide 23 text

23 SPA architecture variants

Slide 24

Slide 24 text

Classic SPA Architecture 24 Component 1 View Component 2 Component … Service 1 Service 2 Service 3 Model App

Slide 25

Slide 25 text

Flux SPA Architecture 25 Component 1 View Component 2 Component … Dispatcher 1 Store 1 App Dispatcher 2 Store 2

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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 / …

Slide 28

Slide 28 text

State Business Logic Rendering Logic API Client API State Business Logic Self Contained Components Routing Rendering Logic of the page of components

Slide 29

Slide 29 text

29 Edge Rendering

Slide 30

Slide 30 text

Latency Browser DC CDN Latency Latency

Slide 31

Slide 31 text

ESR State Business Logic API State Business Logic Routing Rendering Logic

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

33 Consequences

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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?

Slide 36

Slide 36 text

36 ROCA (Resource-oriented client architecture) ROCA-style.org

Slide 37

Slide 37 text

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 =

Slide 38

Slide 38 text

State Business Logic Rendering Logic API Client API State ROCA Routing Rendering Logic

Slide 39

Slide 39 text

39 Integration

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

How to integrate? Backend • RESTful APIs, Central Brokers, Database, SOAP, Data replication, Build dependencies, ... Frontend? 41

Slide 42

Slide 42 text

Frontend integration? 42

Slide 43

Slide 43 text

Links Magic integration concept User doesn't recognize system changes as long as the styling stays the same 43

Slide 44

Slide 44 text

Links (redirection) Where to go back after completing (or aborting) a workflow? Return URIs may cascade Simple but very powerful concept 44

Slide 45

Slide 45 text

Monolithic SPA Dedicated frontend app team Tends to grow Backend are API only 45

Slide 46

Slide 46 text

Modular SPA Teams expose own functionality via app modules Modules may be loaded asynchronous Framework updates are hard 46

Slide 47

Slide 47 text

Flat SPA Backends with own UIs Central App should not implement much logic Suitable for Dashboards 47

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Transclusion Clientside Serverside (ESI/SSI) Challenge: CSS/JS 49

Slide 50

Slide 50 text

IFrames Nearly as secure as Links Nobody likes IFrames... ... but nobody knows why 50

Slide 51

Slide 51 text

https://crimson.innoq.org 51