10-07-2021

React + StoryBook + Tailwindcss + Ionic

Since a long time I'm programming in Angular, first AngularJS and later Angular. I was at the Angular conference in Paris where the Angular team announced the removal of controllers...:)...But not long a colleague persuade me to try React. Not totally convinced, but I thought let's give it a try.

I wanted to migrate an Android app to Ionic for a few reasons. The Android app was getting old and hard to maintain. A fresh start with Ionic would make things a lot easier. Especially with the help of Capacitor. Also the lack of Android knowledge within the team would help us. They also could help developing with this project. There was already a lot of knowledge about React, se we decided to choose for Ionic with React.

To add more speed to our development process, we're using also TailwindCSS. Designing and implement the layout components with TailwindCSS works like a charm.

And of course there's is Storybook, our newest kid on the block.

Storybook

Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation. You can implement components and pages without needing to fuss with data, APIs, or business logic. Also it's possible to document use cases as stories.

For example you have a component to display a photo:

For Storybook I'm using Pure components. Consider using pure components for one-level deep state and props. Here, we get a bit of a boost by not re-rendering when state mutates. These components can live in tree leaf nodes which have simple data shapes.

So the accompanying story looks this :

Working together

But a big advantage of Storybook is that you can independently develop, write and document application components. And that's a big advantage, after all. And an additional aspect is also that you think about the components better, or you develop pure components. And then reuse these better for testing.

As I mentioned we are migrating an Android application to Ionic Framework and by using Storybook are able to develop qualitative components quickly and independently.