JavaScript Design Patterns for Web Apps

Singleton & Factory Patterns

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
JavaScript Design Patterns for Web Apps

Check out a free preview of the full JavaScript Design Patterns for Web Apps course

The "Singleton & Factory Patterns" Lesson is part of the full, JavaScript Design Patterns for Web Apps course featured in this preview video. Here's what you'd learn in this lesson:

Max defines the Singleton and Factory design patterns. The Singleton pattern ensures a class has only one instance and provides a global access point. The Factory pattern implements a more complex object creation process that may involve multiple steps, conditional logic, or dependencies.

Preview
Close

Transcript from the "Singleton & Factory Patterns" Lesson

[00:00:00]
>> Maximiliano Firtman: I would give you five or six design patterns initially and then we will jump into the lab. Okay, so we will go and try to implement those ideas in our code. So, we will start talking about the creational design patterns. So in this case they aim to solve the problems associated with creating objects.

[00:00:21]
So instead of using new, I mean new user, instead of creating objects in that way, we are trying to solve the problem to reuse existing code. And we wanna separate the logic of the object from the rest of the code. Most of the design patterns, not all of them, but most of them, at least the classic design patterns are trying to decouple code all the time, decouple elements.

[00:00:46]
So reusability has to do with decouple the problems and in separate layers that then can communicate. So the first one and some design pattern that probably you have seen in the past is singleton, okay? So what's a singleton? The problem is to ensure that the class has only one instance and provide the global point to access it.

[00:01:12]
So the solution is to restrict instantiation of the class to one object and provide the global point to access it and provide a method to access this instance. Most of the code that you will find there is based in Java, where, for example, I'm not sure how many of you are Java developers, but in Java you can create a private constructor.

[00:01:34]
Not sure if you know that. And with that thing, then you cannot create a new instance. From new, using new, but that's not possible in JavaScript. We don't have a private constructor idea, so we need to use our imagination to actually solve the problem. But it's actually pretty simple.

[00:01:52]
Use cases for this, managing a global configuration object. So we have a web app, we have configuration as a current language. Current theme, if the user is logged in or not. Well, that information should be a singleton, should be only one instance. Database connection pooling, when you're using IndexedDB or something like that, a login service.

[00:02:17]
So I don't wanna have different clones, I just wanna have one Instance of that. For those use cases, you can use a singleton. So a state management as well. The state management has to do with the state of a web app is every data, every information that defines how the web app is rendered right now on the screen.

[00:02:40]
So for that, you can use a singleton. So the simplest singleton that you can create in JavaScript is just creating an object, a literal object. So sometimes we forget about this, that we're in JavaScript, we can create objects. I don't need to always create a class. So when you go and read the singleton.

[00:03:00]
Description they will say you create the class, so you start thinking how I'm going to create the class then, I can well we will do one example of that later but you can just go, and create a global object and that's all. I mean there is only one instance of that, so you cannot create a new one, yeah you make clone it.

[00:03:22]
But that's all, so that's a simple singleton applied in JavaScript. Remember, so use the power of JavaScript in your favor. Okay, a factory. The problem that a factory is solving is that the object creation can become complex sometimes. So, that's why you need to check if you have a problem and may involve multiple steps, conditional logic or dependencies.

[00:03:46]
For example, your Google Drive, so you have the creation of the document, the new menu. And you can create a new document, a new page-based document, a new spreadsheet. You can create a new slide, like a new presentation. Now you can create a new code lab for some Python code and lot of things.

[00:04:11]
So think about the code that you have to, on the unclick of that menu you have a switch saying, okay, the conditional saying, okay. The user has selected that, so I need to create a new spreadsheet document. So well, instead of doing that, we can apply a factory that actually will encapsulate the object creation process in a separate method or class, isolating it from the rest of the application logic.

[00:04:40]
So you will have some document factory object, and you will say, you know what factory the user has just click here, I need the document object for that selection, and that class will be responsible of that. By the way, design patterns are not magic. There will be a conditional somewhere probably.

[00:05:02]
What we are doing is decoupling the problem or the code in separate processes or components of our app, okay? Make sense? Use cases, UI element creation, you need to create a button. There are different kind of buttons based on where you are. While you ask a factory, hey, give me a button, instead of you creating the button with a new keyword, right, you talk to that.

[00:05:29]
Different types of notifications, if you have a notification system. Some use cases, there are more. The data parsers, you need to parse the data. The user is uploading a file and you need to parse that file. It can be JSON, CSV, an Excel spreadsheet, JSON file, the SQL file, well, based on the file type, you ask, a factory, hey, give me a converter, a parser for that.

[00:05:55]
And this is just, I mean, from a code point of view, there is no magic. It can be just the class. In this case, it can be the class reader. The class reader has a static method, getReader, and based on a url, or the MIME type of the URL, or based on the metadata, it will just return one of the readers, PDFReaders, CSVReader, SQLReader.

[00:06:23]
So then you don't, from your app, you don't directly create the SQLReader. You should ask the factory, getReader, to, hey, give me the reader I need to use. And then you use it. Okay, make sense? I know that if this is the first time you are seeing design patterns.

[00:06:42]
You see at this code and say, that's not any magic. There is no magic. A design pattern is just a recipe. And probably you have used something like that in the past, and maybe you didn't know that the solution has a name factory.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now