JS: Leave the classes to those other languages!

Transcript

1. JS
   LEAVE THE CLASSES
   TO THOSE OTHER
   LANGUAGES!
   

   View Slide

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

   View Slide

3. DOES JS HAVE
   CLASSES?
   

   View Slide

4. NO.
   

   View Slide

5. AND NOW?
   

   View Slide

6. IDEA!
   Surely someone has been in my same position and
   maybe he/she implemented some workaround.
   

   View Slide

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

   View Slide

8. YOU NEED TO LEARN JS
   

   View Slide

9. AGENDA
   PSEUDOCLASSES
   JS PROTOTYPE CHAIN
   ALTERNATIVE PATTERNS
   

   View Slide

10. OBJECTS IN JS
    come in a literal or a constructed form
    are collections of key/value pairs
    have a prototype
    

    View Slide

11. THE LITERAL FORM
    car
    __proto__
    color: ‘red’
    Object.prototype
    // literal form
    var car = {
    color: ‘red’
    };
    built-in
    

    View Slide

12. THE CONSTRUCTED FORM
    car
    __proto__
    color: ‘red’
    Object()
    .prototype
    // constructed form
    var car = new Object();
    car.color = ‘red’;
    Object.prototype
    .constructor
    built-in
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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’
    

    View Slide

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

    View Slide

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
    

    View Slide

18. AGENDA
    PSEUDOCLASSES
    JS PROTOTYPE CHAIN
    ALTERNATIVE PATTERNS
    

    View Slide

19. REAL
    CLASSES
    

    View Slide

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.
    

    View Slide

21. PSEUDO
    CLASSES
    

    View Slide

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"
    

    View Slide

23. MENTAL
    MAPS
    TIME
    

    View Slide

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

    View Slide

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"
    

    View Slide

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

    View Slide

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"
    

    View Slide

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

    View Slide

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"
    

    View Slide

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

    View Slide

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"
    

    View Slide

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

    View Slide

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"
    

    View Slide

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

    View Slide

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"
    

    View Slide

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
    

    View Slide

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
    

    View Slide

38. AGENDA
    PSEUDOCLASSES
    JS PROTOTYPE CHAIN
    ALTERNATIVE PATTERNS
    

    View Slide

39. DO I REALLY
    NEED TO FAKE
    CLASSES?
    

    View Slide

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

    View Slide

41. WHAT!?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

44. MENTAL
    MAPS
    TIME
    

    View Slide

45. OLOO STYLE
    Object.prototype
    built-in
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

51. OLOO STYLE
    Person
    Student
    set
    getSchool
    init
    getName
    __proto__ __proto__
    Object.prototype
    built-in
    

    View Slide

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
    

    View Slide

53. OLOO STYLE
    Person
    Student
    giamir
    set
    getSchool
    init
    getName
    __proto__ __proto__ __proto__
    Object.prototype
    built-in
    

    View Slide

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
    

    View Slide

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
    

    View Slide

56. FINALLY
    ALL CLEAR!
    (…MAYBE)
    

    View Slide

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
    

    View Slide

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

    View Slide