Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Patterns in JS

Design Patterns in JS

4 design patterns covered in this talk:-
1) Singleton Pattern
2) Facade Pattern
3) Decorator Pattern
4) Adapter Pattern

Vivek Nayyar

February 18, 2018

More Decks by Vivek Nayyar

Other Decks in Programming


  1. 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
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. Problem Statement How do I provide a convenient higher level

    interface to a larger body of code, hiding it’s true complexity?
  8. 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:
  9. @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.
  10. Problem Statement How to share a single piece of functionality

    with multiple classes with a better method of distribution.
  11. 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
  12. 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.
  13. 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?
  14. 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.
  15. Resources - “Learning JavaScript Design Patterns” by Addy Osmani(Link) -

    Javascript-design-patterns - Javascript-design-patterns-for-humans - Decorators - By Addy Osmani - javascript-patterns