Tech support for component library & UI

Atomic Design

The shared components are based on atomic design. They are divided into three hierarchy levels (atoms, molecules and organisms) and are inherently easy to reuse. For example, a button is only created once as an atom and is then reused everywhere. This ensures a uniform look and feel, even if the components are integrated on different pages.

The components are extended with JavaScript and user context and made available as interactive widgets including single sign-on.

Automated testing

The modules are automated and extensively tested with Jasmine, Chai and PhantomJS. Unit, functional and regression tests are used to ensure that the modules function as expected and to prevent errors in the future.

Optimized builds

Webpack ensures that only the components, images and scripts actually required on the page are delivered, thus massively minimizing the size of the CSS and JS files to be loaded.

In this case, Webpack's tree-shaking algorithm was able to reduce the size of the scripts loaded on a page by up to 56%.

The modules are encapsulated in subject-specific packages and published in a registry via npm so that they can be easily reused.

Essential documentation

In a heterogeneous environment with diverse development partners and technologies, documentation is essential. Thanks to some customized webpack loaders and build scripts, this can be generated automatically from JS Docs and Handlebars templates and is therefore always up to date. The modules are also available for preview in the documentation.