Wiederverwendbare Komponenten für die ganze Migros.
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.
Zur Website
Atomic Design
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.
«Der Code, den smartive schreibt, ist sauber und von sehr hoher Qualität. Das wird mir immer wieder bestätigt.»
Corinne Petit, Agile Coach & Technical Product Owner beim Migros-Genossenschafts-Bund
Automatisiertes Testing
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.
Optimierte 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.
Essentielle Dokumentation
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.
Fragen oder Interesse? Thilo hilft dir gern weiter.
