Belka Web Team Unveiled — 2020
What you always wanted to know about our web team but never dared to ask.
«Belka is a” React-based “company».
It’s true, but there is much more than that.
I will just talk about the web team, which is only one of the teams that work in Belka.
🗺️ We will start from the frontend, continue with the backend and finish with a pinch of continuous integration.
Ready? Let’s start!
This library is our trademark. To create the interfaces and logics that will be used in the browser, in our opinion, it is unrivaled.
React is not a framework and does not offer ready-made solutions to manage large applications. How do we do that? Thanks to the community we have many libraries, such as Redux, which makes our life easier.
A good part of the projects we have to create from scratch start with the command:
npx create-react-app my-app
Creating a development and production environment takes a long time given the exaggerated amount of parameters available. The need to find a configuration standard, shorten the time to start developing and the barrier to entry to do so has created create-react-app.
Another point in favor of this tool is the ease with which it is removed from the project. If you need special configurations, you can run yarn eject and all the magic disappears. Instead, all the configuration files will appear, ready to be modified.
You have to assign a type for each function in typescript. This allows you and other team members to understand immediately what the input parameters are and what is returned as output. If parameters with the wrong type are passed to the function, the transpiler will fail and it will help you understand the cause of the error.
We really like Typescript because it is an indirect way to document the code and to explain the behavior of the functions. It reports immediately if something is wrong when we use it.
We consider it indispensable if the project grows larger than a small MVP.
We had many options in front of us. In our case, given that the Design System would have been shared by three different products, we wanted a tool that would allow us to manage the stylistic peculiarities of each project.
For this reason we chose Styled Components, which allows you to manage the style of each component independently and allows the creation of themes. Each theme has its own graphic aspect but maintains the logic of the elements in common.
Scss → Scss modules
To create the style of the applications we often use Sass by importing the css classes with the Modules technique. This allows us to create both shared and specific styles for a particular component. When importing the stylesheet, each class is given a unique name, thus avoiding specificity problems of the selectors.
We use Storybook mainly for two reasons:
- develop components in isolation
- introduce the components to the whole team
Does a designer need to know which components already exist? It can go to the project’s Storybook, scroll through the list of components, try and test them.
Already integrated into the create-react-app, Jest offers a very complete testing suite. Usually, we perform unit testing of the critical parts of our applications, but Jest offers much more. It also allows you to do end-to-end testing, if accompanied by other tools.
Over the year we want to increase test coverage, so Jest will become our best friend. At least we hope so 😂
The first site we did with Gatsby was the one where you are now. The result has been incredible. It is not as simple as Jekyll, but it gives great performances nonetheless. All the static sites that I will do from now on will use this framework. Try it and you won’t regret it!
It is always alert. When something moves in the repository, he knows it and it starts a deployment.
Once Netlify is attached to your repository you will not have to worry about doing the build of your static website anymore.
It works with most generators and programming languages and its network architecture allows it to serve files at incredible speeds.
We have chosen Contentful to manage the contents of our site. That’s because it allows you to manage all the data we need in a single environment.
In particular, the hosting of images and the localisations are well managed, eliminating the need to resort to additional services.
During the last year, we received the request to create reusable components on different websites. The requirements:
- completely independent from each other
- retaining their style regardless of where they were added
- configurable from the outside
We created iframes with superpowers. Let me introduce you to into the world of Web Components. 🌐
Web Components are perhaps one of the most underrated web technologies. It is a great shame since it is the new web standard for building reusable code. If you want to know more I spoke about that recently at this conference.
When we have to create a backend and serve APIs, our first choice is always Django. I have used it for many years and the development pace blended with the flexibility of this framework makes it unbeatable.
When we don’t use Django we use Node.js. Over time we have tried different frameworks:
DevOps & CI
We use Bitbucket to manage the code versioning. This choice does not derive only from a technical standpoint, but also for organizational reasons. In Belka, we try to use as much as possible all the tools that Atlassian offers because they work in synergy.
An example: if I give the same name to a branch on Bitbucket, the User Story created on Jira immediately creates a bond between the two. When the branch merge on Jira occurs, the status will be automatically updated.
We also use Bitbucket’s Pipelines, the Continuous Integration and Continuous Delivery tools integrated within Bitbucket. Watching the automated tests running is very satisfying. Especially when they pass. 🤞
When we don’t use Bitbucket Pipelines we use CircleCi. Not all projects are created equal and some require special treatment. Being focused primarily on automation, they offer premium services that are not found everywhere, such as macOS virtual machines.
Thanks for reading!
For any questions, you can find me on Twitter as @lc_fd.
Don’t forget to subscribe to the Belka newsletter! You don’t want to risk missing out on new articles coming out, do you?