Frontend Stack at ABOUT YOU Desktop Unit
About the author
Alexander Kochergin is working for ABOUT YOU since 2015 . He is a Senior Frontend Developer at our Desktop Unit and an expert in frontend technologies.
At ABOUT YOU we are using lots of modern technologies. And they are not based on the latest hypes but on smart decisions. As an e-commerce company, we have quite a lot of customers and visitors and the shop is supposed to work smoothly for them 24/7.
Since March 2017, we are working on rewriting the whole desktop version with a new stack. Here are the most important tools to develop fast and stable.
- Strict typing
- No need on “guessing” the arguments types
- A lot of libraries are already covered by types
- There are still libraries without types
- You need to get used to it
React uses a shadow dom implementation, which does diff comparison between old and new versions of your shadow dom and therefore makes it really fast. From our point of view the most popular and stable solution nowadays is React. It works nice as a view layer for our application and writing jsx makes templates easy to read, split in separate files and support.
I think it is valid to say that it’s easy to learn or to get into it but there’s also a lot of experiences to be made to have a solid code base. So you have a quite steady learning curve.
The other alternative which is quite similar to React is Vue which we are also using in our company.
- Fast rerendering
2. Easy to learn
- Didn’t find any yet
Nowadays, the amount of data on client is huge. And we need an easy approach to store, access, cache and invalidate it. That’s why we like Redux with its store which is the single source of truth for us. It is easy scalable in any size on application. It’s quite easy to debug an application with Redux because you don’t directly mutate state but change it through actions.
Here is a good explanation of data flow in these types of applications.
- Single source of truth
- Easy storage, access, caching, invalidating
- Easy scalable
- You are writing a lot of boilerplate out of the box
- You need to create your own helpers and reusable functions to make it easy
The amount of data requests per page can be really big. That’s why we need to wisely split them between backend and frontend rendering. Only the most important data for the user, like a product or category page, is fetched on server. All other stuff is fetched on client. Redial helps us to split all requests in an easy way with High Order Component.
As we see, React is moving towards functional way. That’s why we are also trying to write all our code in a more functional way. Ramda helps us with it a lot. From the beginning, people think about Ramda only as a bunch of helpers. With time they understand that it’s a completely other way of writing code. It pushes you to create small reusable functions and not huge monolithic methods.
- Functional way
- Pushes you to split code
- Huge amount of methods
- People need time to start writing good code in Ramda
We are writing a lot of CSS every day. We want to see it in a modular way, where it is easy to share styles and use variables. Two most popular approaches are “CSS modules” and “CSS in JS”. When you are going with CSS modules you end up with classes which override each other. This is because you can’t merge styles in CSS. You can only override them with other classes.
- CSS in JS
- Clean CSS output
- Rendering only the needed styles on page
- Pushes you towards flat CSS
- With server side rendering, the required CSS is directly pushed to the client without the need to load other CSS first
- Difficult to select siblings, children or hover on parent element
As it has now tree shaking and module hosting, our bundle is really small without additional tuning.
- Easy to configure
- Small bundle size
- Easy to configure HMR
- Not found yet
As you can see, we are using a huge variety of new modern technologies at ABOUT YOU. We are using them not (just) for fun or to try new technologies, but to develop faster and in a more stable way.
You like our tech stack preferences? Or you‘re curious about using them? Then check out our latest vacancies in our ABOUT YOU Desktop team!