Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Healthy OOP in Javascript

Healthy OOP in Javascript

Marco Troisi

August 31, 2016
Tweet

More Decks by Marco Troisi

Other Decks in Programming

Transcript

  1. HEALTHY
    OBJECT ORIENTED
    PROGRAMMING
    IN JAVASCRIPT
    @MarcoTroisi

    View Slide

  2. @MarcoTroisi
    WHY OOP
    HEALTHY OOP IN JAVASCRIPT

    View Slide

  3. @MarcoTroisi
    OBJECTS AS
    A WAY TO
    UNDERSTAND
    THE WORLD
    HEALTHY OOP IN JAVASCRIPT
    David West quote

    View Slide

  4. @MarcoTroisi
    WHERE DOES
    THE CRITICISM
    COME FROM
    HEALTHY OOP IN JAVASCRIPT

    View Slide

  5. @MarcoTroisi
    HEALTHY OOP
    IN JAVASCRIPT
    HEALTHY OOP IN JAVASCRIPT

    View Slide

  6. @MarcoTroisi
    IMMUTABILITY
    HEALTHY OOP IN JAVASCRIPT

    View Slide

  7. @MarcoTroisi
    Classes should be immutable
    unless there's a very good
    reason to make them
    mutable....If a class cannot be
    made immutable, limit its
    mutability as much as
    possible.
    (Joshua Bloch, “Effective Java”)
    HEALTHY OOP IN JAVASCRIPT

    View Slide

  8. @MarcoTroisi
    ...all classes should be
    immutable in a perfect
    object-oriented world
    (Yegor Bugayenko, author of “Elegant Objects”)
    HEALTHY OOP IN JAVASCRIPT

    View Slide

  9. @MarcoTroisi
    IMMUTABILITY
    HEALTHY OOP IN JAVASCRIPT
    PREDICTABILITY
    (NO SIDE EFFECTS)

    View Slide

  10. @MarcoTroisi
    IMMUTABILITY
    HEALTHY OOP IN JAVASCRIPT
    PREDICTABILITY
    (NO SIDE EFFECTS)
    var Phone = function(phoneMake, phoneModel) {
    this.make = function() {
    return phoneMake;
    }
    this.model = function() {
    return phoneModel;
    }
    this.equals = function(Phone) {
    return (
    this.make() === Phone.make()
    && this.model() === Phone.model()
    )
    }
    }
    var MotoG = new Phone("Motorola", "Moto G");
    var IPhone6 = new Phone("Apple", "iPhone 6");
    if (MotoG.equals(IPhone6)) {
    console.log("equals");
    } else {
    console.log("NOT equals");
    }

    View Slide

  11. @MarcoTroisi
    IMMUTABILITY
    HEALTHY OOP IN JAVASCRIPT
    PREDICTABILITY
    (NO SIDE EFFECTS)
    var Phone = function(phoneMake, phoneModel) {
    this.make = function() {
    return phoneMake;
    }
    this.model = function() {
    return phoneModel;
    }
    this.equals = function(Phone) {
    return (
    this.make() === Phone.make()
    && this.model() === Phone.model()
    )
    }
    }
    var MotoG = new Phone("Motorola", "Moto G");
    var IPhone6 = new Phone("Apple", "iPhone 6");
    if (MotoG.equals(IPhone6)) {
    console.log("equals");
    } else {
    console.log("NOT equals");
    }
    // WILL PRINT “NOT equals”

    View Slide

  12. @MarcoTroisi
    IMMUTABILITY
    HEALTHY OOP IN JAVASCRIPT
    PREDICTABILITY
    (NO SIDE EFFECTS)
    var Phone = function(phoneMake, phoneModel) {
    this.make = phoneMake;
    this.model = phoneModel;
    this.equals = function(Phone) {
    return (this.make === Phone.make && this.model === Phone.model)
    }
    }
    var MotoG = new Phone("Motorola", "Moto G");
    var IPhone6 = new Phone("Apple", "iPhone 6");
    // Uh-oh
    MotoG.make = "Apple";
    MotoG.model = "iPhone 6";
    if (MotoG.equals(IPhone6)) {
    console.log("equals");
    } else {
    console.log("NOT equals");
    }

    View Slide

  13. @MarcoTroisi
    IMMUTABILITY
    HEALTHY OOP IN JAVASCRIPT
    PREDICTABILITY
    (NO SIDE EFFECTS)
    var Phone = function(phoneMake, phoneModel) {
    this.make = phoneMake;
    this.model = phoneModel;
    this.equals = function(Phone) {
    return (this.make === Phone.make && this.model === Phone.model)
    }
    }
    var MotoG = new Phone("Motorola", "Moto G");
    var IPhone6 = new Phone("Apple", "iPhone 6");
    // Uh-oh
    MotoG.make = "Apple";
    MotoG.model = "iPhone 6";
    if (MotoG.equals(IPhone6)) {
    console.log("equals");
    } else {
    console.log("NOT equals");
    }
    // WILL PRINT “Equals”

    View Slide

  14. @MarcoTroisi
    IMMUTABILITY
    HEALTHY OOP IN JAVASCRIPT
    PERFORMANCE

    View Slide

  15. @MarcoTroisi
    IMMUTABILITY
    HEALTHY OOP IN JAVASCRIPT
    THREAD
    SAFETY

    View Slide

  16. @MarcoTroisi
    HEALTHY OOP IN JAVASCRIPT
    IMMUTABILITY
    IN JAVASCRIPT

    View Slide

  17. @MarcoTroisi
    HEALTHY OOP IN JAVASCRIPT
    ACCESSORS AND
    MUTATORS
    vs
    USEFUL METHODS

    View Slide

  18. @MarcoTroisi
    USEFUL METHODS
    HEALTHY OOP IN JAVASCRIPT
    OBJECT CLOSER
    TO REAL WORLD
    ENTITY

    View Slide

  19. @MarcoTroisi
    USEFUL METHODS
    HEALTHY OOP IN JAVASCRIPT
    NO EXPOSITION
    OF INTERNAL
    VARIABLES

    View Slide

  20. @MarcoTroisi
    USEFUL METHODS
    HEALTHY OOP IN JAVASCRIPT
    EXPOSE A SMALL
    NUMBER OF
    METHODS

    View Slide

  21. @MarcoTroisi
    HEALTHY OOP IN JAVASCRIPT
    REAL WORLD
    ENTITIES ARE
    BETTER THAN
    “SERVICES”

    View Slide

  22. @MarcoTroisi
    REAL WORLD ENTITIES
    HEALTHY OOP IN JAVASCRIPT
    PasswordEncrypter()
    PasswordEncryptionService()
    ?

    View Slide

  23. @MarcoTroisi
    REAL WORLD ENTITIES
    HEALTHY OOP IN JAVASCRIPT
    /**
    * Interface for an Encrypted Password Object
    */
    var EncryptedPasswordInterface = {}
    /**
    * Returns the encrypted value
    * @return string
    */
    EncryptedPasswordInterface.encryptedValue = function() {
    return "";
    }

    View Slide

  24. @MarcoTroisi
    REAL WORLD ENTITIES
    HEALTHY OOP IN JAVASCRIPT
    var Md5EncryptedPassword = Object.create(EncryptedPasswordInterface);
    Md5EncryptedPassword = function(passwordToEncrypt) {
    this.encryptedValue = function() {
    // do encryption here…
    return encryptedPassword;
    }
    }

    View Slide

  25. @MarcoTroisi
    HEALTHY OOP IN JAVASCRIPT
    USE INTERFACES

    View Slide

  26. @MarcoTroisi
    INTERFACES
    HEALTHY OOP IN JAVASCRIPT
    - Object is defined before implementation

    View Slide

  27. @MarcoTroisi
    INTERFACES
    HEALTHY OOP IN JAVASCRIPT
    - Object is defined before implementation
    - Easy to write tests

    View Slide

  28. @MarcoTroisi
    INTERFACES
    HEALTHY OOP IN JAVASCRIPT
    - Object is defined before implementation
    - Easy to write tests
    - Force objects to adhere to a contract

    View Slide

  29. @MarcoTroisi
    INTERFACES
    HEALTHY OOP IN JAVASCRIPT
    - Object is defined before implementation
    - Easy to write tests
    - Force objects to adhere to a contract
    - Easier to avoid violating the interface
    segregation principle

    View Slide

  30. @MarcoTroisi
    INTERFACES
    HEALTHY OOP IN JAVASCRIPT
    - Object is defined before implementation
    - Easy to write tests
    - Force objects to adhere to a contract
    - Easier to avoid violating the interface
    segregation principle
    - Easy to swap an object with another

    View Slide

  31. @MarcoTroisi
    INTERFACES
    HEALTHY OOP IN JAVASCRIPT
    INTERFACE
    =
    ABSTRACT CLASS
    with empty methods

    View Slide

  32. @MarcoTroisi
    INTERFACES
    HEALTHY OOP IN JAVASCRIPT
    interface PhoneInterface {
    public function makeAndModel() : string;
    }
    abstract class PhoneInterface {
    public function makeAndModel() : string {
    return "";
    }
    }

    View Slide

  33. @MarcoTroisi
    INTERFACES
    HEALTHY OOP IN JAVASCRIPT
    var PhoneInterface = {}
    PhoneInterface.makeAndModel = function() {
    return "";
    }

    View Slide

  34. @MarcoTroisi
    USE INTERFACES
    HEALTHY OOP IN JAVASCRIPT
    GIVE AN
    ABSTRACT SIGNATURE
    TO YOUR OBJECTS

    View Slide

  35. View Slide

  36. @MarcoTroisi
    THANK YOU
    VERY MUCH!
    marcotroisi.com
    @MarcoTroisi
    github.com/marcotroisi
    bluefin.com
    HEALTHY OOP IN JAVASCRIPT

    View Slide