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
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