Basics of Front End Systems Design

For years I thought systems design was exclusively reserved for the backend and coming from a front-end background, that worried me a lot.

Years later, I learned that the front end has its own systems design patterns and today we are going to discuss the basics.

Lets go!

Front-end system design patterns are reusable solutions to commonly occurring problems in software development, specifically in the context of user interface and user experience. These patterns help devs create scalable and maintainable front-end architectures.

1. Model-View-Controller (MVC)Model: Represents the data and business logic.View: Represents the UI of the application.Controller: Acts as an interface between Model and View.In layman's terms think of this like a restaurant: The kitchen (Model) prepares the food, the dining area (View) is where you see and eat the food, and the waiter (Controller) takes your order and brings the food to you.
2. Model-View-ViewModel (MVVM)Model: Represents the data and business logic.View: Represents the UI of the application.ViewModel: Acts as a mediator between the Model and the View.In layman’s terms think of it similar to the restaurant, but now the waiter (ViewModel) also helps decide how the food should be presented on your plate.
3. Model-View-Presenter (MVP)Model: Represents the data for the application.View: Displays the data and sends user commands to the Presenter.Presenter: Acts upon the model and the view.In layman’s terms think of a TV show: The script (Model) has the content, the TV screen (View) displays the show, and the host (Presenter) decides how to present the content from the script.
4. Component-Based ArchitectureThis pattern divides the UI into reusable components, each responsible for its own view and logic. Frameworks like React, Angular, and Vue.js use this pattern.In layman’s terms think of it like building with a LEGO playset: Each piece (component) can be used in different ways to create various structures.
5. Observer PatternDefines a dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.In layman’s terms think of it like getting notifications on your phone: When something new happens (e.g., a new DM on IG, or iMessage), you get alerted.
6. Singleton PatternEnsures that a class has only one instance and provides a global point of access to it.In layman’s terms think of it like only having one remote control for your TV. No matter where you use it, it controls that one TV.
7. Factory PatternProvides an interface for creating instances of a class, with its subclasses deciding which class to instantiate.In layman’s terms think of it like like a toy factory: You ask for a toy, and the factory decides which toy machine will make it.
8. Decorator PatternAllows behavior to be added to an individual object, either statically or dynamically, without affecting the behavior of other objects from the same class.In layman’s terms think of it like customizing your phone with cases and stickers. The phone still works the same, but it looks different.
9. State PatternAllows an object to change its behavior when its internal state changes.In layman’s terms think of it like a traffic light: It behaves differently (stops cars, lets cars go) based on its color (state).
10. Strategy PatternDefines a family of algorithms, encapsulates each one, and makes them interchangeable.In layman’s terms think of it like Choosing a travel route: Different routes (strategies) can get you to the same destination, but you pick one based on traffic, distance, etc.
11. Module PatternDivides the application into modular components, each with a specific responsibility. This pattern is commonly used in JavaScript to keep pieces of code independent of other components.In layman’s terms think of it like compartments in a toolbox: Each compartment (module) has its own set of tools for a specific task.
12. Proxy PatternProvides a surrogate or placeholder for another object to control access to it.In layman’s terms think of it like using a middleman: Instead of dealing directly, you go through someone (or something) else.
13. Command PatternTurns a request into a stand-alone object that contains information about the request. This decouples sender and receiver.In layman’s terms think of it like using voice commands to control Siri or Alexa: You tell your smart speaker a command, and it does the action for you.
14. Chain of Responsibility PatternDecouples the sender from the receiver by allowing more than one object to handle a request.In layman’s terms think of it like passing a task in a team: If one person can't do it, they pass it to the next person.
15. Composite PatternAllows you to compose objects into tree structures to represent part-whole hierarchies.In layman’s terms think of it like a gift basket: It's one item (the basket) but contains several smaller items inside.

These patterns are normally used in various combinations depending on the specific needs of the application.

I post stuff like this in my newsletter: https://www.systemsdesignchallenges.com/

Subscribe please!

If you found this useful, comment like and share.

Thanks!