Friday, 6th of October 2023, the Explore + Reveal development team spent half a day to experiment with new front-end technologies.

We discussed the need to use a front-end framework. This happened after we had to make some UI changes in the old areas in Explore and it was extremely painful to do so. You change one thing, fix an issue, but cause another one in a different area.

We talked about the available choices in the market. The obvious ones: React, Vue and Angular. But also the not so obvious ones: Svelte and Web Components.

The decision is hard. As a CTO, you need to balance out the current knowledge in the team, the available pool of talent and the maintainability and "futureness" of the tech chosen.

In a way, the most talked about were Vue, Svelte and Web Components.

Personally, Svelte is really nice and fun. But it's a bit too lightweight and too frontendy. So it comes down to Vue and Web Components.

What did we try? We experimented to see how difficult it would be to integrate Web Components in a project. I picked lit.dev framework for this. And we played around with it. We added the dependencies, we created a component and we displayed it on an existing page.

We like the fact that the components that we make can be integrated in the new project without the need to have everything created in that framework. So it can co-exist with something else easily.

Then we tried to move some data around from the backend to the controller. And we had a nice surprise, and we did it quite easily. So it works! The experiment was a success.

Next we wanted to go deeper. So we played around with Storybook. This was even more challenging for us, but eventually we managed to create some stories and to have our previously created component render in the story as well in different states. Wonderful.

In conclusion, adding a front-end framework in the new Explore app is achievable. But we still lack some knowledge and some good practices.

What we understood so far:

• we need to use Storybook to keep a lid on every component that we will create and make sure things are always aligned properly
• we can use Lit (web components) or Vue most likely