JavaScript design patterns introduction

JavaScript Design
Patterns
By D Balaji

Note
• PPT prepared for educational purpose
• There may be errors, use your own discretion wherever reqd
https://www.linkedin.com/in/dhbalaji
2

Agenda
• Background & Prerequisites
• Discussion
• Applications
• Advanced
• Take home activity
3

Background
• Design patterns are reusable solutions to commonly occurring
problems.
• They provide common vocabulary to describe solutions.
• Not every solution, algorithm can qualify to be called a pattern.
• Prerequisites
• Proficiency in JavaScript concepts
• Want to write beautiful code
4

Lets discuss
• Pattern has 2 parts to it
• Process
• Output
• Rule of three.
• Fitness of purpose
• Usefulness
• Applicability
• Anti-patterns – Bad solution to a problem. For example modifying
Object Prototype methods is a anti pattern
5

Types of design patterns
• Creational design patterns
• Constructor
• Factory
• Abstract
• Prototype
• Singleton
• Builder
• Structural design patterns
• Decorator
• Façade
• Adaptor
• Proxy
• Flyweight
6

Types of patterns contd.
• Behavioural design pattern
• Iterator
• Mediator
• Observer
• Visitor
7

JS – Creational patterns
• It deals with how we create new objects
• var a = {}
• Other alternatives
• Object.assign
• Object.create
• Object.defineProperties
8

JS – Constructor pattern
• Constructors are used to create a specific type of objects
• When you call a Constructor to create a method in JS, the
properties of constructor prototype are copied to new Object
function Car(name) {
this.name = name;
}
var newCar = new Car(‘tata’);
9

Singleton pattern
• Create a object if no instance found, else reference the existing
instance
• Only one instance per app
• Example: namespaces
10

Module pattern
• Helps the code in keeping it organized
• Examples:
• Object literals – tie together properties and values
• Can provide public and private variables
• IIFE is also a module pattern
11

Revealing module pattern
• In module pattern all the properties and methods were exposed
• In Revealing module, the developer chooses to make few
properties and methods available
12

Observer pattern
• Also known as publish/subscribe pattern
• Watch for other object to change and perform an action
• We establish listen and broadcast relationship
• Client -> subscribes and unsubscribe for watching changes
• Producer notifies the client
• Promotes loose coupling
• One of the best tools out there.
13

Mediator pattern
• Mediator in real life assists in negotiation and conflict resolution
• Mediator pattern provides a uniform interface to communicate
• In pub/sub the object passed around did not have clear agreement
or contract. In mediator problem, this problem is solved
14

Prototype pattern
• Creation of a new object based on a template of an existing
object through cloning
• Used in prototypal inheritance
15

Command pattern
• Encapsulate method invocation, requests into a single object
• Separate the code to execute a method with or without a
parameter
• Classes often have methods like run, execute
16

Facade pattern
• Façade gives a different version of reality, relates to a pleasing
exterior of a building in construction domain.
• We provide a high level interface for large code
• Provides ease of use and smaller code to use
17

Factory pattern
• Helps in creating objects
• Developer need not be worried about the class
• Used when the steps to create a new object is complex
• Abstract factory
• Uses a combination of factories to create new objects
18

Mixin pattern
• Classes which provide functionality to be inherited by other class
• JS does not support multiple inheritance
19

Decorator pattern
• Introduces new functionality to the code without modifying the
code underneath
• Variants
• Pseudo classical decorator
• Uses interfaces
• Interface is a way of telling the must have properties and methods
in a class
20

Flyweight
• Useful solution for slow, non performant code
• It’s an approach where common non performant code is taken and
kept in a shared location or single object
• Example: Google maps integration
21

MV* pattern
• Improves application organization through separation of concerns
• Easy maintanence
• Domain element or date  Model
• View and Presentation  View
• Handling user interaction and event  Controller
• MVVM  Data binding between view and the model
22

Name spacing patterns
• Namespacing is a technique to avoid collision with objects in the
global namespace
• Useful in organizing blocks of functionality
• JavaScript has no built in support for namespaces
• We use closures and objects to achieve namespaces
23

Types of namespaces
• Single global variables
• Prefix namespacing
• Nested namespacing
• IIFE
• Namespace injection
24

Lazy initialization
• Allows us to delay expensive process like creating objects etc until
they are needed
• Lazy loading is used when we want to load additional page
resources when needed
25

Adapter pattern
• Translates the interface of a class into an interface compatible
with the current system.
26

Façade pattern
• Provides a simpler interface to larger body of code.
27

Iterator pattern
• Allows us to access the elements of the object without needing to
expose its form.
• We can also iterate a string in JavaScript and read its value
28

Strategy pattern
• The algorithm to be deployed is decided at runtime.
• The algorithms used are subjective to the client or datatype or
changed environment.
29

Proxy pattern
• A class which serves as a interface for something else.
• You call one method in a class which in turns calls something else
30

Builder pattern
• Similar to chaining methods
• The output of a step is used as input to an another and the details
are abstracted to the user.
31

Other terms
• Loose coupling – easy maintainability by removing dependencies
wherever possible
• AMD – asynchronous modules which are loaded whenever required
with help of script loaded like requires
• Plugin is a software program that adds a missing functionality in a
program
32

Exercise
• Identify pros & cons of every pattern
• Take any library, identify the patterns used. For this you have to
look at source code. Go with jquery
• Prototypal vs Class based inheritance
33

JavaScript design patterns introduction

More Related Content

Similar to JavaScript design patterns introduction

Recently uploaded

JavaScript design patterns introduction