Previewing Backbase Widgets using Storybook

Photo by Pascal Meier on Unsplash

Backbase frontend web applications are built using reusable widgets. Widgets are independent, reusable components that focus on single business functionality. This helps in managing business functionalities independently, without impacting unrelated widgets. For example, a login widget can be independently modified without impacting the “My Profile” widget.

When a system grows, the number of features and hence number and complexity of widgets also grows. The complexity to know all the available widgets increase when we account for the human aspects as well. With time the team composition changes new people come in, old people move out, some people move up the corporate ladder and get out of touch of the work done by them earlier. This causes the knowledge of available and already developed widget functionalities to fade out.

There arises a need for a system that can help us find existing widgets and their documentation. This is the age of live documentation and Storybook.js helps us create such documentation for different frontend technologies.

Storybook.js is an open-source tool for developing UI component documentation in isolation for technologies like React, Vue, and Angular.

Storybook.js is available as an npm package and can be easily installed in any of the existing projects.

To add Storybook to your project, go to the project directory and execute the following command. (As per the documentation on https://storybook.js.org/docs/guides/quick-start-guide/ )

npx -p @storybook/cli sb init

The intelligent command automatically detects the type of project from a wide range of technologies including React, React Native, Vue, Ember or even Angular. If for some reason, it fails to detect the technology you might need to follow the long start guide for your technology.

We faced similar problems when building and using Backbase widgets. As the banking application grows, the number of widgets also grows. And if the number of custom-developed widgets is huge (which is a common case), it becomes really difficult to manage the front-end codebase.

Fortunately, the Backbase widget architecture 3 is built using Angular. Thus making Storybook.js a good solution to solve the problem.

Setting up the WA3 project directory

To set up a WA3 project directory on Backbase, we need access to Backbase Repository. This can be obtained as a license to Backbase. If you are working on a Backbase project, the bank should provide you this.

You will also need access to Backbase Community and complete this trail for setting up your first experience.

Creating custom widgets

Once you follow the above-mentioned trail, you will be able to develop your custom WA3 widgets. Repeat the step to create multiple custom widgets that will be used in your application. You may use the following Backbase Angular Schematics command to generate more widgets

npm run ng — generate widget — name=widget-name

This gives us some widgets to write stories about. When we are developing widgets, we need to keep re-usability in mind.

Adding Storybook to the project

Since WA3 architecture is based on Angular, it is easy to add Storybook.js to any Backbase application.

To install Storybook execute the following command inside your widgets workspace:

npx -p @storybook/cli sb init

Executing this command will install storybook in your existing folder, and will create some sample stories

After installing the storybook, you should be able to see some new folders created in the directory.

.storybook is a meta folder, which contains the configuration of the storybook. It is autogenerated and auto managed, and hence it should not be modified manually.

Our main playground with storybook will be src/stories directory. This directory is the place where we are going to create stories surrounding our widgets.

You should be able to see a few stories already available.

Once storybook is installed, execute the following command to view available stories :

npm run storybook

This would start the storybook server and open the browser automatically. However if for some reason it doesn’t open it up, try accessing the following URL to land upon the storybook page :

http://localhost:6006/?path=/story/welcome--to-storybook

A story is typically a function that returns an executable component. Ideally, a story file should consist of different methods, which create the component in various possible scenarios.

This could be achieved by providing all the different possible input configurations. One story for each variation.

E.g. the default button story,

We have different functions, initializing the button component, with different inputs. Text, emojis, option to click and not.

These functions result in different stories to be developed on Storybook page :

Creating Stories for the widgets

In this article, my focus is on using storybook with Backbase WA3, and hence I would not be focusing on creating a jazzy widget, we will park that for some other time. We are going to use a simple quickly generated widget, which we created in the above trail.

We created a simple ATMs locator widget. A widget is nothing more than an Angular component, which is present in its component file.

The widget exports its class and is decorated with @Component decorator, has a selector and a template. This class may have other functions required as per the business requirements. To create a story for such a widget, we need to create a story file in src/stories directory

The standard format to create a story file name is as follows

<id>-<widget name>.stories.ts

A minimalistic story would contain at least

• The story title
• The associated widget

To define a story title we need a default function to export title

export default {
title: ‘ATM Locator Widget’,
};

And to export the widget we need a function, which exports the widget as a component.

The final minimalistic story would look like

import { AtmListComponent } from ‘libs/atms-locator-widget/src/lib/atm-list/atm-list.component’;
export default {
title: ‘ATM Locator Widget’,
};
export const atmListComponent = () => ({
component: AtmListComponent
});

You should be able to see the widget selector on the storybook

Stories can be customized in the standard ways as defined in the storybook documentation at https://storybook.js.org/docs/basics/writing-stories/

This process not only helped us develop documentation for our widget but also helped to preview our widgets without depending on the Backbase backend systems. This resulted in faster feedback and reduced development time.