[S03E03] Micro Frontends

Michael Geers treibt seit mehreren Jahren das Thema Micro Frontends mit an. Wir unterhalten uns mit Michael darüber, wie Design Systeme und Pattern Libraries auch bei den nicht-technischen Herausforderungen in diesem Bereich helfen können. Das Interview wurde am 03.03.2020 aufgenommen. Shownotes & Links Michael Geers auf Twitter Micro Frontends Webseite Michael’s Vortrag auf der MicroCPH Konferenz: Micro Frontends the nitty gritty details Duet Design System (auf Web-Component Basis) Das Buch: Micro Frontends in Action

Hans und Peter bauen Warhol: Eine App mit der man seine Pattern Library für Tests der Design-Konsistenz des eigentlichen Produkts nutzen kann. Die beiden stellen Design Testing generell vor und erklären, warum Warhol eine gute Lösung dafür ist. Das Interview wurde am 21.02.2020 aufgenommen. Shownotes & Links Warhol auf Twitter Hans-Christian Reinl Peter Kröner

Wir sind zurück! Kaum zu glauben, aber es gibt uns immer noch. Die letzten zwei Jahre über ist viel passiert. Wir resümieren etwas und stellen die UIengine vor, welche in unseren Projekten als Werkbank für UIengineering dient. Das Interview wurde am 14.02.2020 aufgenommen. Shownotes & Links UIengine auf Github UIengine Dokumentation Thonet Brand Manual UIengineering Pattern Library Beispiel Klingel: Designsystem hoch 15 Dennis Reimann Jan Persiel

Antje Kroon und Ralph Schumann von der zwhy GmbH berichten über die Entscheidung eine Agentur Anfang 2017 in zwei Firmen zu trennen, um diese dann wieder zusammenzubringen, um Dinge aus einer Hand machen zu können. Glaubwürdig. Wir horchen mal rein wie es zu dieser Trennung gekommen ist und was das eigentlich bedeutet. Wie macht trennt man so eine Firma auf? Welchen Einfluss hat das auf die Kultur? Was hat das mit New Work und einer Konferenz dazu zu tun? Die Teams in denen die Hardcore-Entwickler und die Super-Kreativen saßen gab es irgendwie immer Gerangel … —Antje Kroon Wir versuchen gerade herauszufinden wo die Schnittmengen sind: Ist ein Websitenprojekt ein Software- oder ein Kommunikationsprojekt? Es ist beides. —Ralph Schumann Wenn wir (d.h. Entwicklung und Kommunikation/Design) zusammenarbeiten … müssen wir nichts wegdiskutieren, weil wir es vielleicht als eine Partei nicht können. —Ralph Schumann Die New Work Future Konferenz findet am 14. und 15. Juni 2018 in Hamburg statt. Infos und Tickets auf der Konferenz-Website. Das Interview wurde am 20.10.2017 bei der Ministry Group / zwhy live aufgenommen. Shownotes & Links Trennung oder Neugründung? Wie die Ministry Group sich neu definiert hat! Ministry Group zwhy Jobs New Work Future Konferenz

Susanne Kaiser ist Technischer Vorstand bei der Just Software AG in Hamburg. In unserem Interview spricht Jan mit ihr über die Historie des Unternehmens und die der Software. Welche Auswirkungen hat die Entwicklung der Software auf die Teams und umgekehrt? Aber auch die Anforderungen an Produkt und Unternehmen von außen sind Thema. Team und Softwarearchitektur waren bei uns monolithisch und mit dem Wachstum wurden wir langsamer. Daraufhin haben wir unsere Teams aufgeteilt und auch die Software auf Mikroservices umgestellt, um wieder schneller agieren zu können. —Susanne Kaiser Die Teams können autonom arbeiten und entscheiden, aber … Es ist so, dass wir schon eine gemeinsame Basis benötigen, … hinsichtlich Styleguides z.B. Es soll sich ja noch aus einem Guss anfühlen. Und wir haben Standards, so dass sich nicht jedes Team seine eigene React-Library einführt. —Susanne Kaiser Wissenstransfer und Dokumentation ist ein weiterer Punkt im Gespräch: Wir haben erkannt, dass Dokumentation in der Sekunde der Erstellung veraltet ist. Wir dokumentieren durch wartbaren Clean-Code. Wir schreiben aber viele Read-Mes, die wir auch mit dem Code einchecken. —Susanne Kaiser Das Interview wurde am 22.09.2017 bei der Just Software AG live aufgenommen. Shownotes & Links Die Just.Social Suite Jobs

