Design Patterns and Idioms in ES6
A collection of design patterns and idioms in ES6
Boilerplate forked from angular/atscript-playground
Initial setup
# Clone the repo...
git clone https://github.com/ziyasal/design-patterns-in-es6.git
cd design-patterns-in-es6
# Then, you need to install all the dependencies...
npm install
# If you want to be able to use global commands `karma` and `gulp`...
npm install -g karma-cli gulp# Do initial build, start a webserver and re-build on every file change...
gulp build serve watchOpen a browser and see the result.
Current Patterns
| Pattern | Description |
|---|---|
| abstract_factory | use a generic function with specific factories |
| adapter | adapt one interface to another using a whitelist |
| 3-tier | data<->business logic<->presentation separation (strict relationships) |
| borg | a singleton with shared-state among instances |
| bridge | a client-provider middleman to soften interface changes |
| builder | call many little discrete methods rather than having a huge number of constructor parameters |
| catalog | general methods will call different specialized methods based on construction parameter |
| chain | apply a chain of successive handlers to try and process the data |
| command | bundle a command and arguments to call later |
| composite | encapsulate and provide access to a number of different objects |
| decorator | wrap functionality with other functionality in order to affect outputs |
| facade | use one class as an API to a number of others |
| factory_method | delegate a specialized function/method to create instances |
| flyweight | transparently reuse existing instances of objects with similar/identical state |
| graph_search | (graphing algorithms, not design patterns) |
| mediator | an object that knows how to connect other objects and act as a proxy |
| memento | generate an opaque token that can be used to go back to a previous state |
| mvc | model<->view<->controller (non-strict relationships) |
| observer | provide a callback for notification of events/changes to data |
| pool | preinstantiate and maintain a group of instances of the same type |
| prototype | use a factory and clones of a prototype for new instances (if instantiation is expensive) |
| proxy | an object funnels operations to something else |
| publish_subscribe | a source syndicates events/data to 0+ registered listeners |
| state | logic is org'd into a discrete number of potential states and the next state that can be transitioned to |
| strategy | selectable operations over the same data |
| template | an object imposes a structure but takes pluggable components |
| visitor | invoke a callback for all items of a collection |
| chaining_method | continue callback next object method |
| iterator | Provide a way to access the elements of an aggregate object sequentially |
What are all the pieces involved?
Traceur
Transpiles AtScript code into regular ES5 (today's JavaScript) so that it can be run in a current browser.
RequireJS
Traceur is configured to transpile AtScript modules into AMD syntax and we use RequireJS to load the code in the browser.
Assert library
When typeAssertions: true option is used, Traceur generates run-time type assertions such as assert.type(x, Object). The assert library does the actual run-time check. Of course, you can use your own assert library.
The idea with type assertions is that you only use them during the development/testing and when deploying, you use typeAssertions: false.
Karma
Test runner that runs the tests in specified browsers, every time that you change a file.
Gulp
Task runner to make defining and running the tasks simpler.