emotion_angular_library.jpg

Emotion-Angular Library (How We Built it, and Why)

By Ardian Perlaska
4 min read

One of the many challenges we faced when building when we decided to build the Intelligent Business Cloud, was to keep the consistency of our way of designing things across different products.

The challenges were already big. We were planning to build and integrate different applications within our Intelligent Business Cloud, so we needed to automate things and enable reusability when it comes to building different user interfaces.

Using UI Frameworks Compatible with Angular

Since we decided to use Angular (2+) and TypeScript for our Front-end applications, we were looking for suitable UI Frameworks, which would be Angular compatible. So, initially we decided to clone the Material2 Angular framework from GitHub (in very early stages of development), and re-use their components to build our UI.

At the time, our design team was quite Material Design oriented, so Material2 was the perfect library for us to use. However, Material2 would not cut our requirements, as our Products were growing, and our requirements and challenges were growing along with them.

What Did We Do?

We decided to build our own Front-End library, based on Material2 architecture, which would allow us to custom design our components based on our needs and requirements. Hence, Emotion was born.

Our design team wrote usage guidelines, which would contain a set of rules on how to use particular UI elements, such as buttons, modals or forms, along by designing a whole set of components, which by now have created our own IBC design system.

In Emotion, we initially only added components we already had designs for, starting from UI-oriented, to extended functionality components. We later included IBC-exclusive components which were essentially sets of already-existing Emotion components.

Later on, since we plan to make our library open-source and publish it online, we separated IBC related components into another library called Emotion Cloud, which makes Emotion a library fully independent from Celonisโ€”one which other people can use in the future for their own projects.

How We Built the Emotion-Angular Library

Components

We build our components based on Atomic Design structure, using SCSS for our styles and Angular/TypeScript for the Front-End. Our components are divided as follows:

Atoms
These components include buttons, forms, modals, lists, tables, tooltips and more.

Molecules
Pretty much a set of atoms. These โ€œclustersโ€ include such components as item choosers, dialogs, prompts, tag inputs, local data source and more.

Layouts
Page layouts such as main layout, and โ€˜burgerโ€™ content.
Content layouts, such as panels, sections, expandable panels and more.

Organisms
Pretty much large components which use atoms or molecules, such as placeholders and more.

This structure helped us in dividing components, in such a way that whenever new teammates would join, they would easily get the idea of what to expect and where to expect that, which as a matter of fact turned out to be a great result.

Styles

For our styling, we use SCSS as a CSS post-processor. Our SCSS architecture is divided into the following parts:

Shared CSS
Consisting of general styles, such as normalizers, typography, helpers and utilities and pretty much every other style that we wanted to have easily available.

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

// Partials
@import โ€œ../styles/partials/normalizeโ€;
@import โ€œ../styles/partials/gridโ€;
@import โ€œ../styles/partials/overlayโ€;
โ€ฆ
Main Styles
Main styles define global variables, mixins, and functions, which contain most of our design system global configuration, such as units, breakpoints, sizes or colors. Our main.scss file looks like as following:
@import โ€œvariablesโ€;

@import โ€œfunctions/stringโ€

@import โ€œmixins/animationsโ€;
@import โ€œmixins/typographyโ€;
@import โ€œmixins/overlayโ€;
@import โ€œmixins/gridโ€;
โ€ฆ
As a result, we donโ€™t generate any actual CSS in the end, but we only use this file to have access to our global configuration.

Component-Based CSS
Since Angular allows and recommends this, every component-based style is included and encapsulated within its parent component, which affects the overall performance by having that style loaded only when using that component.

How Emotion Affects IBC Apps

Having Emotion part of Celonis helped us build many different Apps by keeping the same layout, same design spirit and easily reusing components, which tackled the user interfaces relatively fast. Alongside Emotion, we built an Emotion Demo as well, where all developers in Celonis could access it and check the docs for usage examples and APIs.

Overall, we believe that Emotion brought great value to our company, and without this library, we would not be able to build so many Apps with consistent user interfaces and user experiences.

We still continue to maintain and update Emotion by adding new components, and by improving/extending the existing ones.
The IBC is growing, and so is Emotion - every day!

Did you like this article?

Maybe others you know will also find it helpful.

About the author

Letโ€™s
get
started

Insights to inbox - Monthly newsletter

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

Dear visitor, you're using an outdated browser. Parts of this website will not work correctly. For a better experience, update or change your browser.