Design Patterns in JS @VivekNayyar09 

Who am I? My name is Vivek Nayyar I work as a consultant with logiqids.com and was previously working with hotstar and housing. Follow me @viveknayyar09 

Why design patterns? Design patterns are solutions to recurring problems. Why are they important ● patterns are proven solutions. They provide solid approach to solving a particular problem. ● patterns can be easily reused. 

Be Careful ● Design patterns are not a silver bullet to all your problems. ● Do not try to force them.Keep in mind that design patterns are solutions to problems. ● If used in a correct place in a correct manner, they can prove to be a savior or else they can result in a horrible mess of a code. 

Topic Content 1) Singleton Pattern 2) Facade Pattern 3) Decorator Pattern 4) Adapter Pattern 

Singleton Pattern Real world scenario:- There can only be one president of a country at a time. The same president has to be brought to action, whenever duty calls. President here is singleton. 

Problem Statement Ensures that only one object of a particular class is ever created. 

Solution 

No content

Production Code where it’s being used? 

No content

Facade Pattern Real world scenario:- How do you turn on the computer? "Hit the power button" you say! That is what you believe because you are using a simple interface that computer provides on the outside, internally it has to do a lot of stuff to make it happen. This simple interface to the complex subsystem is a facade. 

Facade Pattern Facade Pattern is a structural pattern that can be seen in JavaScript libraries like jQuery where, although an implementation may support methods with a wide range of behaviors, only a "facade" or limited abstraction of these methods is presented to the public for use. 

Problem Statement How do I provide a convenient higher level interface to a larger body of code, hiding it’s true complexity? 

Solution When handling browser events, you have the following methods: 1) stopPropagation() - traps the event and doesn't let it bubble up to the parent nodes 2) preventDefault() - doesn't let the browser do the default action (for example, following a link or submitting a form) There are two separate methods with different purposes and they should be kept separated, but at the same time, they are often called together. So instead of duplicating the two method calls all over the application, you can create a facade method that calls both of them: 

No content

Production Code where it’s being used? 

Production Code where it’s being used? 

Let’s decorate our Javascript 

@Decorator - Decorator Pattern Real world scenario:- Consider a case of a pizza shop.As per the decorator pattern, you will implement toppings as decorators and pizzas will be decorated by those toppings' decorators. Practically each customer would want toppings of his desire and final bill-amount will be composed of the base pizzas and additionally ordered toppings. Each topping decorator would know about the pizzas that it is decorating and it's price. 

Problem Statement How to share a single piece of functionality with multiple classes with a better method of distribution. 

Solution - Decorators 

Common Use Cases Creating Read Only properties and functions 

Common Use Cases Adding custom logging functionalities to your app 

Core Decorators 1) @readonly 2) @debounce 3) @throttle 4) @memoized 5) @suppressConsoleWarnings And many more can be found at https://github.com/jayphelps/core-decorators 

Adapter Pattern The travel adapter is the most common comparison for this pattern. If you have a three-pronged electrical plug, it won’t fit in a two-prong wall outlet. Instead, you need to use a travel adapter to convert energy from the wall outlet to the plug you have. 

Problem Statement How do I make sure that I do minimal code changes when ever I replace an existing library/reusable functionality with another library/functionality? 

Solution Separate the functionality/logic into an adapter class and expose an instance of that class everywhere, so that whenever anything needs to change, it would be a single point of change. 

Shopping Cart Example 

No content

Production Code where it’s being used? 

Resources - “Learning JavaScript Design Patterns” by Addy Osmani(Link) - Javascript-design-patterns - Javascript-design-patterns-for-humans - Decorators - By Addy Osmani - javascript-patterns 

Thank You 

Everyone has questions.What are yours?