Composition vs Inheritance

Slides de la charla "Composition vs Inheritance" en el meetup de LimaJS el 21/04/2017.

Transcript

1. Composition vs Inheritance LimaJS - 21/04/2017 - @lupomontero
2. Qué son la herencia y la composición? • Son técnicas de reuso de código • Son formas de abstraer • Son formas de pensar en la semántica de nuestro dominio
3. En qué se diferencian? Herencia • Qué es? • Sustantivos • Es un(a) … Composición • Qué hace? • Verbos • Tiene un(a) ...
4. Veámos un ejemplo Dog { bark() {} poop() {} } Cat { meow() {} poop() {} }
5. function Dog() {} Dog.prototype.bark = function () {}; Dog.prototype.poop = function () {}; function Cat() {} Cat.prototype.meow = function () {}; Cat.prototype.poop = function () {}; Sin Herencia
6. Con herencia Dog { bark() {} poop() {} } Cat { meow() poop() } Animal { poop() {} } Dog extends Animal { bark() {} } Cat extends Animal { meow() {} }
7. Implementación con Herencia function Animal() {} Animal.prototype.poop = function () { console.log('💩'); }; function Cat() {} Cat.prototype = Object.create(Animal. prototype); Cat.prototype.constructor = Cat; Cat.prototype.meow = function () { console.log('meow'); }; function Dog() {} Dog.prototype = Object.create(Animal. prototype); Dog.prototype.constructor = Dog; Dog.prototype.bark = function () { console.log('woof'); };
8. Nuestra app crece... RobotLimpiador { drive() {} clean() {} } RobotAsesino { drive() kill() } Robot { drive() {} } RobotLimpiador extends Robot { clean() {} } RobotAsesino extends Robot { kill() {} }
9. Nuestra app crece... function Robot() {} Robot.prototype.drive = function () {}; function MurdererRobot() {} MurdererRobot.prototype = Object.create(Robot.prototype); MurdererRobot.prototype.constructor = MurdererRobot; MurdererRobot.prototype.kill = function () {}; function CleaningRobot() {} CleaningRobot.prototype = Object.create(Robot.prototype); CleaningRobot.prototype.constructor = CleaningRobot; CleaningRobot.prototype.clean = function () {};
10. Ahora nos piden añadir un RobotPerroAsesino!!!
11. Dónde lo ponemos? Animal Robot Perro Gato Limpiador Asesino
12. Composición al rescate!!
13. Composición dog = pooper + barker cat = pooper + meower cleaningRobot = driver + cleaner murdererRobot = driver + killer murdererRobotDog = driver + killer + barker
14. Aislamos la “funcionalidad” con “Factory Functions” const barker = (state) => ({ bark: () => console.log('woof! my name is ' + state.name) }); barker({name: 'lupo'}).bark(); // woof! my name is lupo
15. Aislamos la “funcionalidad” con “Factory Functions” const driver = (state) => ({ drive: () => state.position = state.position + state.speed }); const killer = (state) => ({ kill: () => console.log('time to kill!') });
16. const murderRobotDog = (name) => { const state = { name: name, speed: 100, position: 0 }; return Object.assign({}, barker(state), driver(state), killer(state)); }; Componemos la funcionalidad...
17. … y además...
18. function Persona(nombre, edad) { this.nombre = nombre; this.habla = function () { console.log('Hola, soy ' + this.nombre); }; } var persona = new Persona(‘lupo’); persona.habla(); // hola soy lupo setTimeout(persona.habla); // hola soy undefined setTimeout(persona.habla.bind(persona)); // hola soy lupo setTimeout(function () { persona.habla() }); setTimeout(() => persona.habla()); // Hola, soy lupo setTimeout(_ => persona.habla()); this is not your friend
19. Notas... • Una jerarquía de herencia requiere un montón de “diseño” al principio de un proyecto y puede crear rigidez en la evolución de la funcionalidad. Nos obliga a tratar de predecir el futuro. • En otros lenguajes (por ej: Java o C#) estamos obligados a usar clases, en JavaScript no!!! • A veces, cuando tenemos que instanciar muchos, muchos objetos - decenas de miles -, la herencia prototipal puede ser más apropiada y eficiente.
20. Una curiosidad “At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.” React Docs: https://facebook.github.io/react/docs/composition-vs-inheritance.html
21. FIN