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 watch

Open 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.

bugthesystem / design-patterns-and-idioms-in-es6 Goto Github PK