composition-examples

Examples for The Two Pillars of JavaScript: Prototypal OO - Object Composition

Related Links

Courses & Webcasts

For in-depth video discussion of these examples with Q&A, watch the Composition with Prototypes Webcast Recording.

• ES6 ROADMAP Syntax primer + Examples
• Learn JavaScript with Eric Elliott.
• Direct Link for members.

References

• "The Two Pillars of JavaScript Part 1" Prototypal OO
• "The Two Pillars of JavaScript Part 2" Functional programming
• "JavaScript Training Sucks"
• "Design Patterns: Elements of Reusable Object-Oriented Software" by the Gang of Four.
• "Refactoring: Improving the Design of Existing Code" by Martin Fowler, Kent Beck, John Brant, William Opdyke, Don Roberts.
• "Coders at Work: Reflections on the Art of Programming" by Peter Seibel - the origin of the gorilla banana problem from Joe Armstrong.

Chat

• Chat about object composition with stamp experts.

Learn About Prototypal OO

• Classical Inheritance is Obsolete: How to Think in Prototypal OO. #video
• Composition Over Inheritance. #video
• The Two Pillars of JavaScript Part 1: How to Escape the 7th Circle of Hell.
• How to Fix the ES6 class Keyword.
• Common Misconceptions About Inheritance in JavaScript.
• Inside the Dev Team Death Spiral.
• The Open Minded Explorer's Guide to Object Composition.
• Introducing the Stamp Specification.

Libraries and Code

• The Stamp Specification
• Stamp Utils
• Stampit
• React Stamp Use this instead of class when you need React lifecycle methods.
• React Pure Component Starter Use React pure components if you don't need React's lifecycle hooks for your component.
• Mori Immutable datatypes from Clojure ported to JavaScript.
• Immutable JS Facebook's OSS Immutable library.
• Redux Pure functions for app state updates.
• Dan Abromov's Redux Dev Tools talk at React Europe
• Redux DevTools Great developer tools for Redux apps (including time travel debugger).
• Cerebral debugger demo One of the first time travel debuggers for JS.
• React PropTypes documentation Runtime structural type checks in JavaScript.
• TypeScript Compile to JS language. Runtime reflection support is experimental as of October 2015. Not recommended for production.
• JSON-Schema A tried and tested spec for JSON object data validation.
• rtype A TypeScript-inspired structural type notation for JavaScript.
• rfx Runtime library support for structurally-typed interfaces in JavaScript.

Prep Your Computer to Follow Along

What You'll Need:

• Node v4+ (For the best experience on Mac and Linux, install with nvm)
• Git
• Your favorite text editor (or try Atom.IO)
• This repo (see "Getting Started")

Getting Started

Clone & install:

git clone [email protected]:learn-javascript-courses/composition-examples.git
cd composition-examples
npm install

Start Dev Console

npm run watch

Experiment with the files in examples/ and test/. Whenever you save, the dev console will run lint and the test suite automatically.

You can exit the console by pressing CTRL+C (Win keyboard) or Command+C (Mac keyboard).

Testing Individual Examples

For your convenience, there are npm scripts set up in package.json:

    "----- Examples ----":"",
    "shape": "babel-node test/shape/index.js",
    "highpass": "babel-node test/highpass/index.js",
    "gorilla-banana/v1": "babel-node test/gorilla-banana/v1/index.js",
    "gorilla-banana/v1/fail": "babel-node test/gorilla-banana/v1/fail.js"
    ...

You can run these by typing:

npm run -s <examplename>

e.g.:

npm run -s gorilla-banana/v1

The -s option supresses the npm error page, which tends to scroll test failures off the top of the screen.

Some of the individual examples demonstrate test failures. They're excluded from the main test suite because they're expected to fail.

Practical Uses of Object Composition

Lots of people use animals as examples when they talk about inheritance techniques. I think some examples of real use-cases would be better. I commonly use object composition for a number of real-life things in every day app development, including:

Network & database I/O:

Connection objects hold state including host, port, accessToken, etc... A connection factory would typically return a connection object with an event emitter composed in to signal to the app when I/O takes place.

Configuration:

Typical production apps often get configuration data (such as details of network services it uses, etc...) from a variety of different sources. The app then shares configuration objects with the parts of the app that require it. I frequently compose in an event emitter to the configuration object as well so that we can log when parts of the app request configuration data that is undefined. This alerts us when parts of the app misbehave. It might look something like this:

const configuration = compose(source1, source2, source3, eventEmitter);

Assignment

Implement a scrum checkin app.