$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Vivek Nayyar

Other Decks in Programming

Transcript

  1. Design Patterns in JS
    @VivekNayyar09

    View Slide

  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

    View Slide

  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.

    View Slide

  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.

    View Slide

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

    View Slide

  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.

    View Slide

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

    View Slide

  8. Solution

    View Slide

  9. View Slide

  10. Production Code where it’s being used?

    View Slide

  11. View Slide

  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.

    View Slide

  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.

    View Slide

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

    View Slide

  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:

    View Slide

  16. View Slide

  17. Production Code where it’s being used?

    View Slide

  18. Production Code where it’s being used?

    View Slide

  19. Let’s decorate our Javascript

    View Slide

  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.

    View Slide

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

    View Slide

  22. Solution - Decorators

    View Slide

  23. Common Use Cases
    Creating Read Only
    properties and
    functions

    View Slide

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

    View Slide

  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

    View Slide

  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.

    View Slide

  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?

    View Slide

  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.

    View Slide

  29. Shopping Cart Example

    View Slide

  30. View Slide

  31. Production Code where it’s being used?

    View Slide

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

    View Slide

  33. Thank You

    View Slide

  34. Everyone has questions.What are yours?

    View Slide