Design Patterns in JavaScript Training

Delegates should be experienced JavaScript developers.

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 2015 Refresher (Optional)

• Writing modern JavaScript and retaining compatibility
• How ECMAScript 2015 was a huge step forward
• 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 and structures
• 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
• The TC39 process and using non-standard features

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 in JavaScript

• 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 IIFE’s 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 in JavaScript