VertikalisierteFrontends_WebComponents.pdf

Große Systeme und kleine, agile Teams. Bei der Vertikalisierung zerschneiden wir unsere Systeme in viele kleine Vertikalen, mit dem Ziel, möglichst unabhängig voneinander zu sein. Und stehen dann vor der Herausforderung, uns wieder möglichst nahtlos miteinander zu integrieren.

Dies gilt insbesondere für das Frontend, das aus einem Guss erscheinen soll. Wie müssen solche Frontends aussehen, um erfolgreich zu sein? Welche besonderen Anforderungen gibt es? Auf was müssen wir achten? Und: Welche Technologie wählen wir idealerweise?

Im Laufe des Vortrags werden wir sehen, ob Web Components in diesem Kontext eine gute Idee sind und welche Vor- und Nachteile sie bieten.

Transcript

1. Web Components und vertikalisierte Frontends - the perfect fit? 0 4 . 0 9 . 2 0 1 9 N Ü R N B E R G / H E R B S T C A M P U S Foto: Ivandrei Pretorius
2. FRANZISKA DESSART Senior Consultant bei INNOQ Deutschland GmbH arbeitet remote & in Teilzeit 2
3. 3 Agenda •Web Components •Vertikalisierung •Self Contained Systems •Frontends in Vertikalen •Best Practices •Fazit Foto: Gabriel Terrizzi
4. 4 Web Components
5. 5 Web Components are a set of features that provide a standard component model for the Web allowing for encapsulation and interoperability of individual HTML elements. https://en.wikipedia.org/wiki/Web_Components
6. 6 Web Components the idea itself is not so new •2011: introduced by Alex Russell •2013: Polymer library released native support in (almost) all major 
 browsers since october 2018 •apart from IE •Edge is still working on it •polyfills exist https://caniuse.com/#search=custom%20element
7. 7 Web Components consist of •custom elements •templates •shadow DOM •[es6 modules]
8. 8 Autonomous Custom Element
9. 9 Autonomous Custom Element
10. 10 Customized Built-in Element
11. 11 Customized Built-in Element https://codepen.io/lapaqui/pen/QWLMjdX
12. 12 Lifecycle Hooks •constructor() 
 //instance is created •connectedCallback() 
 //instance is inserted into the DOM •disconnectedCallback() 
 //instance is removed from the DOM •attributeChangedCallback( attrName, oldVal, newVal ) 
 //one of the observed attributes of the corresponding html element is changed •adoptedCallback() 
 //instance is adopted via document.adoptNode( el )
13. 13 ObservedAttributes https://codepen.io/lapaqui/pen/aboyWYb
14. 14 HTML Templates https://codepen.io/lapaqui/pen/yLBoYje
15. 15 Shadow DOM
16. 16 Shadow DOM
17. 17 Shadow DOM
18. 18 Shadow DOM https://codepen.io/lapaqui/pen/yLBoOYE
19. 19 Lit-Element
20. 20 Vertikalisierung Foto: James Wheeler
21. 21 Softwareentwicklung
22. 22 hierarchisch gesteuert
23. 23 technischer Schnitt
24. 24 Projekte
25. 25 selbstbestimmt
26. 26 Gilden
27. 27 fachlicher Schnitt
28. 28 Produkte
29. 29 SCS Self Contained Systems Foto: pixabay
30. 30 Self Contained Systems http:/ /scs-architecture.org/
31. 31 Asynchrone Kommunikation Datenreplikation, Events
32. 32 Self Contained Systems
33. 33 Link Integration
34. 34 Transklusion https://www.innoq.com/de/talks/2017/09/transklusion-herbstcampus/
35. 35 Redirects
36. 36 JSON-Home Content-Type: application/json-home { "resources": { "/key/to/myresource": { "href": "/vertical1/feed/myresource" }, "/key/to/anotherresource": { "hrefTemplate": "/vertical1/feed/myresource/{item_id}", "hrefVars": { "item_id": "https://link/to/documentation" }, "hints": { "allow": ["GET", "PUT", "DELETE", "PATCH"], "formats": { "application/json": {} }}}}} https://mnot.github.io/I-D/json-home
37. 37 vertikalisierte Frontends
38. 38 = Microfrontends ?
39. 39 Microfrontends sind Frontends verschiedener Größe, die – analog zu Microservices – jedes für sich stehen können, unabhängig voneinander sind, und in ihrer Summe dennoch ein großes Ganzes ergeben. 

40. 40 SCS
41. 41 SCS
42. 42 App-Shell
43. 43 App-Shell
44. 44 Statische Seiten, JS-Apps & API-Gateway
45. 45 Statische Seiten, JS-Apps & API-Gateway
46. 46 Best Practices
47. 47 Komponenten
48. 48 Komponenten
49. 49 Komponenten
50. 50 „ROCA-Style“ https://roca-style.org/
51. 51 „ROCA-Style“ https://roca-style.org/
52. 52 „ROCA-Style“ https:/ /www.youtube.com/watch?v=164EjUObiT4 https://roca-style.org/
53. 53 Atomic Design
54. 54 Atomic Design
55. 55 BEM http://getbem.com/
56. 56 Herausforderung „nahtlose Integration“ Foto: Michael Gaida
57. 57 Pattern Library / Living Style Guide •Basis-Set von Komponenten, die „überall“ gebraucht werden •Vertikalen dürfen und sollen eigene Komponenten erstellen •vor allem für eher technische Komponenten •fachliche Komponenten gehören in die Vertikale •Templates und Layout gehören in die Vertikale •ggf. Wrapper-Komponenten um Includes (für Transklusion)
58. 58 Semantic Versioning https://semver.org/
59. 59 Semantic Versioning https://semver.org/
60. 60 Zurück zur eigentlichen Frage!
61. 61 Fazit Web Components sind super … •für Transklusion •keine zusätzlichen (ggf. inkompatiblen) Frameworks im gleichen DOM •Kapseln von Styles im Shadow-DOM •für die Pattern-Lib •Komponenten lassen sich ohne Probleme integrieren in •plain HTML/CSS/JS •den gängigen Webframeworks •sonst auch https://custom-elements-everywhere.com
62. Krischerstr. 100 40789 Monheim am Rhein Germany +49 2173 3366-0 Ohlauer Str. 43 10999 Berlin Germany +49 2173 3366-0 Ludwigstr. 180E 63067 Offenbach Germany +49 2173 3366-0 Kreuzstr. 16 80331 München Germany +49 2173 3366-0 Hermannstrasse 13 20095 Hamburg Germany +49 2173 3366-0 Königstorgraben 11 90402 Nürnberg Germany +49 2173 3366-0 Gewerbestr. 11 CH-6330 Cham Switzerland +41 41 743 0116 innoQ Deutschland GmbH innoQ Schweiz GmbH www.innoq.com 62 Danke! Fragen? Franziska Dessart franziska.dessart@innoq.com @lapaqui Foto: Dominika Roseclay