Components Library für die Migros-Welt

Um eine einheitliche Benutzeroberfläche über die diversen Migros Plattformen sicherstellen zu können, wurden in Zusammenarbeit mit weiteren Migros Partneragenturen die Shared Components ins Leben gerufen.

Einzelne Module werden in einer gemeinsamen Registry abgelegt und können so einfach wiederverwendet werden und bieten dennoch ein einheitliches Benutzererlebnis.

Atomic Design

Wiederverwendbare Komponenten Bibliothek

Die Shared Components sind an das Atomic Design angelehnt. Sie werden in drei Hierarchiestufen (Atome, Moleküle und Organismen) unterteilt und sind von Natur aus einfach wiederverwendbar. Ein Button wird beispielsweise nur einmal als Atom erstellt, und wird dann an allen Orten wiederverwendet. Dadurch wird ein einheitliches Look-And-Feel erreicht, auch wenn die Komponenten auf unterschiedlichen Seiten eingebunden werden.

Mit JavaScript und Benutzerkontext werden die Komponenten erweitert und als interaktive Widgets inklusive Single Sign-on zur Verfügung gestellt.

Atomic Design Konzept. Bild von https://codeburst.io/
Visualisierung automatisierter Tests

Automatisiertes Testing

Qualitätssicherung

Die Module werden mit Jasmine, Chai und PhantomJS automatisiert und ausführlich getestet. Mittels Unit, Functional und Regression Tests kann so die erwartete Funktionsweise der Module sichergestellt, und Fehler in der Zukunft verhindert werden.

Minimale Skript Grössen

Webpack Builds

Webpack stellt sicher, dass nur die auf der Seite wirklich benötigten Komponenten, Bilder und Skripts ausgeliefert werden und minimiert somit die Grösse der zu ladenden CSS und JS Dateien massiv.

Mit dem Tree-shaking genannten Algorithmus von Webpack konnte in diesem Fall die Grösse der geladenen Skripte auf einer Seite um bis zu 56% reduziert werden.

Die Module werden in fachspezifische Pakete gekapselt und via npm in einer Registry publiziert, sodass sie einfach wiederverwendet werden können.

Webpack Build Service. Bild von https://webpack.js.org/
Visualisierung der Dokumentation

Dokumentation

Essentiell im grossen Ökosystem

In einem heterogenen Umfeld mit diversen Entwicklungspartnern und Technologien ist die Dokumentation essentiell. Dank einigen massgeschneiderten Webpack Loadern und Buildscripts kann diese automatisch aus JS Docs und Handlebars Templates generiert werden und ist dadurch immer aktuell. In der Dokumentation stehen die Module auch zur Vorschau zur Verfügung.

smartive setzt Aufträge schnell und professionell um. Die Zusammenarbeit ist unkompliziert und angenehm.

Jason Fellmann, Migros-Genossenschafts-Bund (MGB)