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.

Fe6b81005d1553accd6b2a28f6a2bef1?s=128

Pete Hodgson

July 25, 2014
Tweet

Transcript

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

  2. BETTER TIME @ph1

  3. LEVELING UP @ph1

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

  5. this @ph1

  6. this this!!!! @ph1

  7. function myClass(message) { this.message = message; var self = this;

    $('button').click(function(){ self.onClick(); }); } this!!!! @ph1
  8. this @ph1

  9. this @ph1

  10. state & behavior, 
 traveling together through time Object Oriented


    Programming @ph1
  11. A PERSON @ph1 george = new Person() ! george.eatCake() //

    om nom nom nom ! george.stillHungry() // returns true or false
  12. var george = new Person(); @ph1

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

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

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

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

    var george = new Person(); { … } @ph1 { … }
  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
  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
  19. function createPerson(){ var cakesEaten = 0; return { eatCake: function(){

    cakesEaten += 1; }, stillHungry: function(){ return cakesEaten < 3; } }; } function } ! Person }; ! Person }; @ph1 WITH CLOSURES
  20. george = new Person() ! cakes = ["coffee","cheese","bundt","angel"] cakes.forEach(george.eatCake) @ph1

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

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

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

    => false @ph1
  24. this @ph1

  25. 17 @ph1

  26. level up! @ph1

  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
  28. thanks! Pete Hodgson @ph1
 phodgson@thoughtworks.com slides: http://bitly.com/differentjs