Technology

As the title says we are using React to build our application. Most of the tips in this article can easily be used in different architectures since they have similar tools and libraries.

Storybook

Storybook will be your development playground and component gallery. It helps to think in your component as an isolated package and to disassociate them to your product, so you can have generic and well-described properties.

Not reusable component

A specific implementation of a Button

Generic component

Generic implementation of a Button

Storybook is also great at providing documentation. There is an addon called storybook-addon-info which automatically adds the component JSX and prop-types description to the component page.

Running your whole application probably requires few steps and can be really slow. Storybook is usually faster to start, so it improves your development speed. You can develop your UI components mocking all the properties (storybook-addon-knobs is perfect for mocking) in a completely isolated playground without running your main application.

Styled Components

You will also need something to deal with theming. We tried pure CSS variables before and it worked well. Your bundle will have two CSS files, one with the library component and another for variables declaration. If you have more than one theme, you just need to switch the theme file and it should work.

Theming using pure CSS

In our new library, we decided to go with Styled Components. It already provides a theming solution and CSS in JS works pretty well with React. You also have scoped CSS by default which solves the biggest problem in Computer Science, naming.

This is a great way to avoid any unexpected CSS override and also prevents developers to intentionally override CSS rules. Your component behaviour is coupled attached to it's own properties definition and no one can globally override styles.

It also helps you to better define conditional rules in your styles because you don't need to extend CSS classes or to manage them in your element. You basically pass props to a view component and this component can use it to deal with edge cases.

Selected theme available to be used inside our components

At Travix, we created a Storybook addon to easily change our theme. If you have played with Styled Components ThemeProvider, you know that we basically have to change the theme property and it works like a charm. This addon helps us to test all brands while developing and also helps Product Owners (POs) and Designers to validate the implementation.

Theme selector addon

TypeScript

We had few issues to implement TypeScript. We spent at least two weeks updating our solution to support it and more two weeks migrating everything. If you decide to use it, I highly recommend to start your project with TypeScript from the scratch.

But it definitely pays off and auto-completion of properties and values helps a lot while developing. It also helps you to define better contracts to your component since any exotic property type definition turns on a red light during the review process.

TypeScript autocomplete

Eslint

To ensure the consistency of the codebase we have a super strict eslint configuration. We decided to go full strict here so we don’t waste time reviewing minor details in the code.

Our linter automatically runs before any push with an auto-fix being amended to the last commit. It also runs in our CI machine, so if someone decides to skip the validation, it will fail during the build.