I recently switched teams here at Zalando Tech, and I went from working by myself with no code reviews, to now working with a senior engineer with over 10 years experience. I wanted to share with you one of the core concepts I have learned thus far, “The Factory Pattern”.

One of the reasons React is so successful is due to its concept of components. It is easy to organize your project and have someone else understand how it works. While components are great, both dumb and smart, there are more organizational patterns that can be added.

A simplified version of what my colleague and I had to built was as follows:

• A layout of Sliders, with each Slider on the page a little different from the next.
• In each Slider, there are Slides that differ from one to the other.

While we organized the Sliders and the Slides using the Factory Pattern, for the moment I will only be describing the Slides to keep this post as simple as possible.

An example of a Slider with Brand Slides:

An example of a Slider with Article Slides:

The most important concept to note here is that the Slider stays the same: It is the Slide type that is changing. This is the perfect scenario to use the Factory Pattern. The Slider does not need to care about what kind of Slides it contains – it is the job of the Factory to decide. Below is a simplified version of the Factory we built:

export default class SlideFactory {
    static build(data) {
        switch (data.source) {
            case 'brand':
                return ;
            case 'article':
                return ;
            default:
                return undefined;
        }
    }
}

Inside the Slider, you would render the Slides with the following method:

const  items = [
   {
          source: ‘brand’,
        title: ‘title’
   }
]
const renderedItems = items.map((item) => SlideFactory.build(item));

The Slide “item.source” returns a string:

item.source ⇒ ‘brand’

Or

item.source ⇒ ‘article’

This string value informs the Factory of which Slide it needs to render. This particular Factory has two different types of Slides it creates: Brand or article. But we can add as many as we want. It is that simple!

Now let’s take look at the definition of the Factory Pattern:

“The Factory Method Pattern is a creational pattern that uses factory methods to deal with the problem of creating objects without having to specify the exact class of the object that will be created.”

Wow, that is intense. Let’s break that down into something understandable, shall we?

• The Factory creates Slides with the build method (is a creational pattern that uses factory methods).
• The Factory can create many different kinds of Slides that share the same interface (without having to specify the exact class of the object that will be created).

This pattern has made it possible to take more logic out of our Slider components, making them even dumber and organizing them into a more humanly readable fashion.

As a junior developer I can be easily impressed, but this pattern is extremely useful together with React components, and I recommend that everyone give it a try in their next project.

We're hiring! Do you like working in an ever evolving organization such as Zalando? Consider joining our teams as a Frontend Engineer!