Please find a few demo projects with several design patterns for frontend. Please note all projects are based on Nodejs, so you'll need to have node & npm on your machine, also don't forget to install the dependencies for each project from the package.json by calling npm install command in the project's folder.
Below you can see the list (to be updated per demo prepatation and readiness) of demos for the design patterns grouped as follows:
Creational patterns abstracts object instantiation process, given this the system becomes independent of the details how objects are created, composed, and represented.
| Pattern name | Variable aspects | Sample Scenarios |
|---|---|---|
| 1. Singleton |
The sole instance of a class |
Global logger service Global state data Hardware interface access Managing Shared Resources (Cache) Service Classes Configuration File |
| 2. Builder |
Object's steps or configurations to be created |
Complex Object Creation Object Initialization Flexibility |
| 3. Object pool |
Set of reusable objects in a pool |
Web testing (e.g. instances of Selenium WebDriver) Database connection management |
| 4. Factory method |
Logic of object creation |
Configuration management Database connection management |
| 5. Abstract factory |
Types/classes of objects to be created |
UI component libraries Database connection management |
Structural patterns are a group of patterns that describe the relationships between entities and how those relationships should be formed. They help us to determine how our objects should interact with each other, which makes it easier for us to design clean and flexible systems.
The structural design patterns are classic solutions to recurring problems in object-oriented systems. They help programmers to organize their code in a way that’s flexible and easy to maintain, even as the system evolves over time. Structural design patterns can be applied at different levels of abstraction, from low-level details of how classes are used to high-level organization of entire systems.
| Pattern name | Variable aspects | Sample Scenarios |
|---|---|---|
| 1. Facade | Functionality in one or more subsystems | It is often present in systems that are built around a multi-layer architecture |
| 2. Adapter | Classes/objects having different/legacy interfaces | Integrating Legacy Code Working with Third-Party APIs Database Connectivity File Format Conversion Data Transformation Version Upgrades |
| 3. Composite | Different objects which are put together to create a structure with parts and wholes handled in a similar way | Processing hierarchical structures and collections |
| 4. Bridge | Implementations covered by under common abstraction | Operations that need to work on multiple platforms UI libraries |
Behavioral Patterns are concerned with algorithms and the assignment of responsibilities between objects. They describe not just patterns of objects or classes but also the patterns of communication between them. These patterns characterize complex control flow that’s difficult to follow at run-time.
| Pattern name | Variable aspects | Sample Scenarios |
|---|---|---|
| 1. Observer | Number of objects that depend on another object; how the dependent objects stay up to date | Immediately updating all of the dependents (observers) of the subject and notified on its changes |
| 2. Publisher/Subscriber | Number of objects that subscribes/listen to other object(s); how the listening objects stay up to date | System handling the sending and receiving of messages, e.g. chat apps |
| 3. Chain of Responsibility | Chain of multiple objects with single successor, or a tree-like structure | Loose coupling between the sender and receiver Dynamic Chaining Single Responsibility Principle Sequential Order Fallback Mechanism |
| 4. Strategy | Set of methods, behaviors, algorithms | Algorithm Selection Behavioral Variations Complex Decision-making Logic Dynamic Runtime Behavior |
| 5. Command | Set of commands | Control of state(s) |
| 6. Memento | Set of objects in stack Logic of stack management |
Undo/redo functionality History tracking Reverting an item to a former state |
Good luck.