INSIGHTS Frontend Stack at ABOUT YOU Desktop Unit

About the author

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.

Typescript

The most important point is that we are using Typescript instead of Javascript. If you are working with a big team you can’t know all codebase — but knowing types and interfaces on all data types can really help. You should never think: “Hmm… should I use string or number here as a first parameter?”. It makes your code more generic. It’s always better when you use a single source of truth (interface) instead of having same entity with different fields in different pages.

Pros:

1. Strict typing
2. No need on “guessing” the arguments types
3. A lot of libraries are already covered by types

Cons:

1. There are still libraries without types
2. You need to get used to it

React & Vue

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.

Pros:

1. Fast rerendering

2. Easy to learn

Cons:

1. Didn’t find any yet

Redux

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.

Pros:

1. Single source of truth
2. Easy storage, access, caching, invalidating
3. Easy scalable

Cons:

1. You are writing a lot of boilerplate out of the box
2. You need to create your own helpers and reusable functions to make it easy

Redial

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.

Ramda

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.

Pros:

1. Functional way
2. Pushes you to split code

Cons:

1. Huge amount of methods
2. People need time to start writing good code in Ramda

Aphrodite

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.

In Aphrodite we are doing exactly the other way around. All styles are being calculated in javascript and then rendered in CSS. That’s why we usually get only one class per element where all styles are merged before. Also you don’t need to learn some preprocessor as SASS or LESS. You are just writing javascript.

Pros:

1. CSS in JS
2. Clean CSS output
3. Rendering only the needed styles on page
4. Pushes you towards flat CSS
5. With server side rendering, the required CSS is directly pushed to the client without the need to load other CSS first

Cons:

1. Difficult to select siblings, children or hover on parent element

Webpack

All our javascript needs to be prepared for production. Webpack plays nice with hot mode reload of javascript.

As it has now tree shaking and module hosting, our bundle is really small without additional tuning.

Pros:

1. Easy to configure
2. Small bundle size
3. Easy to configure HMR

Cons:

1. Not found yet

Conclusion

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!