{"id":19636,"date":"2019-02-19T12:00:30","date_gmt":"2019-02-19T17:00:30","guid":{"rendered":"https:\/\/webdevstudios.com\/?p=19636"},"modified":"2024-04-15T11:59:07","modified_gmt":"2024-04-15T15:59:07","slug":"observable-pattern-in-javascript","status":"publish","type":"post","link":"https:\/\/webdevstudios.com\/2019\/02\/19\/observable-pattern-in-javascript\/","title":{"rendered":"How to Use the Observable Pattern in JavaScript"},"content":{"rendered":"

Lately, I\u2019ve been trying to become more familiar with design patterns. One thing I\u2019ve realized along the way is that it\u2019s not easy to recognize where a specific pattern might be useful. It usually comes down to having that light bulb moment where you suddenly say to yourself \u201cHey! This might be a good place to use a certain design pattern.\u201d<\/p>\n

Define the problem.<\/h3>\n

Since design patterns are used to solve specific problems in software, let\u2019s try to define such a problem and work to solve it using a design pattern in JavaScript.<\/p>\n

With the rise of frameworks like React<\/a>, we often hear about \u2018application\/component state.\u2019 When the state is updated, components will re-render accordingly. In React, components are just a representation of what the user interface should look like.<\/p>\n

What if we wanted to try and implement that same sort of functionality using only vanilla JavaScript? There are any number of ways to do it, but in our case, let\u2019s explore how using a design pattern could help with our implementation.<\/p>\n

So, let’s define the problem we are trying to solve: we need to be able to update multiple page elements when our application state changes.<\/p>\n

In this post, we will build out a little app that allows you to add users to a list. This app will use state; so we will use the observer pattern to notify the elements that need updated when that state changes.<\/p>\n

What is application state?<\/h3>\n

In JavaScript, state is typically just an object that holds data your application depends on.<\/p>\n

For example, maybe you have a small app that displays a list of items it retrieves from an external API. When the app loads, it makes sense to make the API call once and store the data in app state. The app could then render based on changes to its state.<\/p>\n

The Observer Pattern<\/h3>\n

According to Wikipedia<\/a>:<\/p>\n

The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.<\/p><\/blockquote>\n

The observer pattern defines a one-to-many relationship. When one object updates, it notifies many other objects that it has been updated.<\/p>\n

It\u2019s easy to get tripped up with the subject and observer terms used in the definition above. It took me a while to wrap my head around it.<\/p>\n

Here is a brief explanation for each:<\/p>\n