Separation of Concerns and Modular Code

Make it Modular

What does it mean to make your code modular? In a word, LEGO’s. Just let that sink in for a moment. Ready? Cool.

From this point forward I want you to think of your code, whether big or small as a collection of LEGO’s. Furthermore, think of finished project (all the LEGO’s together) as your completed codebase and then think of each individual LEGO as a separate Class, Component, Method you name it…



This goes back to our understanding of the Separation of Concerns that was covered in weeks 2 and 3 of React.js. The idea being, the more your break your code down into its simplest parts the more easily it can be altered later in the future. This is actually a principle that increases in importance as your application grows in size. 

So what does this mean in practical terms? Let’s look at an example of breaking down a class into smaller, more modular parts.


This may seem like a lot to take in at the moment but just sit tight. In this example we have two Classes (Sailboat & Sail). I omitted the previous code for brevity, but originally Sail was a part of Sailboat. The problem with that would have been discovered when we wanted to create different types of sailboat’s. For this case, it would make more sense to take those parts that are more universal (type size & color of an actual Sail) and make them their own Class.

Once we have our Sail class built, we can then begin to build our Sailboat object from the class syntax create above. In our Sailboat class example we have arguments for mainsail jib & length. Since, we took the sail out and made it its own Class we can now create a Sail object and then pass that object in as an argument to our Sailboat object Class!


You may still be wondering about the usefulness of this concept, let’s fix that! What do we know from OOP? We know that we want to create objects that are based on actual objects in the real world. Knowing this, what else can we add to our Sailboat class? How about speed and direction? Let’s take a look.

Screenshot at Apr 02 09-51-23.png

In this case we are creating a class for the sole purpose of holding a Velocity method! We construct this method with all of the appropriate arguments (speed & direction) followed by methods accelerate and stop.

Now, we want to add this functionality (methods) to our Sailboat object. To do this, we create an instance variable in the constructor(initialize method) of our Sailboat class. We set this instance variable to our class Velocity by creating a new object from this class with the .new method. We then initialize this new object with some default values, (0 and NNW).

Now, later in our Sailboat class we can create a method called pleasant_trip that will, itself, reference this class of Velocity we create earlier because of how we included it into our class. Now, when we create a new sailboat object, we can use our pleasant_trip method on it by simply calling ss_drod.pleasant_trip.

Not bad huh? Let’s take this just one step further to illustrate the benefits of this modular system of Class structure. What if we created another app that dealt with Koala bears? What is something that we may want to include in that code? How about Velocity? Sure, let’s try it out…

Screenshot at Apr 02 10-01-17.png

As you can see from this except, we have created a KoalaBear class and inside of it, we have again initialized a new Velocity object in the constructor and then referenced that instance variable @velocity in a later method named stroll.

Now it become more clear about how seemingly different objects can share, at least, some functionality. For this reason, it is important for us to break up our code into smaller and more manageable pieces to allow for future alterations to our codebase. Doing so will allow us to be far more flexible in our approach to solving problems down the line.


Submit a comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s