Making a Web Component Analysis a practical example

Image for post
Image for post
source: http://www.masisalab.com

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

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:

Image for post
Image for post

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)

The pager

So Netflix uses the ‘Row’ component a lot, as you can see here:

Image for post
Image for post

So they just re-use the component. Now, let’s make a deeper analysis of the components in question.

Analysis

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 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:

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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_ ❤️

Frontend Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store