Reusable Modal Architecture For Large-Scale React Applications - Part 1
TL;DR UI engineering is a lucrative career if you're highly skilled. But it's very challenging, and you need to know what you're doing. In this tutorial series, you will learn how to architect a highly reusable, scalable and customizable Modal component for a large-scale application developed with React, Redux & React-Bootstrap. Modals are a very important UI element for almost every application, so architect them right!
This tutorial series is React 17 ready. See this post on React's soon to be deprecated lifecycle hooks.
- Part 1 - Introduction
- Part 2 - The Modal Architecture
- Part 3 - The Main Modal Component
- Part 4 - The ModalHeader Component
- Part 5 - The ModalBody Component
- Part 6 - The ModalFooter Component
- Part 7 - BONUS - Using CSS Modules
A Modal is a fundamental piece of UX interaction used by nearly every application. If you’re a professional developer of any sizeable application, you need to architect your Modals carefully so you can achieve greater scale.
I’ve seen a lot of technical debt get created because teams moved too quickly and didn’t give any thought to the way they implemented Modals for their large-scale applications. This can introduce a lot of pain and wasted time, especially for bigger teams.
In this tutorial, I’m going to show you how to architect a Modal for maximum reusablility and configurability. The reusable Modal you’re going to develop is designed for apps made with React and Redux; however, the principles are applicable to any application developed in UI components.
So here’s a little secret. You don’t have to write all the code for your UI components from scratch. In fact, in many cases you simply shouldn’t. That’s because you can tap into the work of 3rd party libraries when necessary.
Wrapping your components around pre-made component libraries will save you a ton of development time. In this tutorial, I’m going to show you how to leverage and enhance React-Bootstrap’s Modal component.
But while React-Bootstrap will give you a functional Modal with a base-level of design, it won’t help you integrate it into a large-scale application. Not to fret, you’re going to learn how to do that shortly.
Before we officially define our requirements, let’s step back and think about how our reusable and highly customizable Modal should work.
First, we should have three distinct sections in our Modal. There’s going to be the the Header, then the Body, and finally the Footer.
In most applications, certain elements in the Modal’s Header and Footer will be standardized and consistent across the entire application. For example, there should always be a “cancel” or “close” link in the Modal’s Footer.
But in some cases, you many want to override the default behavior of certain sections. So we’re going to provide a set of standard defaults when applicable; however, we will also allow the developer to customize any aspect of the Modal.
So let’s now explicitly state a few key requirements (you can always expand on these).
A Modal should have a standard “Cancel” link in the bottom left-hand corner. This should appear by default.
If desired, the Modal’s Header and Footer should be customizeable. Meaning, a developer should be able to add any desired text, elements, button, icons, etc. to either the Modal’s Header or its Footer.
The Modal should have a standard width and UI. However, a CSS Module should be an option that can be passed in as a prop to the Modal component that can override any default styling (like overriding the width of the Modal for example).
If you’re not aware what CSS Modules are and you’re not currently utilizing them in your application, you’re definitely missing out! Seriously, using CSS Modules as part of your CSS architecture reaps dividends upon dividends. I show developers how to integrate CSS Modules into large-scale applications in my course.
The developer should be required to pass the Modal’s contents into the body of the Modal. After all, the point of a Modal is for the user to do or see something. So the Modal should have content.
For the sake of brevity, these are all the requirements for now. Like I said, you can always expand on these requirements in any way that suits you.
Next, you’re going to see how the underlying Modal architecture works and how it’s integrated with Redux.
Next Steps - The Modal Architecture.
GET YOUR LEARNIN' ON