1 2 0 1 9 / 0 7 / 1 1 G e e k t a s t i c C o n n e c t D ü s s e l d o r f JavaScript? Gerne, aber bitte in Maßen Architekturoptionen für moderne Web-Frontends

2 Lucas Dohmen Senior Consultant INNOQ

3 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client HTML

4 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON

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

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

7 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON

8 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client

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

Service Definition 10 @Injectable() export class MyCustomerService { constructor(private httpClient: HttpClient) {} customers: Array; getCustomers() { httpClient.get('/customers').subscribe(result => this.customers = result.data); } };

11 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client

12 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client

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

Routing 14 RouterModule.forRoot([ { path: 'customers', component: CustomersComponent }, { path: 'customers/:id', component: CustomerComponent }, { path: '', redirectTo: '/customers' } ])

Prerendering 15

16 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client

17 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML

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

19 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML Hydration

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

21 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client Rendering Logic Routing HTML Hydration

22 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client Rendering Logic Routing HTML Hydration State Business Logic

Why is more JS a problem? 23 On a server, we can write logs and catch and collect exceptions. This is also possible on the client, but is much more complex and error-prone. JavaScript processing is slow. JavaScript is mostly executed in a single thread. If we execute a lot of business logic, we block the thread. Everyone has JS, right? JS is less resilient than HTML & CSS, while the browser is a pretty hostile environment.

Resilience of JavaScript 24 Modern API in JavaScript customElements.define( "my-element", MyElement ); Chrome 69 Firefox 63 Microsoft Edge 18 Modern API in CSS .item { display: contents; } Chrome 69 Firefox 63 Microsoft Edge 18

State Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON Client Rendering Logic Routing HTML Hydration 25 Business Logic JSON API Same functionality, different Languages! Business Logic State

26 Client Side Logic is generic Presentation logic only. It enhances HTML HTML CSS Content Layout JavaScript Presentation logic

27 http://rocair.herokuapp.com

28 Server-side HTML without JavaScript Self Contained Components Single Page Apps Server Client

Frameworks 29 Useable to build self-contained components Svelte Stencil Polymer Lit-Element Vue.js React? / Preact? Angular Elements Vanilla JS (no Framework) ... Playground with different Frameworks

Thanks for listening 30 Lucas Dohmen (@moonbeamlabs) https://www.innoq.com https://www.innoq.com/de/podcast