Healthy OOP in Javascript

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