Thomas Lobinger ist Software Development Manager bei Amazon Web Services in Berlin. In unserem Interview mit ihm sprechen wir ein wenig über seinen Werdegang, über Design Systeme, wie bei Amazon Web Services Teams funktionieren und was er für Erfahrungen in den letzten Jahren in einem ständig wachsenden Unternehmen gemacht hat. Unser Team kümmert sich um das Design System, Tools und Automating … um das Leben von Frontend-Entwicklern und Designern besser zu machen und deren Produktivität zu erhöhen. —Thomas Lobinger Das Design System ist über eine längere Phase entstanden. Die Genesis des AWS Design Systems liegt darin begründet, dass das zentrale Frontend-Entwicklungsteam der großen Menge an Projekten nicht nachkommen konnte. Alleine 2016 sind 1017 Features und Services gelauncht worden, um dies mal in einen Kontext zu setzen. Deshalb ist das durch ein Team auch nicht machbar gewesen. —Thomas Lobinger Wir sprechen über Granularität und Feinteilgkeit in Designsystemen und was die Basis für Komponenten ist: Was ist der richtige Grad an Vorschriften vs. Einschränkung der Kreativität? Für uns sind HTML-Tags/Webstandards diese Basis. Wir haben uns dann auf web components fokussiert, haben deren API aktuell noch über Klassen abstrahiert, können diese dann aber (wenn web components native verfügbar sind) ablösen. —Thomas Lobinger Standardisierung ist für das Team um Thomas bei AWS auf allen Ebenen und in allen Gewerken Thema: Wir haben einen Prozess angestoßen, der nicht nur im Frontend standardisiert ist sondern auch im Design. Wir stecken z.B. Research in solche Standards, denn wenn wir standardisieren dann auch richtig. —Thomas Lobinger Open Source für Design Systeme ist Thema für uns und Thomas sagt dazu: Wir glauben, dass es ein Benefit ist für die Community (unser Design System open source zu stellen), … um zu sehen wie es gelöst worden ist. —Thomas Lobinger Uns am Ende noch ein Aufruf: Sucht Euch eine Firma wo ihr das (Design Systeme/UIengineering) umsetzen könnt. Seid nicht der frustrierte Einzelkämpfer. Lasst Euch nicht aufhalten! —Thomas Lobinger Das Interview wurde am 15.09.2017 per Skype aufgenommen. Shownotes & Links Working backwards (Blogpost) Working Backwards (Video) Olga Madejska: Breaking Bad - Web Components in production, what worked for us | JSConf EU 2015 (Web?) Components in production Draft of the Unity (Single File Web Component) Specification

Christoph Reinartz ist UI/UX Engineer und Fullstack Developer bei Trivago. Wir sprechen in unserem Interview mit ihm über das bei Trivago eingeführte Design System und die Kultur der Produktteams. Um die Designer und Product Owner mit an Bord zu holen geht es ja auch darum, eine gemeinsame Sprache zu entwickeln. Damit die Leute ein gemeinsames Verständnis haben, von dem was man macht. —Christoph Reinartz Das Design System unterstützt dabei das Finden und Kommunizieren der gemeinsamen Sprache. Das [Design System] ist kein rein technisches Thema, es ist auch nicht ein reines Design-Thema. Das ist eigentlich ein Thema, was die Organisation im Gesamten betrifft. —Christoph Reinartz Wir sprechen über die Idee des Design Sprints und wie sie bei Trivago in der Produktentwicklung eingesetzt werden: Ideen werden getimeboxed erarbeitet. Es geht relativ schnell in Skribbles, die werden wieder diskutiert, es wird gevotet auf die verschiedenen Lösungen. So kann man auch durch das Timeboxing schnell eine Idee konkretisieren. —Christoph Reinartz Trivago sieht sich als “data-informed” und testet insbesondere Neuentwicklungen über Metriken und A/B-Tests. Nichtsdestotrotz verlässt man sich nicht allein auf Zahlen, sondern testet auch intensiv mit richtigen Nutzern: Man kann nicht immer alles im A/B-Testing sehen. Du siehst in der Regel die Zahlen, es hilft aber auch mal einen User die Website testen zu lassen. Und das dann zu kombinieren… damit hast du gute Möglichkeitebn, dein Produkt weiterzuentwickeln. —Christoph Reinartz Das Interview wurde am 08.09.2017 per Skype aufgenommen und am 12.09.2017 veröffentlicht. Shownotes & Links Rebuilding an aircraft on the fly Anatomy of a Design Sytem Sprint: Wie man in nur fünf Tagen neue Ideen testet und Probleme löst Lerna: A tool for managing JavaScript projects with multiple packages Stylelint: A mighty, modern CSS linter Jobs bei Trivago

