JavaScript Design Patterns

MVC v. Component Architecture

6 min readMay 31, 2017

As a developer with experience in Rails and vanilla JavaScript but new to React.js, the most intimidating shift is going from Model-View-Controller architecture to Component architecture. This post is intended to help those in a similar learning path make the transition from thinking in MVC to thinking in React.

Here’s our roadmap:

Why use a design pattern?
Sample App: ZooBook
MVC Architecture
Component Architecture
File Structure
Code Comparison
Take-aways

1. Why Design Patterns?

Code without design pattern:

Good luck with that! Moving on.

2. Sample App: ZooBook

For this project, I built a simple app in JavaScript and jQuery using MVC architecture and my colleague Sammy Steiner built the exact same app in React. It’s basically Facebook, but you get to defriend everyone every day instead of just during election season.

Simple app that appends an animal friend to the screen dynamically with no database and no persistence.

3. MVC Architecture of ZooBook

MVC breaks the code into three components: Model, View and Controller. The gif below shows the interaction among these.

MVC Demonstration

The Controller (animalsController) updates the View (animalList)
The View (animalForm) delivers User input to the Controller
The Controller updates the Model (Animal) of changes based on User input
The Model notifies the Controller of the changes so the Controller can update the View (animalList)

MVC Components

Model
- The model works with the database and API’s to call for and structure the data for the app.
- It handles logic, data manipulation, and the state of the application. It informs the Controller of the current state of the data so the Controller can serve that information to the View.
View
- The view is the user interface of the app. It is the only place where clients can interact with the program.
- The view intakes user data, which it passes to the Controller so the Controller can serve it to the Model. When the Model gets user data, it can change the state of the app and pass the new state back to the Controller.
Controller
- The controller is the go-between from Model and View. It handles the user data it receives from the View and gives it to the Model, then updates the View with the new state the Model gives it.

4. Component Architecture of ZooBook

In React, the components act like Views on steroids.

The Components all represent a rendered piece of the website, but they also do the work of maintaining state and logic (without a state management tool like Redux). To draw up a React app, start with the design first.

The first thing you’ll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you’re working with a designer, they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!
— Thinking in React, React.js Docs

Component Demonstration

The layers we have are performing the following roles:

Presentational Components:

App: Renders the NavBar and ZooContainer
NavBar: Renders links around the site and the site title
ZooForm: Renders form for User input
ZooList: Renders container for animals to be appended into a list
Animal: Renders each animal in ZooList

“Smart” Component (maintains state):

ZooContainer: This layer is special. It’s the only layer that knows about the “state” of our application: for our purposes, it knows which animals should be in the list at all times and serves that information to the ZooList and Animal components so that they can just focus on the job of rendering them properly.
**Note that more than one component can be “smart” but developers strive to keep as few components maintaining state as possible because it gets very messy very fast.

5. File Structure Comparison

MVC File Structure

MVC is, unsurprisingly, broken up into three folders. The only files the client can interact with are the View files while the model and controller files do the background work.

Component File Structure

Our code is broken up into container and component files. Notice that the component files were all “presentational” while the container file is the “smart” component. Dan Abramov, creator of Redux, gives some advantages of using this approach in his blog post on Presentational and Container Components:

- Better separation of concerns. You understand your app and your UI better by writing components this way.
- Better reusability. You can use the same presentational component with completely different state sources, and turn those into separate container components that can be further reused.
- Presentational components are essentially your app’s “palette”. You can put them on a single page and let the designer tweak all their variations without touching the app’s logic. You can run screenshot regression tests on that page.

**Because if it’s good enough for Dan, it’s good enough for me.**

6. Code Comparison of ZooBook

We’ll look at the file from each structure that touches the most other files. In our MVC design it will be the controller while in React it will be our container file.

MVC: animalsController

Breaking down each part:

Render: The wrap function for this animalsController class that tells it what to display when called
Form: Instantiates a new animalForm (the View that shows our form to add animals) and appends it to the DOM
Submit: Describes what will happen when the user clicks the submit button
Input: Defines the user input we get from the form
Model: Instantiates a new Animal (the Model that defines what an animal friend will be like)
List: Instantiates a new animalList (the View that shows all our animal friends) and sends our new Animal to it to be placed on the DOM

Component: ZooContainer

Breaking down these parts (note that some of this has been pseudocoded for readability):

State: Sets the initial form input and animals list to blanks
Input: Captures user input and sets the nameInput, speciesInput, and picInput in State to equal what the user enters
Submit: When the user submits the form, it adds the new animal to the state’s animal array
Render: The render is the part the user sees on the DOM. It shows two other components:
- ZooForm: This presentational component renders the view of the form for the user to input a new animal friend
- ZooList: This presentational component renders the view of the entire animal list

Side-by-side: Code Comparison

One thing I found interesting was just the visual difference in the makeup of these different designs. The MVC design looks very nested while the Component looks more modular. This may or may not be meaningful, but it is cool to look at.

7. Take-Aways

When moving into React from JavaScript, you may find that you’re writing more code than you’re used to, especially for a small application like ZooBook where we went from using essentially 4 files to 6 and with a much longer “logic center.” That’s okay! From the React docs again:

While it may be a little more typing than you’re used to, remember that code is read far more than it’s written, and it’s extremely easy to read this modular, explicit code. As you start to build large libraries of components, you’ll appreciate this explicitness and modularity, and with code reuse, your lines of code will start to shrink. :)