Maximiliano Firtman
Independent Consultant
JavaScript Design Patterns for Web Apps
4 hours, 24 minutes CC
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
CloseCourse 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
Table of Contents
Introduction
Section Duration: 5 minutes
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
Max explains design patterns are reusable templates for solving common software design problems, enhancing code readability and efficiency, and creating a common vocabulary.
Max breaks down the elements of a design pattern and when to apply a specific pattern to an application. Design Patterns should be used when they solve a problem in the application. Using a pattern because it's trendy may lead to over-engineering, performance overhead, or unnecessary complexity.
Max reiterates that a VanillaJS Web Application is built with the core language features of JavaScript and no additional libraries or frameworks. Some categories of design patterns that apply to VanillaJS apps are typically single-page, multi-page, state management, and patterns specific to web applications.
Classic Patterns
Section Duration: 31 minutes
Max introduces the classic design patterns, which were created as solutions to object-oriented problems. These patterns are typically creational, structural, or behavioral.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
Max discusses design patterns for single-page applications. These patterns include lazy loading, view transitions, template interpolation, and using routing metadata.
Max demonstrates the Coffee Masters project. It is built with web components and uses client-side routing to navigate between pages. Watch the Vanilla JS: You Might Not Need a Framework course on Frontend Masters to learn how this application was built.
Max implements a lazy loading design pattern, which solves performance and memory usage issues related to loading too many JavaScript files when the app loads. Replacing the static imports with dynamic imports allows the scripts to be downloaded when needed.
Max introduces View Transitions, which animate page changes and morph elements between pages. A default crossfade animation is used when View Transitions are enabled. The animation can be customized using CSS.
Max modifies the View Transition CSS code to morph the product image from the home page to the larger image on the details page. A naming convention is applied so each image has a different view-transition-name. This lesson also includes examples for styling show-dom elements.
Max creates an interpolate function to apply dynamic data to an HTML Template. This makes the template more declarative and eliminates the need to use DOM element selectors to add the dynamic data.
Max demonstrates the APIs for changing the browser title bar and the theme color of the page. The theme color is applied to the browser navigation bar and applies more for PWA use cases.
Multi-Page Application Patterns
Section Duration: 17 minutes
Max discusses design patterns for multi-page applications. These patterns include View Transitions or template interpolation from single-page apps and prefetching/prerendering techniques.
Max demonstrates the Cooking Master project and adds Page View Transitions across documents. Default transitions can be specified in a shared CSS file. Morphing elements can be orchestrated by assigning the same view-transition-name on each page.
Max demonstrates Speculation Rules that allow developers to insert JSON instructions onto web pages to inform the browser about which URLs to prerender.
State Management Patterns & Advanced Ideas
Section Duration: 27 minutes
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.
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.
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
Max wraps up the course with a recap of the design patterns discussed and recommendations for applying patterns in your applications.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops