different.js - Forward JS 2014

video available here: https://thenewcircle.com/s/post/1656/differentjs_video_forward_js

Let’s expand our programming minds by thinking about how we can use javascript in experimental and unusual ways. Can we write javascript without ever using the ‘this’ keyword? Would we want to? Can we write javascript without sharing mutable state? Would we want to?
You might not leave this talk with code examples that you’ll apply to your production code tomorrow, but you’ll leave with a different perspective and a new way of thinking about how JavaScript can work.

Transcript

1. DIFFERENT.JS
   Pete Hodgson
   @ph1| phodgson@thoughtworks.com
   

   View Slide

2. BETTER
   TIME
   @ph1
   

   View Slide

3. LEVELING
   UP
   @ph1
   

   View Slide

4. me me me
   Pete Hodgson
   Consultant at ThoughtWorks
   @ph1
   blog.thepete.net
   

   View Slide

5. this
   @ph1
   

   View Slide

6. this
   this!!!!
   @ph1
   

   View Slide

7. function myClass(message) {
   this.message = message;
   var self = this;
   $('button').click(function(){
   self.onClick();
   });
   }
   this!!!!
   @ph1
   

   View Slide

8. this
   @ph1
   

   View Slide

9. this
   @ph1
   

   View Slide

10. state & behavior, 

    traveling together through time
    Object Oriented

    Programming
    @ph1
    

    View Slide

11. A PERSON
    @ph1
    george = new Person()
    !
    george.eatCake() // om nom nom nom
    !
    george.stillHungry() // returns true or false
    

    View Slide

12. var george = new Person();
    @ph1
    

    View Slide

13. { … }
    var george = new Person();
    { … }
    @ph1
    

    View Slide

14. george.eatCake();
    { … }
    var george = new Person();
    { … }
    @ph1
    { … }
    

    View Slide

15. if( george.stillHungry() ){
    // blah
    }
    george.eatCake();
    { … }
    var george = new Person();
    { … }
    @ph1
    { … }
    

    View Slide

16. if( george.stillHungry() ){
    // blah
    }
    george.eatCake();
    { … }
    var george = new Person();
    { … }
    @ph1
    { … }
    

    View Slide

17. function Person(){
    this.cakesEaten = 0;
    }
    !
    Person.prototype.eatCake = function(){
    this.cakesEaten += 1;
    };
    !
    Person.prototype.stillHungry = function(){
    return this.cakesEaten < 3;
    };
    @ph1
    WITH PROTOTYPES / THIS
    

    View Slide

18. function Person(){
    this.cakesEaten = 0;
    }
    !
    Person.prototype.eatCake = function(){
    this.cakesEaten += 1;
    };
    !
    Person.prototype.stillHungry = function(){
    return this.cakesEaten < 3;
    };
    @ph1
    WITH PROTOTYPES / THIS
    

    View Slide

19. function createPerson(){
    var cakesEaten = 0;
    return {
    eatCake: function(){
    cakesEaten += 1;
    },
    stillHungry: function(){
    return cakesEaten < 3;
    }
    };
    }
    function
    }
    !
    Person
    };
    !
    Person
    };
    @ph1
    WITH CLOSURES
    

    View Slide

20. george = new Person()
    !
    cakes = ["coffee","cheese","bundt","angel"]
    cakes.forEach(george.eatCake)
    @ph1
    

    View Slide

21. george = new Person()
    !
    cakes = ["coffee","cheese","bundt","angel"]
    cakes.forEach(george.eatCake)
    george.stillHungry() // => true
    @ph1
    

    View Slide

22. george = new Person()
    !
    cakes = ["coffee","cheese","bundt","angel"]
    cakes.forEach(george.eatCake)
    george.stillHungry()
    george.cakesEaten
    // => true
    // => 0
    @ph1
    

    View Slide

23. george = createPerson()
    !
    cakes = ["coffee","cheese","bundt","angel"]
    cakes.forEach(george.eatCake)
    george.stillHungry() // => false
    @ph1
    

    View Slide

24. this
    @ph1
    

    View Slide

25. 17
    @ph1
    

    View Slide

26. level
    up!
    @ph1
    

    View Slide

27. LEVEL UP
    ▫︎no return values (yes, really!)
    ▫︎only 1 parameter
    ▫︎all functions less than 5 lines long
    ▫︎test-first everything
    ▫︎no tests
    ▫︎immutable objects
    ▫︎no “methods” (functions on objects)
    ▫︎functional reactive
    19
    @ph1
    

    View Slide

28. thanks!
    Pete Hodgson
    @ph1

    phodgson@thoughtworks.com
    slides: http://bitly.com/differentjs
    

    View Slide