Was eigentlich nur als ein kleines Stimmungsbild beginnt, ist vielleicht der Anfang eines ganzen Staffelthemas. Heute geht es kurz um Remote-Arbeit, die Vorurteile und ein paar Anmerkungen. Shownotes & Links Buch: Remote, office not required by David Heinemeier Hansson/Jason FriedAmazon :) Basecamp Slack Platz frei im Loft74

Heute sprechen wir kurz über die Idee wie man sich in einem Projekt seine Vorgehensweisen dokumentieren kann und Best Practises festhalten kann. Ausserdem kurz etwas zum UI Pairing mit Dennis. Shownotes & Links Pairing

Patrick Blom ist Senior Backend Entwickler bei SHOPMACHER. In unserem Interview mit ihm berichtet Patrick von typischen Prozessen bei der Entwicklung von Shops und dem Shopmacher eigenen Produkt CommerceCockpit. Wiederverwenden und Synergien nutzen ist bei SHOPMACHER ein tagtägliches Thema: Der Grundgedanke der Wiederverwendbarkeit (von Komponenten) ist da. … Natürlich schauen wir auch, ob man Komponenten aus einen Basisportfolio, das wir mal entwickelt haben, verwenden kann und diese dann )für den Kunden) angepasst werden. —Patrick Blom Technologien, die verwendet werden: Wir nutzen gängige Technologien wie HTML5, LESS, (gehen) weg von jQuery hin zu nativem JavaScript und die Basis unseres Produktes ist Symfony bzw. TWIG. —Patrick Blom Patrick spricht auch über die verschiedenen Arten von Zulieferungen aus Richtung der Kunden und Designagenturen. Oft ist der Designprozess vorgelagert, aber manchmal geht SHOPMACHER in den Lead aus einer beratenden Rolle: Wenn die Sachen (Designs) zu uns kommen setzen wir uns zusammen … und schauen uns an … wie wir das umsetzen können. Wir klären dann auch wo die User Experience leiden könnte, weil z.B. ein Gutscheincode an einer Stelle technisch Probleme mit sich bringt. —Patrick Blom Die Qualität der zugelieferten Designs ist sehr unterschiedlich. Wir versuchen in einem Briefing vorab genau zu klären was wir genau in den Designs sehen müssen, um mit diesen schnell arbeiten zu können. —Patrick Blom Wir bieten dem Kunden an schon früh die ersten Komponenten abzunehmen ohne dabei von allen anderen Shop-Seiten (wo diese verwendet werden) abhängig zu sein. —Patrick Blom Wir versuchen die Grenzen zwischen Design und Entwicklung so weich wie möglich zu halten. —Patrick Blom Wenn wir früh in den Designprozess als Berater einbezogen werden, so arbeiten wir eher auf Mockup-Ebene und gehen dann schrittweise vor und verfeinern. —Patrick Blom Das Team bei SHOPMACHER arbeitet nicht nur in Gescher bei Münster, sondern auch mit 15 Personen in Vietnam: Unsere Teams sind interdisziplinär zusammengestellt … und die Reviews der Sprints sind offen. Jeder kann so schauen was die anderen Teams gemacht haben, was wir durch total offene Prozesse unterstützen. Die Teamleiter tauschen sich zusätzlich aus … und bei wichtigen Themen machen wir eben ein internes Barcamp. —Patrick Blom Bei uns sind Teams für sowohl Setup als auch Betreuung der Shops zuständig. … Der Vorteil ist, dass man die Shops dann auch so baut, dass die Betreuung gut funktionieren kann, was eine potentielle Fire-and-Forget-Attitude eines reinen Setupauftrags verhindert. —Patrick Blom Das Interview wurde am 18.08.2017 per Skype aufgenommen und am 21.08.2017 veröffentlicht. Shownotes & Links SHOPMACHER