emotion_angular_library.jpg

Celonis Emotion-Angular Library

By Ardian Perlaska
5 min read

Viele Herausforderungen begleiteten den Aufbau der Intelligent Business Cloud. Eine bestand darin, unserer Entwicklungsphilosophie treu zu bleiben, die produktรผbergreifende Konsistenz vorsah.

AuรŸerdem planten wir, verschiedene neue Anwendungen zu entwickeln und in die Cloud zu integrieren. Dafรผr mussten wir bestimmte Prozesse automatisieren und die รœbertragbarkeit von UI-Designs gewรคhrleisten.

Mit Angular kompatible UI-Frameworks

Da wir Angular (2+) und TypeScript fรผr unsere Frontend-Anwendungen nutzten, benรถtigten wir UI-Frameworks, die mit Angular kompatibel sind. Am Anfang hatten wir die Idee, das Material2 Angular Framework von GitHub zu klonen (in sehr frรผhem Entwicklungsstadium) und hierauf unsere UI aufzusetzen.

Unser Entwicklungsteam war damals sehr von Material Design angetan, weshalb uns Material2 als Library als perfekte Wahl erschien. Die Lage รคnderte sich jedoch, als unsere Produkte im Laufe der Zeit immer komplexer wurden โ€“ und damit auch unsere Anforderungen und Herausforderungen.

Unsere Vorgehensweise

Wir entschieden uns, eine eigene Frontend Library auf Basis der Material2-Architektur aufzubauen โ€“ so wรคren wir in der Lage, Komponenten nach unseren eigenen Vorstellungen zu designen. Diese Idee markierte die Geburtsstunde von Emotion.

Unser Team verfasste Richtlinien zur Nutzung bestimmter UI-Elemente wie Buttons, Modals und Forms. Darรผber hinaus designten wir einen kompletten Komponentensatz, aus dem inzwischen unser eigenes IBC-Designsystem entstanden ist.

In Emotion fรผgten wir anfangs nur Komponenten hinzu, fรผr die wir bereits Designs besaรŸen. Wir begannen mit UI-orientierten Komponenten und gingen dann zu Komponenten mit erweiterter Funktionalitรคt รผber. Spรคter integrierten wir auch IBC-exklusive Komponenten, wobei es sich im Grunde um Sets bereits vorhandener Emotion-Komponenten handelte.

Da wir unsere Library quelloffen halten und online verรถffentlichen wollten, vereinten wir Komponenten mit IBC-Bezug spรคter in einer separaten Library namens Emotion Cloud. Emotion ist als Library vรถllig unabhรคngig von Celonis und kann von jeder Person fรผr eigene Projekte genutzt werden.

Aufbau der Bibliothek

Komponenten

Unsere Komponenten basieren auf der Atomic Design-Struktur; wir nutzen SCSS fรผr Styles und Angular/TypeScript fรผr das Frontend. Die Komponenten sind wie folgt untergliedert:

Atome

Diese Komponenten beinhalten Buttons, Forms, Modals, Listen, Tabellen, Tooltips und mehr.

Molekรผle

Ein Molekรผl bezeichnet eine Gruppe von Atomen. Diese โ€žClusterโ€œ beinhalten Komponenten wie Item Chooser, Dialoge, Prompts, Tag Inputs, lokale Datenquellen und mehr.

Layouts

Page Layouts wie Main Layout und โ€šBurgerโ€˜ Content.
Content Layouts wie Panels, Sections, aufklappbare Panels und mehr.

Organismen

รœbergeordnete Komponenten, die auf โ€žAtomenโ€œ oder โ€žMolekรผlenโ€œ basieren (z. B. Platzhalter).
Diese Struktur hilft uns dabei, Komponenten so aufzuteilen, dass auch neue Teammitglieder schnell erfassen, was sie an welcher Stelle erwartet, und das war im Endeffekt ein groรŸartiges Resultat.

Styles

Fรผr unser Styling nutzten wir SCSS als CSS Post-Processor. Unsere SCSS-Architektur ist in folgende Teile untergliedert:

Shared CSS

Allgemeine Styles, darunter Normalizer, Typografie, Helper und Utilities sowie mehr oder weniger jeder andere Style, den wir schnell verfรผgbar haben wollten.

// Utilities

@import โ€œ../styles/utilities/all_utilitiesโ€;

// Partials

@import โ€œ../styles/partials/normalizeโ€;
@import โ€œ../styles/partials/gridโ€;
@import โ€œ../styles/partials/overlayโ€;
โ€ฆ

Main Styles

Main Styles definieren globale Variablen, Mixins und Funktionen, die einen GroรŸteil unserer globalen Konfiguration fรผr das Designsystem ausmachen, darunter Units, Breakpoints, Sizes und Colors. Unsere main.scss-Datei sieht folgendermaรŸen aus:
@import โ€œvariablesโ€;
@import โ€œfunctions/stringโ€
@import โ€œmixins/animationsโ€;
@import โ€œmixins/typographyโ€;
@import โ€œmixins/overlayโ€;
@import โ€œmixins/gridโ€;
โ€ฆ
Am Ende generieren wir kein echtes CSS, sondern nutzen die Datei nur, um Zugang zu unserer globalen Konfiguration zu erhalten.

Komponentenbasiertes CSS

Da Angular dies erlaubt und empfiehlt, ist jeder komponentenbasierte Style in seiner Parent-Komponente enthalten und inbegriffen. So wird die Performanz verbessert, da der Style nur geladen wird, wenn die Komponente auch tatsรคchlich genutzt wird.

Einfluss von Emotion auf IBC Apps

Dank Emotion waren wir in der Lage, viele verschiedene Apps auf Basis desselben Layouts, derselben Designphilosophie und mit leicht wiederverwendbaren Komponenten zu realisieren. User Interfaces lieรŸen sich so zรผgig einrichten. Darรผber hinaus erstellten wir auch eine Emotion-Demo, auf die alle Entwickler in Celonis Zugriff hatten und die der Erkundung von Dokumenten nach Anwendungsbeispielen und APIs diente.

Insgesamt sind wir der Ansicht, dass Emotion unserem Unternehmen groรŸen Mehrwert bietet. Ohne die Library wรคren wir nicht in der Lage, so viele Apps mit konsistenter UI und User Experience zu entwickeln.

Wir pflegen und aktualisieren Emotion auch weiterhin, indem wir neue Komponenten hinzufรผgen und die vorhandenen verbessern und erweitern.

Die IBC wรคchst, genauso wie Emotion โ€“ jeden Tag!

Did you like this article?

Maybe others you know will also find it helpful.

About the author

Maybe you'll also like

Abonnieren Sie unseren monatlichen Newsletter

We've received your submission
Please fill in all the fields

Lieber Besucher, wir haben festgestellt, dass Sie eine veraltete Browser-Version verwenden. Teile dieser Seite werden von Ihrem Browser nicht korrekt dargestellt. Fรผr eine korrekte Funktionsweise der Seite empfehlen wir Ihnen, einen alternativen Browser zu verwenden oder Ihren Browser auf eine unterstรผtzte Version anzuheben.