Composition vs inheritance with React and Javascript components.

2. Composition
vs
Inheritance
Compound Components
and
Higher Order Components

3. What is Inheritance?
• Is a relationship
• A car is a vehicle
• A cat is a mammal

4. What is Composition?
• Has a relationship
• A Car has a engine
• A Person has a name

5. We now make
airplanes

7. Inheritance or…?
• Does ObjectB want to expose the complete interface (all public
methods no less) of ObjectA such that ObjectB can be used where
ObjectA is expected?

8. Inheritance
• A Cessna biplane will expose
the complete interface of an
airplane, if not more.
• Cessna biplane is a Airplane

9. “Customers want winged planes or birds.”

10. Composition or…?
• Does ObjectB want only some/part of the
behavior exposed by ObjectA?

11. Composition
• A Bird may need only the fly
behavior of an Airplane.
• Airplane has fly, takeOff, lift,
thrust, land
• Bird has fly, takeOff, lift, thrust,
land

14. Code Demo
https://source.datanerd.us/flinehan/compound-high-order/tree/slides/src/
components

18. At the end of the day Ikea doesn’t sell furniture.
They sell pieces.…

20. Composition gives us the ability to quickly
create flexible and modern UIs our users and
Product Managers expect.