JavaScript Design Patterns for Web Apps

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
4 hours, 24 minutes CC
JavaScript Design Patterns for Web Apps

Course Description

Architect scalable web apps by applying design patterns in JavaScript! Implement classic patterns like Singleton, Factory, and Observer alongside modern patterns for single-page and multi-page architectures. Enhance your ability to build robust, efficient web applications using pure JavaScript without relying on external libraries or frameworks.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: August 13, 2024

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 5 minutes
  • Introduction
    Maximiliano Firtman begins the course by outlining the prerequisites and discussing the topics covered. This course will look at common design patterns in software engineering and how they can be applied to JavaScript applications. Application-specific patterns like single and multi-page architectures will also be covered.

Understanding Design Patterns

Section Duration: 19 minutes

Classic Patterns

Section Duration: 31 minutes
  • Classic Patterns
    Max introduces the classic design patterns, which were created as solutions to object-oriented problems. These patterns are typically creational, structural, or behavioral.
  • Singleton & Factory Patterns
    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.
  • Decorator Pattern
    Max discusses the Decorator pattern, which adds additional functionality to objects dynamically without modifying their structure. This is typically done by wrapping an object with another that adds the desired behavior.
  • Adapter, Mixin, & Value Object Patterns
    Max describes the Adapter, Mixin, and Value Object patterns. The Adapter pattern brings incompatible interfaces together with a translation layer. Mixins allow you to share functionality between two classes without an interface or inheritance. The Value Object pattern represents any value that is immutable and distinct from other objects based on a property rather than an identity.
  • Observer & Template Method Patterns
    Max shares behavioral design patterns, including the Observer and Template Method patterns. The Observer pattern allows one object to notify others about state changes without requiring them to be tightly coupled. An example of this is the addEventListener method. The Template Method pattern outlines an algorithm that will change depending on the implementation.
  • Memento & Command Patterns
    Max wraps up the classic patterns by describing the Memento and Command patterns. The Memento pattern captures and externalizes an object's internal state so it can be restored at a later time without violating encapsulation. The Command pattern avoids hard-wiring actions within an invoker and instead uses an object which encapsulates all the information to perform the action.

Refactoring Using Classic Patterns

Section Duration: 1 hour, 39 minutes
  • Todo Masters Project Setup
    Max walks through the course repo and the setup for the first project: Refactoring a Todo application. The project directory in the repo contains an initial directory with the starting code and a final directory with an example solution. The initial project directory should be opened in your editor. The `npx serve` command will run a local webserver.
  • ECMAScript Modules & globalThis
    Max uses the type attribute in the HTML script tag to treat app.js as an ECMAScript module. The gobalThis property is introduced and, in the context of a browser, will give each module access to the window object. DOM elements are selected, and some initial event handlers are created.
  • Observer Pattern with Mixins
    Max creates a Mixin that will apply the Observer pattern to an object. The Observer pattern stores the observers in a Set. Methods for adding, removing, and notifying observers are implemented.
  • Creating the Data Classes
    Max creates TodoItem and TodoList classes. The TodoList class implements the Singleton pattern, so only one instance of the list can be instantiated in the application. The observer Mixin is imported and applied to the TodoList class.
  • Adding TodoList Methods
    Max implements the add, remove, find, and replace methods in the TodoList class. Since the data is stored in a Set, the Array.from() method converts the Set to an array so it can be iterated. After the data is modified, the notify() method is called.
  • Add & Delete Commands
    Max uses the Command pattern to create ADD and DELETE commands to handle adding and removing items. The advantage of separating this logic from the main application is its reusability. TodoList items can be added from the UI or any other event, and there is now a single class through which these commands are funneled.
  • Rendering TodoList Items
    Max creates a method, renderList, to display TodoList items on the screen. The Observer pattern implemented in the TodoList class will use the notify method to call renderList and update the DOM whenever the data changes. This lesson also implements removing TodoList items.
  • Saving Todos in LocalStorage
    Max implements persistence by saving TodoList items with the localStorage API. An observer is added, so the data is saved any time an item is added or removed.
  • Adding Keyboard Shortcuts
    Max highlights the advantages of the design patterns added to the application by implementing a keyboard shortcut feature. Once the keyboard event handler is created, the ADD command can be used to add the TodoList item.
  • Undo with Memento Pattern
    Max uses the Memento design pattern to add an "undo" feature. An array to manage the history of the application is added. Items are pushed and popped from the array as the data changes.

Single Page Application Patterns

Section Duration: 1 hour, 1 minute

Multi-Page Application Patterns

Section Duration: 17 minutes

State Management Patterns & Advanced Ideas

Section Duration: 27 minutes
  • Promisify, Flux, & Redux Patterns
    Max begins reviewing some patterns for state management in large applications. These include Promisify, Flux, and Redux. Promisify can simplify data delivery by resolving all data (both static and dynamic) with Promises. Libraries like Flux or Redux create a unidirectional data flow, which can streamline architecture in large-scale applications.
  • Lazy Sync, Proxy, & Middleware Patterns
    Max explains how lazy sync techniques allow data to be detached from the UI and asynchronously sent to the server. The Proxy pattern solves reference issues with non-reactive languages like JavaScript. Proxies allow you to detect value changes without direct access to an object.
  • Advanced Ideas
    Max discusses some advanced ideas involving architectural or other patterns used in web applications. Progressive Web Applications and Responsive Design are techniques that use classic patterns. Progressive enhancement is also discussed in this lesson.

Wrapping Up

Section Duration: 2 minutes

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