🏴🏴🇬🇧 Identifying patterns
Patterns are reusable solutions to common problems.
In the PurpleForest application, there are identifiable patterns. These are rules that the original developers followed when they built the application. By understanding these patterns, you can understand how the application works and how to extend it.
Architectural Patterns
These are known solutions to common tasks in software. In Purple Forest, we could identify an MVC pattern, a SPA pattern, and a RESTful API pattern, among others.
You don’t need to memorise all these names, just be alive to the idea that there are patterns in the codebase that you should look for and reuse. You have implemented patterns many times before in previous modules without knowing their names.
Design Patterns
Formal design patterns are more commonly used in object-oriented programming (OOP).
In Purple Forest, which is not written in an OOP style, you can still find patterns like the Factory Method or the Singleton.
Code Conventions
We can also see regularities in the codebase called conventions. You can derive useful information from these conventions. Write down your answers to the following questions:
Investigate and document
- How are functions named? If you wanted to edit a function that handles user input, what could you search for?
- How are files organised? To find out how the application puts together the signup page, where will you look?
- Is there a pattern to the classes and ID names in the HTML? If you were to add a new template, how would you name it?
- Compare any two components. Is there a similarity in their structure? How would you write a new one?
Component Creation Pattern
Let’s identify a convention in the Purple Forest application. Read any “createComponent” function in the Purple Forest codebase. In your notebook, write down the general steps this function takes to create a component.
Play computer and think about it
// function name starts with create
// then name of file
// function expects a template (id) and data as arguments {
// first, return if there's no data
// next, clone template to create a fragment
// then, populate the fragment with data
// return fragment
//}
Check your specification against another “createComponent” function. Does the pattern hold?
💡Tip
Once you identify a pattern, you can predict how other parts of the system will work.
Why Patterns Matter
Patterns help you:
- Predict how other parts of the system work
- Guide your implementation of new features
- Spot potential problems where patterns are broken
Understanding patterns allows you to