So you probably have heard about this thing called components, Angular, React, Vue, Polymer, everyone is doing it.
Components are basically legos, small pieces of software that can be assembled into an app. So a big step when doing web components, is change the state of mind and start thinking in components
So, how do I think in components?
I’ll explain this to you, practically. With a simple exercise using a Netflix section, I’ll also add some pseudo data-code.
Let’s start by this row:
This is a Netflix section, actually they use it a lot, they just change the movies/series on it. So let’s take a look into the components here:
The Row itself
The Movie/Series/whatever card (I’ll call it Movie Card)
So Netflix uses the ‘Row’ component a lot, as you can see here:
So they just re-use the component. Now, let’s make a deeper analysis of the components in question.
When the UX / UI team gives us a design we need to be prepared for everything, every use case should be covered (check the components section of this post). Due time, I’ll be covering the happy-path only. There’s a lot of cases on the components, that are covered by Netflix
The Movie Card:
The card is very simple at it’s first state, just the image of the movie in question. But if we hover we have more of it:
Here we can see, a lot more.
Play button, Pictures*, Title, Rate, Release year, Number of seasons, description
Actions: Thumbs up, thumbs down, add to list and icons
*If we leave our cursor in the card the image starts to change:
All the things I mentioned above are gonna be the custom properties of our component. So, as you can see, those are a lot of properties that we need to pass to our component to be re-usable, so in my experience when is this many properties is better to use have a ‘config’ property, here’s an example:
So, let’s take a look at the ‘actions’. As you can see I add the icon property and also an event name, why is that?
This is to have it as custom as we can, we can pass an event name and when the user clicks that button that’ll be the event that we’re gonna aim for.
Also, the actions config can be in another property, if you wish so.
As you can see here, we made the payload as custom as it can get by adding the actions field and the pictures timeout, but if we’re sure that our component will always have the same behavior, and the same icons we can skip that part and just make it part of the component itself. (Personally I never do this).
By having this payload, basically all our logic inside the component get’s kinda simple, because we’re getting all the data we need from the outside.
I’d love to hear from you, you can reach me out on twitter: @edernegrete_ ❤️