Portfolio

Tobias Balmer

Portrait Tobias Balmer

Repower Components

Eine meiner Kernaufgaben bei der Repower AG war es, für eine einheitliche User Experience über diverse Applikationen und Plattformen zu sorgen. Da ich mit dem klassischen Workflow (Design Handoff von Photoshop/Illustrator/Antetype Files) nicht zufrieden war, erstellte ich direkt Codebeispiele basierend auf Bootstrap. Dies erlaubte mir, nicht nur ein statisches Design zu übergeben, sondern auch gleich eine interaktive Vorschau des Designs mit responsiven Verhalten und Animationen.

Damit war ich aber immer noch nicht ganz zufrieden und plante daher noch einen Schritt weiterzugehen: Fertige Komponenten anbieten, die direkt in diversen Systemen und Applikationen eingebunden werden konnten. Mit klassischen Frameworks wie React oder Angular, war aber die Technologie schon jeweils vorgegeben und damit nicht mehr universal einsetzbar. Deshalb entschied ich mich für Webcomponents.

Mit dem Webcomponent Compiler Stencil (vom Ionic-Team) schrieb ich die bisherigen Templates zu Webkomponenten um und entfernte auch direkt die Abhängigkeit zu Bootstrap. So entstand mit der Zeit ein umfassender Katalog an Webcomponents für alle möglichen Einsatzzwecke, die mit praktisch jedem Framework kompatibel sind, aber auch ganz ohne verwendet werden können. Alle CSS-Eigenschaften, die dynamisch sein müssen, können mit Custom Properties (CSS-Variablen) geändert werden.

Repower Webcomponents