JS: Leave the classes to those other languages!

Transcript

1. JS LEAVE THE CLASSES TO THOSE OTHER LANGUAGES!

2. I’M A DEVELOPER, I HAVE CLASS.

3. DOES JS HAVE CLASSES?

4. NO.

5. AND NOW?

6. IDEA! Surely someone has been in my same position and

   maybe he/she implemented some workaround.

7. WHAT THE HECK! MIXINS PARASITIC INHERITANCE PROTOTYPAL INHERITANCE ?

8. YOU NEED TO LEARN JS

9. AGENDA PSEUDOCLASSES JS PROTOTYPE CHAIN ALTERNATIVE PATTERNS

10. OBJECTS IN JS come in a literal or a constructed

    form are collections of key/value pairs have a prototype

11. THE LITERAL FORM car __proto__ color: ‘red’ Object.prototype // literal

    form var car = { color: ‘red’ }; built-in

12. THE CONSTRUCTED FORM car __proto__ color: ‘red’ Object() .prototype //

    constructed form var car = new Object(); car.color = ‘red’; Object.prototype .constructor built-in

13. WHAT IS A FUNCTION? is a sub-type of object ("callable

    object") function Vehicle() { this.color = ‘red’; } can be handled like any other plain object Vehicle() .prototype Vehicle.prototype automatically get a property called prototype, which is just an empty object.

14. WHAT IS A CONSTRUCTOR? is any function which is used

    as a constructor function Vehicle() { this.color = ‘red’; } var myVehicle = new Vehicle(); I can use Vehicle as a constructor

15. A “NEW” CONFUSION What happens when a constructor is called?

    var myVehicle = new Vehicle(); 1. It creates a new object 2. It sets the constructor property of the object to Vehicle 3. It sets up the object to delegate to Vehicle.prototype 4. It calls Vehicle() in the context of the new object myVehicle __proto__ Vehicle() .prototype Vehicle.prototype .constructor color: ‘red’

16. ES5 OBJECT.CREATE() myVehicle __proto__ color: ‘red’ Vehicle.prototype var myVehicle =

    Object.create(Vehicle.prototype); myVehicle.color = ‘red’;

17. PROTOTYPE CHAIN __proto__ shape triangle __proto__ border: ‘red’ null __proto__

    Object.prototype built-in var shape = { border: ‘red’ }; var triangle = Object.create( shape ); triangle.border; triangle.area; // ‘red’ // undefined

18. AGENDA PSEUDOCLASSES JS PROTOTYPE CHAIN ALTERNATIVE PATTERNS

19. REAL CLASSES

20. CLASSIC INHERITANCE class Person attr_reader :name def initialize(name) @name =

    name end end class Student < Person attr_reader :school def initialize(name, school) super(name) @school = school end end giamir = Student.new('Giamir', 'TWU') puts giamir.name # Giamir puts giamir.school # TWU Classes are blue-prints Objects are copies of all the characteristics described by classes.

21. PSEUDO CLASSES

22. PROTOTYPAL INHERITANCE function Person(name) { this.name = name; } Person.prototype.getName

    = function() { return this.name; }; function Student(name,school) { Person.call( this, name ); // pseudo-polymorphism this.school = school; } Student.prototype = Object.create(Person.prototype); Student.prototype.getSchool = function() { return this.school; }; var giamir = new Student('Giamir','TWU'); giamir.getName(); // "Giamir" giamir.getSchool(); // "TWU"

23. MENTAL MAPS TIME

24. PSEUDOCLASSES STYLE Object.prototype built-in Object() .prototype

25. PSEUDOCLASSES STYLE function Person(name) { this.name = name; } Person.prototype.getName

    = function() { return this.name; }; function Student(name,school) { Person.call( this, name ); // pseudo-polymorphism this.school = school; } Student.prototype = Object.create(Person.prototype); Student.prototype.getSchool = function() { return this.school; }; var giamir = new Student('Giamir','TWU'); giamir.getName(); // "Giamir" giamir.getSchool(); // "TWU"

26. PSEUDOCLASSES STYLE Person.prototype Object.prototype built-in __proto__ Object() .prototype Person() .prototype

27. PSEUDOCLASSES STYLE function Person(name) { this.name = name; } Person.prototype.getName

    = function() { return this.name; }; function Student(name,school) { Person.call( this, name ); // pseudo-polymorphism this.school = school; } Student.prototype = Object.create(Person.prototype); Student.prototype.getSchool = function() { return this.school; }; var giamir = new Student('Giamir','TWU'); giamir.getName(); // "Giamir" giamir.getSchool(); // "TWU"

28. PSEUDOCLASSES STYLE Person.prototype getName Object.prototype built-in __proto__ Object() .prototype Person()

    .prototype

29. PSEUDOCLASSES STYLE function Person(name) { this.name = name; } Person.prototype.getName

    = function() { return this.name; }; function Student(name,school) { Person.call( this, name ); // pseudo-polymorphism this.school = school; } Student.prototype = Object.create(Person.prototype); Student.prototype.getSchool = function() { return this.school; }; var giamir = new Student('Giamir','TWU'); giamir.getName(); // "Giamir" giamir.getSchool(); // "TWU"

30. PSEUDOCLASSES STYLE Person.prototype Student.prototype getName Object.prototype built-in __proto__ Object() .prototype

    Person() .prototype Student() .prototype __proto__

31. PSEUDOCLASSES STYLE function Person(name) { this.name = name; } Person.prototype.getName

    = function() { return this.name; }; function Student(name,school) { Person.call( this, name ); // pseudo-polymorphism this.school = school; } Student.prototype = Object.create(Person.prototype); Student.prototype.getSchool = function() { return this.school; }; var giamir = new Student('Giamir','TWU'); giamir.getName(); // "Giamir" giamir.getSchool(); // "TWU"

32. PSEUDOCLASSES STYLE Person.prototype Student.prototype getName __proto__ Object.prototype built-in __proto__ Object()

    .prototype Person() .prototype Student() .prototype

33. PSEUDOCLASSES STYLE function Person(name) { this.name = name; } Person.prototype.getName

    = function() { return this.name; }; function Student(name,school) { Person.call( this, name ); // pseudo-polymorphism this.school = school; } Student.prototype = Object.create(Person.prototype); Student.prototype.getSchool = function() { return this.school; }; var giamir = new Student('Giamir','TWU'); giamir.getName(); // "Giamir" giamir.getSchool(); // "TWU"

34. PSEUDOCLASSES STYLE Person.prototype Student.prototype getSchool getName __proto__ Object.prototype built-in __proto__

    Object() .prototype Person() .prototype Student() .prototype

35. PSEUDOCLASSES STYLE function Person(name) { this.name = name; } Person.prototype.getName

    = function() { return this.name; }; function Student(name,school) { Person.call( this, name ); // pseudo-polymorphism this.school = school; } Student.prototype = Object.create(Person.prototype); Student.prototype.getSchool = function() { return this.school; }; var giamir = new Student('Giamir','TWU'); giamir.getName(); // "Giamir" giamir.getSchool(); // "TWU"

36. PSEUDOCLASSES STYLE Person.prototype Student.prototype giamir getSchool getName __proto__ name school

    __proto__ Object.prototype built-in __proto__ Object() .prototype Person() .prototype Student() .prototype INHERITANCE

37. PSEUDOCLASSES STYLE Person.prototype Student.prototype giamir getSchool getName __proto__ name school

    __proto__ Object.prototype built-in __proto__ Object() .prototype Person() .prototype Student() .prototype INHERITANCE DELEGATION

38. AGENDA PSEUDOCLASSES JS PROTOTYPE CHAIN ALTERNATIVE PATTERNS

39. DO I REALLY NEED TO FAKE CLASSES?

40. THE ALTERNATIVE EMBRACE OLOO “Kyle Simpson says…”

41. WHAT!?

42. WHAT IS OLOO? is a style pattern to implement delegation

    oriented design stands for objects linked to other objects is a much simpler and straightforward way to work in JS gets rid of the confusing “new” operator

43. OLOO STYLE var Person = { init: function(name) { this.name

    = name; }, getName: function() { return this.name; } }; var Student = Object.create(Person); Student.set = function(name, school) { this.init(name); this.school = school; }; Student.getSchool = function() { return this.school; }; var giamir = Object.create(Student); giamir.set('Giamir', 'TWU'); giamir.getName(); // Giamir giamir.getSchool(); // TWU

44. MENTAL MAPS TIME

45. OLOO STYLE Object.prototype built-in

46. OLOO STYLE var Person = { init: function(name) { this.name

    = name; }, getName: function() { return this.name; } }; var Student = Object.create(Person); Student.set = function(name, school) { this.init(name); this.school = school; }; Student.getSchool = function() { return this.school; }; var giamir = Object.create(Student); giamir.set('Giamir', 'TWU'); giamir.getName(); // Giamir giamir.getSchool(); // TWU

47. OLOO STYLE Person init getName __proto__ Object.prototype built-in

48. OLOO STYLE var Person = { init: function(name) { this.name

    = name; }, getName: function() { return this.name; } }; var Student = Object.create(Person); Student.set = function(name, school) { this.init(name); this.school = school; }; Student.getSchool = function() { return this.school; }; var giamir = Object.create(Student); giamir.set('Giamir', 'TWU'); giamir.getName(); // Giamir giamir.getSchool(); // TWU

49. OLOO STYLE Person Student init getName __proto__ __proto__ Object.prototype built-in

50. OLOO STYLE var Person = { init: function(name) { this.name

    = name; }, getName: function() { return this.name; } }; var Student = Object.create(Person); Student.set = function(name, school) { this.init(name); this.school = school; }; Student.getSchool = function() { return this.school; }; var giamir = Object.create(Student); giamir.set('Giamir', 'TWU'); giamir.getName(); // Giamir giamir.getSchool(); // TWU

51. OLOO STYLE Person Student set getSchool init getName __proto__ __proto__

    Object.prototype built-in

52. OLOO STYLE var Person = { init: function(name) { this.name

    = name; }, getName: function() { return this.name; } }; var Student = Object.create(Person); Student.set = function(name, school) { this.init(name); this.school = school; }; Student.getSchool = function() { return this.school; }; var giamir = Object.create(Student); giamir.set('Giamir', 'TWU'); giamir.getName(); // Giamir giamir.getSchool(); // TWU

53. OLOO STYLE Person Student giamir set getSchool init getName __proto__

    __proto__ __proto__ Object.prototype built-in

54. OLOO STYLE var Person = { init: function(name) { this.name

    = name; }, getName: function() { return this.name; } }; var Student = Object.create(Person); Student.set = function(name, school) { this.init(name); this.school = school; }; Student.getSchool = function() { return this.school; }; var giamir = Object.create(Student); giamir.set('Giamir', 'TWU'); giamir.getName(); // Giamir giamir.getSchool(); // TWU

55. OLOO STYLE Person Student giamir set getSchool init getName __proto__

    __proto__ __proto__ Object.prototype built-in name school OBJECTS LINKED TO OTHER OBJECTS OLOO

56. FINALLY ALL CLEAR! (…MAYBE)

57. WRAPPING UP can be avoided adopting delegation oriented design faking

    classes introduces another level of complexity GETTING OUT OF OUR COMFORT ZONE IS THE KEY TO LEARN classes are an optional design pattern for code

58. THANK YOU. hello@giamir.com @giamir Giamir Buoncristiani