Composition is a method programmers use to design their code. Code can be a hotchpotch of meaningless words and numbers. When we think of maintainability, scalability and collaboration. You might want to structure your code in a more efficient way. Composition is one of these methods to provide us with a solution to optimize functionality reuse. It builds on the ideas of Object-Oriented-programming or simply OOP. In this lesson you will familiarise yourself with these fundamentals of structuring and designing code.
Object-oriented programming, or OOP, is a model for writing computer programs. Before OOP, code was most commonly a list of instructions that acted on memory in the computer. Instead of a procedural list of actions, OOP is modeled around objects that interact with each other. Like a blueprint these objects connect with each other to carry out the intent of the program. Some languages, like Javascript, are based on this model, so to better understand Javascript we must understand OOP.
Watch and read the resources
MicroNugget, What is OOP? (Object-Oriented Programming): Micronugget classes and OOP
The Java™ Tutorials: Object-Oriented Programming Concepts
Wikipedia: Wiki OOP
Object-Oriented Programming has two well known candidates for the reuse of functionality, inheritance and composition. Inheritance is like a tree structure: each object inherits its parent's properties. Inheritance is quicker to set up but might produce problems down the line, when introducing changes. Composition is a method where the big objects ar composed of smaller objects, each serving a different smaller function. This method reduces complexity by treating many objects as one object.
Watch and read the resources
Composition vs. Inheritance: Composition vs. Inheritance (watch from 4:34 - 6:50)
Composition as a model may seem complicated or a bit abstract, but the truth is, you have already been doing it with Polymer. Polymer allows you to have many small components that eventually make up your entire app. Most reasons for why we use Polymer, actually refer back to composition. For example the encapsulation allows every component to function independently making debugging easier. Composition allows for efficient code reuse and is therefore the preferred method by many.
Open the Polymer Designer
Inside the designer create a core card component
Composition is about adding smaller components in a big component
Add some other components like the header or input component
Practice some more with composition and compose yourself some Frankenstein components
polymer-project-designer: Polymer Designer