To the best of my knowledge, design patterns are the ways in which systems of object-oriented programming are constructed, maintained, and executed. I think of them as the architectural frameworks of any good code. From what I have learned, there are three categories of design patterns. The first of which is the creational category that describes how objects are formed. Then there’s the structural category that denotes how objects are interlinked. As well as the behavioral category in which it details how objects function.
A few of the patterns that I have learned about are the Singleton, Factory, Observer, and Controller. Within traditional coding practices, we can use instances, constructors, and methods to return objects. However, with the Singleton, you can create global variables where objects are passed through by reference. This creational pattern's built-in properties eliminates the need for constructors and methods within JavaScript. Then there is the factory pattern that allows for objects to be called from a database and is found when using interfaces. Being a creational pattern, this software is the framework for game developments, notifications, and payment gateways.
Additionally, there is the observer pattern that acts as an event handler to updates systems. This behavioral pattern allows for user interface functionality, such as inputting information. Finally, we have the Model-View-Controller. A behavioral design pattern affecting the components that the user can view. Much like a controller that alters the methods of execution, these designs are not hardset. Instead, they allow for frameworks to build on and provide outlines for solving complex problems.
With that in mind, here are some of the design patterns that I used throughout our final project. Instances such as factory patterns can be found with the queries to our database in const games = await prisma.game.findMany(); or const players = await prisma.player.findMany(); . This helped us to create arrays of our objects represented within the players cards. Additionally, I used examples of singleton patterns, such as import { prisma } from '@/lib/prisma' . Allowing us to share prisms throughout our app, support the management of our database, and prevent replications of multiple connections.
Not to mention the use of Observer patterns with const [favorites, setFavorites] = useState([]); . As well as setFavorites((prev) => prev.filter(…)) . Both of which update the UI to reflect changes of its state within React. Moreover, we implemented event handlers with onClick={() => onToggleLibrary(game.id)} and onClick={() => onRemove(game.id)}. Not to mention, the use of Controller patterns through the implementation of client logic from our API/library. The control of data flow between the user interface and the database is best seen in the line export async function POST(req) { ... } . In addition, we implemented async function handleAdd(gameId: number) { await fetch('/api/library', { method: 'POST' }); } .