๐Ÿด๓ ง๓ ข๓ ณ๓ ฃ๓ ด๓ ฟ๐Ÿด๓ ง๓ ข๓ ฅ๓ ฎ๓ ง๓ ฟ๐Ÿ‡ฌ๐Ÿ‡ง 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

  1. How are functions named? If you wanted to edit a function that handles user input, what could you search for?
  2. How are files organised? To find out how the application puts together the signup page, where will you look?
  3. 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?
  4. 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 chunk๐Ÿงถ๐Ÿงถ chunkChunking is a way to group information together so it’s easier to remember and understand. information, making complex codebases easier to comprehend.