Design Patterns: The Blueprint Behind Great Code
05 Dec 2024
Introduction
Imagine walking into a sprawling city with unique buildings surrounding you on your left and right. Some of the buildings rise in complex, but unique, shapes, while others seem to represent a period of time long ago. Each of these buildings was carefully designed by one or more architects. When designing a building, they didn’t reinvent construction, but instead relied on pre-existing patterns, blueprints, and aesthetics in their design. In software development, design patterns are the blueprints that help developers construct solutions to common problems.
Just as architects used previous designs and methods to create buildings, developers use design patterns to solve recurring problems, or create simplicity when coding. Design patterns in coding tend to come in the form of templates that often complete simple tasks like creating the necessary files for a project, or even guiding the coder along the steps to set up their project.
My Journey with Design Patterns: React, Next.js, and Bootstrap
During my ICS314 computer science class at UH Manoa, I was asked to implement various designs and web pages using Bootstrap, React, and Next.js. Each of these tools are not only excellent build applications, but also great examples of design patterns in action.
In the beginning of the semester, we started out using Bootstrap, a popular CSS framework, along with HTML to build simple web pages. These webpages were straightforward, yet provided me with an essential understanding of how the various project files worked together. Learning how to use Bootstrap also introduced me to the concept of file separation when designing a webpage; HTML for structure, and CSS for style. This framework also helped me to understand the relationship between tags and style elements, and how the style page affected the look and feel of a design. One of the most valuable lessons Bootstrap taught me was the importance of consistency in design. Its grid system and reusable components made it clear how much time a well-structured framework can save a developer. Bootstrap helped me to get my toes in the water in the world of web development, and ultimately showed me how simplicity has the ability to make a project much faster.
Next, we moved on to React, a javascript framework created by Facebook. React utilizes the Composite pattern, where small components compose into larger more complex UIs. Learning to use React was a bit of a struggle at first, as the learning curve between it and Bootstrap felt quite steep. Bootstrap made it easy to visually see the results of applying a class to an element, whereas React required a deeper understanding of Javascript that took me by surprise. However, as I grew more comfortable with React, I discovered its power and flexibility, which was extremely exciting to me because it opened up a whole new world of design possibilities. One thing I was particularly fond of was the ability to break down a UI into reusable components I could use again somewhere else in the project. I loved how I could use the same button, for example, at multiple parts of my page with just a few minor adjustments. These features not only helped me to understand React and its functionality, but to ultimately grow more confident using it as a design framework.
Lastly, we covered Next.js, which is a React-based framework that adds additional functionality. While React focuses on building the user interface, Next.js takes it a step further by optimizing how web pages are presented to users, as well as enhancing usability. One of the most useful features I learned was related to how Next.js handles routing. Unlike other frameworks where the developer needs to establish the routing, Next.js automatically maps files in the pages directory to URLs. This is super helpful and comes with a huge time-saving element. Next.js felt like the next step up from React, emphasizing efficiency and scalability, which ultimately allows me to build applications that both look great and perform well.
Why Implement Design Patterns?
Using design patterns when building code, in a similar way architects use design patterns when designing buildings, not only solves a problem, but does so in a way future developers can understand, modify, and build upon. Furthermore, it simplifies the work the developer must complete to get their project running efficiently. Design patterns such as Bootstrap, React, and Next.js are incredibly useful frameworks for developers, ones that I would say are fundamental for efficient design.
Conclusion
Design patterns are the unseen heroes of software development, allowing for the creation of aesthetic, maintainable, and efficient code. They’re a set of blueprints that prevent developers from needing to reinvent the wheel every time they write a program. Just like architects designing a building, developers use design patterns to build upon when coding. By understanding and implementing design patterns in frameworks such as Reat, Next.js, and even Bootstrap, you are able to show that your code, much like a well-designed building, is both functional and enduring.
AI Usage In this Essay
Note ChatGPT was utilized in this essay to create the title, as well as in places to enhance sentence clarity. However, all thoughts were the authors.