javascripters event sep 17, 2016 · 2:00 pm: scalable javascript design patterns
TRANSCRIPT
![Page 1: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/1.jpg)
JS
Java
Scri
pter
swww.javascripters.org
JavaScriptersCommunity to Connect, Share & Explore
http://www.javascripters.org
Email: [email protected]
![Page 2: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/2.jpg)
JS
Java
Scri
pter
swww.javascripters.orgwww.javascripters.org
About JavaScriptersJavaScripters is an initiative taken for front-end engineers community to share and gain JavaScript basic and advance knowledge along with moto to connect all javascripters together.
We conduct technical discussion forums, sessions, workshops, trainings and knowledge sharing meet-ups around the city, for all front-end / UI engineers on core & advance(object oriented) level javascript concepts, along with all latest javascript frameworks like AngularJS, NodeJs, emberJs, TypeScript, ReactJs technologies by experts.
• Since : April 2015
• Members : Around 2500+
• Speakers & Mentors : 17
• Events/ Meetup Conducted: 5
• Feature Planned Events : 10 events confirmed till December 2016
Our initiatives:
WhatsApp Group (2)Meetup Groups JavaScriptes PuneJs HTML5-Web-Mobile-Development-Meetup Pune-UX-UI-Engineers WebF
![Page 3: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/3.jpg)
JS
Java
Scri
pter
swww.javascripters.orgwww.javascripters.org
List of upcoming events
1.JS Performance tips and tricks
2.BootStrap , CSS and Responsive Design
3.JavaScript Design Patterns
4.Introduction of Design thinking for front-end Engineers
5.React JS with Material design
6.Introduction to Angular 2.x
7.Practice with TypeSpcript
8.Introduction to ES6
9.Automated javascript workflow with Gulp
10.NodeJs practice session
11. Total (3) online webinar under planning
![Page 4: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/4.jpg)
JS
Java
Scri
pter
swww.javascripters.orgwww.javascripters.org
Our Sponsor
![Page 5: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/5.jpg)
JS
Java
Scri
pter
swww.javascripters.orgwww.javascripters.org
• Laxman M• Tushar Jadhav
About Speaker
![Page 6: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/6.jpg)
JS
Java
Scri
pter
swww.javascripters.org
WHY ARE WE HERE ?
![Page 7: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/7.jpg)
JS
Java
Scri
pter
swww.javascripters.org
What is Pattern?
A pattern is a reusable solution that can be applied to commonly occurring problems.
Another way of looking at pattern is as templates for how we solve problems.
![Page 8: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/8.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Anti-Patterns
Anti-patterns represents a lesson that has been learned.
• Describes a bad solution to a particular problem that resulted in bad situation occurring
• Describe how to get out of said situation and how to go from there to a good solution
![Page 9: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/9.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Benefits
• Patterns are proven solutions• Patterns can be easily reused• Patterns can be expressive
![Page 10: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/10.jpg)
JS
Java
Scri
pter
swww.javascripters.org
What is “good” pattern?
A pattern is considered good if it• solves a particular problem• does not have an obvious solution• describes a proven concept• describes a relationship
![Page 11: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/11.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Categories of Design Patterns
• Creational Design Patternsfocus on object-creation mechanism
• Structural Design Patternsconcerned with object composition and relationship between objects
• Behavioural Design Patternsfocus on improving or streamlining the communication between disparate
objects
![Page 12: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/12.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Overview
• Constructor Pattern• Module Pattern• Singleton Pattern• Observer Pattern• Prototype Pattern• Facade Pattern• Factory Pattern• Decorator Pattern
![Page 13: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/13.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Constructor Pattern
A constructor is a special method used to initialise a newly created object once memory has been allocated for it.
![Page 14: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/14.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Module Pattern
Modules are an integral piece of any robust application’s architecture and typically help in keeping the units of code for a project both cleanly separated and organised.
Modules can be implemented using• Object literal notation• The Module pattern• AMD modules• CommonJS modules• ECMAScript Harmony modules
![Page 15: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/15.jpg)
JS
Java
Scri
pter
swww.javascripters.org
The Module pattern
A way to provide both private and public encapsulation for classes.
![Page 16: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/16.jpg)
JS
Java
Scri
pter
swww.javascripters.org
The Module pattern
Advantages:• Encapsulation• Privacy
Disadvantages:• Cannot access private members in the methods that are added to the object
at later point• Inability to create automated unit tests for private members
![Page 17: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/17.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Revealing Module Pattern
In Module pattern,1. repeat the name of module each time when accessing public
method/variable from other public method2. switch to object literal notation to make things public
The updated module pattern in which all the functions and variables are defined in private scope and return an anonymous object with pointers to the private members to reveal them publicly.
![Page 18: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/18.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Revealing Module Pattern
Advantages:• Readability
Disadvantages:• If a private function refers to public function, that public function can’t be
overridden• Public object members that refer to private variables are also subject to no-
patch rule
![Page 19: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/19.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Singleton Pattern
The singleton pattern restricts instantiation of a class to a single object.
Classically, the Singleton pattern can be implemented by creating a class with a method that creates a new instance of the class if one doesn’t exist.
In JavaScript, Singletons serve as a shared resource namespace which isolate implementation code from the global namespace so as to provide a single point of access for functions.
![Page 20: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/20.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Observer Pattern
In Observer pattern, an object(subject) maintains a list of objects depending on it(observers) automatically notifying them of any changes to state.
![Page 21: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/21.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Difference between Observer and Pub/Sub Pattern
![Page 22: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/22.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Observer and Pub/Sub Pattern
Advantages:• Loosely Coupled• Flexibility
Disadvantages:• In Pub/Sub, by decoupling publishers from subscribers, it can sometimes
become difficult to obtain guarantees that particular parts of the application are functioning as we may expect
![Page 23: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/23.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Prototype Pattern
Creates objects based on a template of an existing object through cloning.
![Page 24: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/24.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Facade Pattern
This pattern provides a convenient higher-level interface to a larger body of code, hiding its true underlying complexity.
![Page 25: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/25.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Facade Pattern
Advantages:• Simplicity• Abstraction
Disadvantages:• Performance
![Page 26: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/26.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Factory Pattern
A factory provides a generic interface for creating objects, where we can specify the type of factory object we wish to create.
![Page 27: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/27.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Decorator Pattern
Decorators are structural design pattern that aims to promote code reuse. They can be used to modify existing systems where we wish to add additional features to objects without the need to heavily modify the underlying code.
![Page 28: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/28.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Decorator Pattern
Advantages:• Flexible
Disadvantages:• If poorly managed, it can add complexity
![Page 29: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/29.jpg)
JS
Java
Scri
pter
swww.javascripters.org
Can we check what we have learned ?
![Page 30: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/30.jpg)
JS
Java
Scri
pter
swww.javascripters.orgwww.javascripters.org
![Page 31: JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns](https://reader035.vdocument.in/reader035/viewer/2022070600/58a268c81a28abb92b8b6d67/html5/thumbnails/31.jpg)
JS
Java
Scri
pter
swww.javascripters.orgwww.javascripters.org
Register for upcoming events
3.BootStrap , CSS and Responsive Design
4.Introduction of Design thinking for front-end Engineers
5.React JS with Material design
6.Introduction to Angular 2.x
7.Practice with TypeScript
8.Introduction to ES6
9.Automated javascript workflow with Gulp
10.NodeJs practice session
11. Total (3) online webinar under planning