Okay. Before we start, let’s identify who this post is for by sending out a quick spec:

By the product spec, whenever a user has a role of “Administrator” their profile picture must be outlined in a blue color. If the user has a different role, remove that outline and add this blue color. If the user doesn’t have a role, return their outline to the normal gray color.

Now as programmers, when we hear product specs like this we immediately start thinking of the WHO, WHAT, and HOW surrounding this. I’m more concerned with the HOW.

If your first inclination was to use jQuery to find the user profile on the DOM, check if it had a class, remove said class and add a new class…this post is for you. For everyone else, stick around maybe we all can dive into something that’s outside our day to day.

Now, don’t get me wrong. I love jQuery. But to achieve a really clean reactive interface we can’t rely on something as CLUNKY as the DOM.

What is a Reactive User Interface?

Reactive User Interfaces are a declarative way of expressing your app’s visual representation of DATA. Data is the keyword here. As UI Engineers, our responsibility is to take the truth of the server and present that to our users in a natural way.

Reactive or Declarative user interfaces separate UI State (the DATA) from the underlying layout of the user’s visual experience (THE DOM). This allows us to write components by declaring how the rendering should translate our data into visual elements on the DOM. With these triggers in place, we can continue to update state to get DOM adjustments automatically.

Okay, let’s implement the spec

Let’s dissect this spec and build this profile component in a declarative way.

We’ll be using React and MeteorJS to do this. But you can do whatever you want! I chose Meteor because well, I fucking like it.

I’d like to start with this part of the spec:

If the user doens’t have a role, return their outline to the normal gray color.

I started with this because it seemed like the “base” state of our UI. Since a Profile picture shouldn’t do much outside of displaying images and showing CSS we should make this component strictly for presentation. The data, on the other hand, should be passed in a state container. Check out this blog post to differentiate between the two.

Container Component

Let’s build the ProfilePictureContainer to hold the data for our spec.

Alright! Sweet. We have a cool container component that can wrap child components and give them the data we desire.

Stateless Component

Next, let’s make a presentational component. or a Stateless Component Function.

Alright now we have a profile picture component that its base has a “grey-outline”

Style based on Role

By the product spec, whenever a user has a role of “Administrator” their profile picture must be outlined in a blue color.

Alright, now we need to write the outline of the picture based on the user’s role. Let’s do this declaratively.

Okay so now we check the role prop passed in. The great thing about reactive interfaces is we can check what the state of our data is, in this case, the user’s role, and as this role changes our presentation will change automatically.

If the role is “Admin” we bind the value of “blue-outline” to the component, if not we have the “grey-outline”.

Let’s bring it home

If the user has a different role, remove that outline

So this spec really means, the user’s outline should react to changes in role. In cases like this, some product/design person will give you a map of what roles have what outlines.

const RoleColorMap = {

"Admin": "blue-outline",

"Manager": "orange-outline",

"Staff": "pink-outline",

"Student": "red-outline"

}

In helper functions, we trust

And we know that if the user has no role, then we just give them a “grey-outline”. The beautiful thing about using declarative programming to express our UI is we can write great helper functions that can do this assignment for us.

const roleOutline = (role) => {

switch(role) {

case 'Admin':

return "blue-outline";

case 'Manager':

return "orange-outline";

case 'Staff':

return "pink-outline";

case 'Student':

return "red-outline";

default:

return "grey-outline";

}

}

Let’s wrap this up and apply this function to our component.

Now our profile picture component will react to different user roles and display different outlines!

Conclusion

There you have it! A quick little dip into a reactive user interface. Though this example was pretty trivial, I hope it gives you jQuery lovers a little tease into the era of modern user interfaces.

If you enjoyed this post, give me a recommend! You can follow me on twitter @abhiaiyer