Design Patterns in JS

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

Transcript

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
10. Production Code where it’s being used?
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:
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
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?