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

Recommended

Recommended

More Related Content

Similar to JavaScript design patterns introduction

Similar to JavaScript design patterns introduction (20)

Recently uploaded

Recently uploaded (20)

JavaScript design patterns introduction