×
Copy
Open
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Slide 1
Slide 1 text
DIFFERENT.JS Pete Hodgson @ph1|
[email protected]
Slide 2
Slide 2 text
BETTER TIME @ph1
Slide 3
Slide 3 text
LEVELING UP @ph1
Slide 4
Slide 4 text
me me me Pete Hodgson Consultant at ThoughtWorks @ph1 blog.thepete.net
Slide 5
Slide 5 text
this @ph1
Slide 6
Slide 6 text
this this!!!! @ph1
Slide 7
Slide 7 text
function myClass(message) { this.message = message; var self = this; $('button').click(function(){ self.onClick(); }); } this!!!! @ph1
Slide 8
Slide 8 text
this @ph1
Slide 9
Slide 9 text
this @ph1
Slide 10
Slide 10 text
state & behavior, traveling together through time Object Oriented Programming @ph1
Slide 11
Slide 11 text
A PERSON @ph1 george = new Person() ! george.eatCake() // om nom nom nom ! george.stillHungry() // returns true or false
Slide 12
Slide 12 text
var george = new Person(); @ph1
Slide 13
Slide 13 text
{ … } var george = new Person(); { … } @ph1
Slide 14
Slide 14 text
george.eatCake(); { … } var george = new Person(); { … } @ph1 { … }
Slide 15
Slide 15 text
if( george.stillHungry() ){ // blah } george.eatCake(); { … } var george = new Person(); { … } @ph1 { … }
Slide 16
Slide 16 text
if( george.stillHungry() ){ // blah } george.eatCake(); { … } var george = new Person(); { … } @ph1 { … }
Slide 17
Slide 17 text
function Person(){ this.cakesEaten = 0; } ! Person.prototype.eatCake = function(){ this.cakesEaten += 1; }; ! Person.prototype.stillHungry = function(){ return this.cakesEaten < 3; }; @ph1 WITH PROTOTYPES / THIS
Slide 18
Slide 18 text
function Person(){ this.cakesEaten = 0; } ! Person.prototype.eatCake = function(){ this.cakesEaten += 1; }; ! Person.prototype.stillHungry = function(){ return this.cakesEaten < 3; }; @ph1 WITH PROTOTYPES / THIS
Slide 19
Slide 19 text
function createPerson(){ var cakesEaten = 0; return { eatCake: function(){ cakesEaten += 1; }, stillHungry: function(){ return cakesEaten < 3; } }; } function } ! Person }; ! Person }; @ph1 WITH CLOSURES
Slide 20
Slide 20 text
george = new Person() ! cakes = ["coffee","cheese","bundt","angel"] cakes.forEach(george.eatCake) @ph1
Slide 21
Slide 21 text
george = new Person() ! cakes = ["coffee","cheese","bundt","angel"] cakes.forEach(george.eatCake) george.stillHungry() // => true @ph1
Slide 22
Slide 22 text
george = new Person() ! cakes = ["coffee","cheese","bundt","angel"] cakes.forEach(george.eatCake) george.stillHungry() george.cakesEaten // => true // => 0 @ph1
Slide 23
Slide 23 text
george = createPerson() ! cakes = ["coffee","cheese","bundt","angel"] cakes.forEach(george.eatCake) george.stillHungry() // => false @ph1
Slide 24
Slide 24 text
this @ph1
Slide 25
Slide 25 text
17 @ph1
Slide 26
Slide 26 text
level up! @ph1
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
thanks! Pete Hodgson @ph1
[email protected]
slides: http://bitly.com/differentjs