The Javascript Design Patterns You Have to Know

My talk at: JOSA TechTalks - JS Patterns & Frameworks

http://www.meetup.com/JOSA-TechTalks/events/219374144/
—
Source code:
https://github.com/rashad612/josaTT-JSPatterns

Transcript

1. The Javascript Design Patterns You Have to Know JOSA TechTalks JS Patterns & Frameworks Dec-27th-2014
2. About Me Rashad Majali Software Engineer - souq.com @rashad612: Github/Twitter
3. Agenda •Prototype-based JS. •Constructor Design Pattern. •Prototype Design Pattern. •Module Design Pattern.
4. Prototype-based JS
5. Prototype-based JS •JavaScript is OO. •JavaScript is an object-based language based on prototypes not a class-based. •There are no classes, but constructor functions and template objects to create new objects. •Everything is an object.
6. Prototype-based JS •Inheritance using the “prototype” chain. •Adding/removing properties on run time.
7. Prototype-based JS •Example: See: src/constructor.js
8. Constructor Design Pattern
9. Constructor Design Pattern •You can create a new empty object using the following methods: •Calling a constructor function by “new” keyword. •Preferably to be used with “prototypes”. •Inside the constructor “this” keyword will reference the newly created object.
10. Constructor Design Pattern •Example: src/constructor.js
11. Prototype Design Pattern
12. Prototype Design Pattern •Template objects (prototype) for every new objects created by constructors. •Prototypes is an easy way for inheritance between objects. •It comes with high performance benefits. •Prototypal Inheritance in ES5 can be done using
13. Prototype Design Pattern •Example: src/proto.js
14. Module Design Pattern
15. Module Design Pattern •Modules are set of components in an application architecture, integrating, communicating with each other keeping units of code clean and separated. •Modules in JS implemented by: The Module pattern Object literal notation AMD modules CommonJS modules ECMAScript Harmony modules
16. Module Design Pattern •In JS we use Module pattern, to have a public/private methods and attributes encapsulated in a single object. •Encapsulation is made using closures. •Closures only returns public API to the global scope. •Export an object.
17. Module Design Pattern •Examples: ◦ Module Literal: src/moduleLiteral.js ◦ Simple Module: src/moduleSimple.js ◦ Module with imports/exports: src/moduleIO.js
18. Module Design Pattern •Advantages: ◦ Cleaner than constructor pattern for encapsulation. ◦ The ability to have private methods/attributes. •Disadvantages: ◦ Changing visibility can be expensive. ◦ After closure, if we added a new public method it won’t see private members.
19. Module Design Pattern •The Revealing Module Pattern: ◦ Christian Heilmann. ◦ All functions and variables in the private scope of the closure, with naming convention. ◦ Only specific can be exported publicly using anonymous object. ◦ Example: src/moduleReveal.js
20. Module Design Patterns •The Revealing Module Pattern: ◦ Advantages: Consistent way of defining the module and visibility. ◦ Disadvantages: Modules are not stable, and might not be tested easily.
21. Code samples are available here: •https://github.com/rashad612/josaTT-JSPatterns
22. References: •Details of the object model | MDN •Introduction to Object-Oriented JavaScript | MDN •Learning JavaScript Design Patterns, Addy Osmani, Volume 1.6.0 •JavaScript Design Patterns, Carl Danley •JavaScript Module Pattern: In-Depth
23. Thank You.