COURSE

Design Patterns in JavaScript

Learn to leverage patterns to improve your JavaScript code.

  • 3 Days
  • Intermediate
  • In-person / Online
  • £ On Request

Overview

This course is designed for developers who want to extend their architectural skills using design patterns and related techniques. It is heavily interactive, with delegates spending a lot of their time implementing patterns.

Each pattern is introduced in terms of its structure (via UML diagrams), its benefits and drawbacks, sample implementations and practical examples of how it can be used to simplify software development.

The course is tailored to modern JavaScript (ES2015 and beyond) and demonstrates how idioms of the language as well as functional programming can provide interesting variants (or replacements) to classic OO patterns. This course can start with an optional primer on the newest ES features to bring delegates up to speed in modern best practices.

Outline

Introduction to Patterns

  • Why code quality matters in JavaScript
  • What is a design pattern?
  • The evolution of design patterns
  • Misconceptions about design patterns
  • The dangers of becoming 'pattern happy'
  • Distinguishing between patterns, idioms and refactoring
  • Using refactoring to introduce patterns incrementally
  • Using patterns to create an object-oriented architecture
  • General software development principles
  • Avoiding duplication and writing simple code
  • The SOLID Principles
  • Law of Demeter
  • Composition over Inheritance

ECMAScript Refresher (Optional)

  • Writing modern JavaScript and retaining compatibility
  • How ECMAScript 2015 was a huge step forward, and the changes after
  • Modules and the import / export syntax
  • String interpolation / template literals
  • Block scope via 'let'
  • Iterators, generators and the 'for...of' statement
  • New class syntax
  • Using the spread operator with functions, structures and object literals
  • New data structures - Maps and typed arrays
  • Intercepting object interaction with the Proxy type
  • Simplified anonymous functions with arrow functions
  • Writing asynchronous code with Promises, and Async await
  • The TC39 process and using non-standard features
  • BigInt and associated operators
  • Array Prototype features, sorting and other modifiers

Creational Patterns

  • Advantages of separating clients from object creation
  • Decoupling and Dependency Injection
  • Factories - Simple and Abstract Factory, Factory Method
  • The Builder pattern and creating fluent DSLs
  • The Singleton pattern and why you won't need it
  • The Prototype pattern vs JavaScript Prototypes

Structural Patterns

  • The Adapter and Bridge patterns
  • Layering functionality with the Decorator pattern
  • The Decorator pattern vs JavaScript Decorators
  • Distinguishing the Proxy and Decorator patterns
  • The Proxy pattern vs JavaScript Proxy objects
  • The Composite pattern for whole-part relationships
  • The Flyweight pattern to save resources
  • Using JavaScript prototypes to save resources
  • Simplifying subsystems with the Facade pattern

Structural Patterns

  • The Adapter and Bridge patterns
  • Layering functionality with the Decorator pattern
  • The Decorator pattern vs JavaScript Decorators
  • Distinguishing the Proxy and Decorator patterns
  • The Proxy pattern vs JavaScript Proxy objects
  • The Composite pattern for whole-part relationships
  • The Flyweight pattern to save resources
  • Using JavaScript prototypes to save resources
  • Simplifying subsystems with the Facade pattern

Behavioural Patterns

  • The Iterator pattern and JavaScript iterators
  • Writing JavaScript generator functions
  • Chain of Responsibility and Command patterns
  • Retain and restore state with the Memento pattern
  • Understanding event systems and the Observer pattern
  • Decoupling algorithms with the Strategy pattern
  • Decoupling steps with the Template Method pattern
  • The State, Visitor and Interpreter patterns

Functional Programming

  • Using generated functions as closures
  • Why closures store references to outer variables
  • Subtle bugs caused by incorrect use of closures
  • Using nested functions as an encapsulation technique
  • Immediately Invoked Function Expression (aka IIFE)
  • How IIFEs are used in the JavaScript Module Pattern
  • Using functions as the unit of composition
  • Replacing external iteration with forEach, filter and map
  • Producing a single value from a list via folds and reduction
  • Applying currying and partial application

Requirements

Delegates should be experienced JavaScript developers.

COURSE

Design Patterns in JavaScript

Learn to leverage patterns to improve your JavaScript code.

  • 3 Days
  • Intermediate
  • In-person / Online
  • £ On Request

ShapeCreated with Sketch.
ShapeCreated with Sketch.
image/svg+xml
image/svg+xml