Belka Web Team Unveiled — 2020

What you always wanted to know about our web team but never dared to ask.

Author

Luca Fedrizzi

15 Jul 2020

In short:

«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!

Frontend

Front-end

React

https://reactjs.org/

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.

Create-react-app

https://create-react-app.dev/

A good part of the projects we have to create from scratch start with the command:

npx create-react-app my-app

Since this magnificent tool came out, starting of a new project does not coincide with the configuration of Webpack anymore. Webpack is used to assemble all your JavaScript code and other types of static assets (i.e. images) in a single package. For applications with more than one file, such a tool is indispensable.

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.

Typescript

https://www.typescriptlang.org/

We add types to Javascript thanks to this superset. It has brought many benefits for teamwork and code stability.

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.

Styled-components

https://styled-components.com/

A new entry. We’ve been developing the Design System shared by FattureInCloud and Domustudio since the end of 2019. The design system project led us to know Styled-components.

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

https://sass-lang.com/documentation/syntax https://css-tricks.com/introducing-sass-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.

Storybook

https://storybook.js.org/

We use Storybook mainly for two reasons:

  1. develop components in isolation
  2. 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.

Jest

https://jestjs.io/

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 😂

Gatsby

https://www.gatsbyjs.org/

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!

Netlify

https://www.netlify.com/

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.

Contentful

https://www.contentful.com/

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.

Polymer

https://www.polymer-project.org/

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.

Backend

Back-end

Django

https://www.djangoproject.com/

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.

Node.js

https://nodejs.org/

When we don’t use Django we use Node.js. Over time we have tried different frameworks:

Unlike Python, everyone in Belka knows how to get their hands on Javascript and it can help solve problems or write new features.

Database

SQLite under development and prototyping. PostgreSQL when it starts to go into production.

Continuous Integration

DevOps & CI

Bitbucket

https://bitbucket.org/

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. 🤞

CircleCi

https://circleci.com/

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?

Author

Luca Fedrizzi

Keep in touch with us!

We like to share what we learn. You can get our discoveries in your inbox subscribing to our newsletter.

Subscribing you accept to receive our newsletter. We will use your email address to send you our articles.
Read the privacy policy here.