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. Design Patterns in JS @VivekNayyar09

  2. 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
  3. 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.
  4. 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.
  5. Topic Content 1) Singleton Pattern 2) Facade Pattern 3) Decorator

    Pattern 4) Adapter Pattern
  6. 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.
  7. Problem Statement Ensures that only one object of a particular

    class is ever created.
  8. Solution

  9. None
  10. Production Code where it’s being used?

  11. None
  12. 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.
  13. 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.
  14. Problem Statement How do I provide a convenient higher level

    interface to a larger body of code, hiding it’s true complexity?
  15. 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:
  16. None
  17. Production Code where it’s being used?

  18. Production Code where it’s being used?

  19. Let’s decorate our Javascript

  20. @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.
  21. Problem Statement How to share a single piece of functionality

    with multiple classes with a better method of distribution.
  22. Solution - Decorators

  23. Common Use Cases Creating Read Only properties and functions

  24. Common Use Cases Adding custom logging functionalities to your app

  25. 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
  26. 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.
  27. 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?
  28. 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.
  29. Shopping Cart Example

  30. None
  31. Production Code where it’s being used?

  32. Resources - “Learning JavaScript Design Patterns” by Addy Osmani(Link) -

    Javascript-design-patterns - Javascript-design-patterns-for-humans - Decorators - By Addy Osmani - javascript-patterns
  33. Thank You

  34. Everyone has questions.What are yours?