Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mazzur/awesome-javascript-design-patterns

A collection of awesome resources for learning design patterns in javascript
https://github.com/mazzur/awesome-javascript-design-patterns

List: awesome-javascript-design-patterns

Last synced: 16 days ago
JSON representation

A collection of awesome resources for learning design patterns in javascript

Host: GitHub
URL: https://github.com/mazzur/awesome-javascript-design-patterns
Owner: mazzur
License: cc0-1.0
Created: 2015-12-27T21:52:04.000Z (almost 9 years ago)
Default Branch: master
Last Pushed: 2018-08-11T06:50:21.000Z (over 6 years ago)
Last Synced: 2024-05-22T10:00:32.422Z (7 months ago)
Size: 18.6 KB
Stars: 83
Watchers: 2
Forks: 18
Open Issues: 1
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

ultimate-awesome - awesome-javascript-design-patterns - A collection of awesome resources for learning design patterns in JavaScript. (Other Lists / Monkey C Lists)

README

        # Awesome JavaScript Design Patterns [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)

 A collection of awesome resources for learning design patterns in javascript

 

 Feel free to [contribure](https://github.com/mazzur/awesome-javascript-design-patterns/blob/master/CONTRIBUTING.md)

## Table of Contents

- [Books](#books)

- [Articles](#articles)

  - [Creational](#creational)

    - [Factory](#factory)

    - [Singleton](#singleton)

  - [Structural](#structural)

    - [Decorator](#decorator)

    - [Facade](#facade)

  - [Behavioral](#behavioral)

    - [Mediator](#mediator)

    - [Observer](#observer)

    - [Publish/Subscribe](#pub-sub)

  - [JS-specific](#js-specific)

    - [Module](#module)

  - [Architectural](#architectural)

    - [MV*](#mv-star)

    - [Flux](#flux)

  - [Other articles](#other-articles)

- [Cources](#cources)

- [Talks](#talks)

- [Other resources](#other-resources)

  

### Books

* [Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book) *free* by Addy Osmani

* [JavaScript Patterns](https://www.goodreads.com/book/show/9422683-javascript-patterns) by Stoyan Stefanov

* [Pro JavaScript Design Patterns](https://www.goodreads.com/book/show/1960593.Pro_JavaScript_Design_Patterns) by Ross Harmes, Dustin Diaz

* [Mastering JavaScript Design Patterns](https://www.goodreads.com/book/show/23847040-mastering-javascript-design-patterns---essential-solutions-for-effective) by Simon Timms

### Articles

##### Creational

###### Factory

* [Factory Function Pattern In-Depth](https://medium.com/@pyrolistical/factory-functions-pattern-in-depth-356d14801c91#.sw3kpn3gs) by Ronald Chen

* [JavaScript Design Patterns: Factory](http://robdodson.me/javascript-design-patterns-factory/) by Rob Dodson

###### Singleton

* [JavaScript Design Patterns: Singleton](http://robdodson.me/javascript-design-patterns-singleton/) by Rob Dodson

##### Structural

###### Decorator

* [Exploring ES2016 Decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.tkqihbpde) by Addy Osmani

* [Exploring The Decorator Pattern In JavaScript & jQuery](https://addyosmani.com/blog/decorator-pattern/) by Addy Osmani

###### Facade

* [The Facade Pattern](https://carldanley.com/js-facade-pattern/) by Carl Danley

##### Behavioral

###### Mediator

* [Event Aggregator And/Or/vs Mediator: A Tale Of Two Patterns](https://lostechies.com/derickbailey/2013/03/18/event-aggregator-andorvs-mediator-a-tale-of-two-patterns/) by Derick Bailey

* [Loosely Coupled InterModule Communications with Mediator](http://enterprisewebbook.com/ch6_large_js_apps.html#mediator_section) from "Enterprise Web Development. From Desktop to Mobile" by  Yakov Fain, Victor Rasputnis, Viktor Gamov, and Anatole Tartakovsky

###### Observer

* [Comparison between different Observer Pattern implementations](https://github.com/millermedeiros/js-signals/wiki/Comparison-between-different-Observer-Pattern-implementations) by Miller Medeiros

* [Data-binding Revolutions with Object.observe()](http://www.html5rocks.com/en/tutorials/es7/observe/) by Addy Osmani

* [JavaScript Design Patterns: Observer](http://robdodson.me/javascript-design-patterns-observer/) by Rob Dodson

###### Pub-Sub

* [Decoupling JavaScript applications using the Publish/Subscribe pattern](http://dev.housetrip.com/2014/09/15/decoupling-javascript-apps-using-pub-sub-pattern/) by Emili Parreño

* [Understanding the Publish/Subscribe Pattern for Greater JavaScript Scalability](https://msdn.microsoft.com/en-us/magazine/hh201955.aspx) by Addy Osmani

* [Why I should use publish/subscribe in JavaScript](http://blog.mgechev.com/2013/04/24/why-to-use-publishsubscribe-in-javascript/) by Minko Gechev

#### JS-specific

###### Module

* [Mastering the Module Pattern](https://toddmotto.com/mastering-the-module-pattern/) by Todd Motto

* [Modules](http://eloquentjavascript.net/10_modules.html) a chapter from "Eloquent JavaScript" by Marijn Haverbeke

##### Architectural

###### MV-star

* [JavaScript MVC](http://alistapart.com/article/javascript-mvc) A List Apart article

* [Journey Through The JavaScript MVC Jungle](https://www.smashingmagazine.com/2012/07/journey-through-the-javascript-mvc-jungle/) by Addy Osmani

* [Model-View-Controller (MVC) with JavaScript](https://alexatnet.com/articles/model-view-controller-mvc-javascript) by Alex Netkachov

* [MVC Architecture](https://developer.chrome.com/apps/app_frameworks) by Chrome developers

* [MVC Architecture](https://developer.mozilla.org/en-US/Apps/Build/Modern_web_app_architecture/MVC_architecture) at MDN

* [Understanding MVC And MVP (For JavaScript And Backbone Developers)](https://addyosmani.com/blog/understanding-mvc-and-mvp-for-javascript-and-backbone-developers/) by Addy Osmani

###### Flux

* [Flux Overview](https://facebook.github.io/flux/docs/overview.html#content) by Facebook

* [Getting To Know Flux, the React.js Architecture](https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture) by Ken Wheeler

* [What is Flux?](http://fluxxor.com/what-is-flux.html) by Michelle Tilley

##### Other articles

* [AngularJS in Patterns](https://github.com/mgechev/angularjs-in-patterns) by Minko Gechev

* [Patterns For Large-Scale JavaScript Application Architecture](http://addyosmani.com/largescalejavascript/) by Addy Osmani

### Cources

* [JavaScript Design Patterns](http://code.tutsplus.com/courses/javascript-design-patterns) on tuts+

* [JavaScript Design Patterns](https://www.youtube.com/playlist?list=PLAwxTw4SYaPkGKjpeiLWz8ydvFEkmRkBn) by Udacity

* [Modular JavaScript](https://www.youtube.com/playlist?list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f) by LearnCode.academy

### Talks

* [Creating a Scalable JavaScript Application Architecture](https://youtu.be/b5pFv9NB9fs) by Nicholas Zakas

* [Large Scale JavaScript Application Architecture](https://youtu.be/kNrnRG1YgAQ) by Dan Lynch

* [MVC Application Structure](https://youtu.be/yIoPlBcW6XA) by Addy Osmani

* [Yo momma's got Javascript design patterns!](https://youtu.be/dMpp1_rJTXU) by Ryan Done

### Other Resources

* [JavaScript Design Patterns](http://www.dofactory.com/javascript/design-patterns) GoF patterns in JavaScript

* [JavaScript Patterns](https://github.com/shichuan/javascript-patterns) a rich collection of pattern examples

## License

Licensed under the [Creative Commons CC0 License](https://creativecommons.org/publicdomain/zero/1.0/).