Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VertikalisierteFrontends_WebComponents.pdf

 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.

Franziska Dessart

September 04, 2019
Tweet

More Decks by Franziska Dessart

Other Decks in Technology

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. 3 Agenda •Web Components •Vertikalisierung •Self Contained Systems •Frontends in

    Vertikalen •Best Practices •Fazit Foto: Gabriel Terrizzi
  3. 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
  4. 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
  5. 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 )
  6. 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
  7. 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. 

  8. 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)
  9. 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
  10. 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 [email protected] @lapaqui Foto: Dominika Roseclay