$30 off During Our Annual Pro Sale. View Details »

different.js - Forward JS 2014

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.

Pete Hodgson

July 25, 2014
Tweet

More Decks by Pete Hodgson

Other Decks in Programming

Transcript

  1. DIFFERENT.JS
    Pete Hodgson
    @ph1| [email protected]

    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

    [email protected]
    slides: http://bitly.com/differentjs

    View Slide