Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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