|
1 |
| -Unleash the power of design patterns in JavaScript! |
| 1 | +# PatternifyJS: JavaScript Design Patterns |
2 | 2 |
|
| 3 | +## About |
| 4 | + |
| 5 | +PatternifyJS is a reference of the main design patterns in the JavaScript world. External libraries are not covered, only the core languages are. Here is the list of all available languages: |
| 6 | + |
| 7 | +* ECMAScript (Vanilla) |
| 8 | + * ES5 |
| 9 | + * ES6 |
| 10 | +* CoffeeScript |
| 11 | +* TypeScript |
| 12 | + |
| 13 | +The Gang of Four (GoF) patterns are based on original synopses inspired from the real life and are available in two distinct flavors: "[classic](GoF/classic)" & "[idiomatic](GoF/idiomatic)". |
| 14 | + |
| 15 | +The classic style emulates the principles of traditional class-based object-oriented languages like Java. Therefore, this style makes heavy use of abstraction, interfaces, classes, inheritance, composition, encapsulation and polymorphism. As a prototype-based language, JavaScript does not have all these functionalities natively (despite all the syntactic sugar introduced by ES6). But it is still possible to use and reproduce each of these concepts... For obvious reasons, constructor functions are the rule in the classic style. Moreover, each design pattern has its own class diagram in UML. |
| 16 | + |
| 17 | +The idiomatic style reveals the true nature of JavaScript. Constructor functions and classes are replaced by factory functions and object literals, there is no abstraction anymore, encapsulation is reduced to the minimum and flexibility raised to the maximum. With this style, the GoF patterns are a bit difficult to recognize because their overall structure is blurred. But here it is more reasonable to think about objects directly, not about classes (see object diagrams in UML). |
| 18 | + |
| 19 | +Apart from the GoF patterns, there are also miscellaneous (functional and more) patterns in JavaScript that make life easier. They can be of a great help! |
| 20 | + |
| 21 | +## Gang of Four (GoF) patterns |
| 22 | + |
| 23 | +* Creational |
| 24 | + * AbstractFactory ([classic](GoF/classic/Creational/AbstractFactory) | [idiomatic](GoF/idiomatic/Creational/AbstractFactory)) |
| 25 | + * Builder ([classic](GoF/classic/Creational/Builder) | [idiomatic](GoF/idiomatic/Creational/Builder)) |
| 26 | + * Factory ([classic](GoF/classic/Creational/Factory) | [idiomatic](GoF/idiomatic/Creational/Factory)) |
| 27 | + * Prototype ([classic](GoF/classic/Creational/Prototype) | [idiomatic](GoF/idiomatic/Creational/Prototype)) |
| 28 | + * Singleton ([classic](GoF/classic/Creational/Singleton) | [idiomatic](GoF/idiomatic/Creational/Singleton)) |
| 29 | + |
| 30 | +* Structural |
| 31 | + * Adapter ([classic](GoF/classic/Structural/Adapter) | [idiomatic](GoF/idiomatic/Structural/Adapter)) |
| 32 | + * Bridge ([classic](GoF/classic/Structural/Bridge) | [idiomatic](GoF/idiomatic/Structural/Bridge)) |
| 33 | + * Composite ([classic](GoF/classic/Structural/Composite) | [idiomatic](GoF/idiomatic/Structural/Composite)) |
| 34 | + * Decorator ([classic](GoF/classic/Structural/Decorator) | [idiomatic](GoF/idiomatic/Structural/Decorator)) |
| 35 | + * Facade ([classic](GoF/classic/Structural/Facade) | [idiomatic](GoF/idiomatic/Structural/Facade)) |
| 36 | + * Flyweight ([classic](GoF/classic/Structural/Flyweight) | [idiomatic](GoF/idiomatic/Structural/Flyweight)) |
| 37 | + * Proxy ([classic](GoF/classic/Structural/Proxy) | [idiomatic](GoF/idiomatic/Structural/Proxy)) |
| 38 | + |
| 39 | +* Behavioral |
| 40 | + * Chain of Responsibility ([classic](GoF/classic/Behavioral/ChainOfResponsibility) | [idiomatic](GoF/idiomatic/Behavioral/ChainOfResponsibility)) |
| 41 | + * Command ([classic](GoF/classic/Behavioral/Command) | [idiomatic](GoF/idiomatic/Behavioral/Command)) |
| 42 | + * Interpreter ([classic](GoF/classic/Behavioral/Interpreter) | [idiomatic](GoF/idiomatic/Behavioral/Interpreter)) |
| 43 | + * Iterator ([classic](GoF/classic/Behavioral/Iterator) | [idiomatic](GoF/idiomatic/Behavioral/Iterator)) |
| 44 | + * Mediator ([classic](GoF/classic/Behavioral/Mediator) | [idiomatic](GoF/idiomatic/Behavioral/Mediator)) |
| 45 | + * Memento ([classic](GoF/classic/Behavioral/Memento) | [idiomatic](GoF/idiomatic/Behavioral/Memento)) |
| 46 | + * Observer ([classic](GoF/classic/Behavioral/Observer) | [idiomatic](GoF/idiomatic/Behavioral/Observer)) |
| 47 | + * State ([classic](GoF/classic/Behavioral/State) | [idiomatic](GoF/idiomatic/Behavioral/State)) |
| 48 | + * Strategy ([classic](GoF/classic/Behavioral/Strategy) | [idiomatic](GoF/idiomatic/Behavioral/Strategy)) |
| 49 | + * Template ([classic](GoF/classic/Behavioral/Template) | [idiomatic](GoF/idiomatic/Behavioral/Template)) |
| 50 | + * Visitor ([classic](GoF/classic/Behavioral/Visitor) | [idiomatic](GoF/idiomatic/Behavioral/Visitor)) |
| 51 | + |
| 52 | +## Miscellaneous patterns |
| 53 | + |
| 54 | +* [Currying](misc/Currying) |
| 55 | +* [Module](misc/Module) |
| 56 | +* [Object Specifier](misc/ObjectSpecifier) |
| 57 | +* [Revealing Module](misc/RevealingModule) |
| 58 | + |
| 59 | +## Inspiring resources |
| 60 | + |
| 61 | +* *JavaScript: The Definitive Guide*, **David Flanagan** |
| 62 | +* *JavaScript: The Good Parts*, **Douglas Crockford** |
| 63 | +* *Learning JavaScript Design Patterns*, **Addy Osmani** |
| 64 | +* *Exploring ES6*, **Axel Rauschmayer** |
| 65 | +* *The Little Book on CoffeeScript*, **Alex MacCaw** |
| 66 | +* *TypeScript Deep Dive*, **Basarat Ali Syed** |
0 commit comments