Slide 1

Slide 1 text

You Can’t Fear JavaScript Anymore. Daniel Morrison Collective Idea Saturday, November 5, 11

Slide 2

Slide 2 text

Perceived Problems Saturday, November 5, 11

Slide 3

Slide 3 text

Perceived Problems (Excuses) Saturday, November 5, 11

Slide 4

Slide 4 text

“JavaScript Sucks” Saturday, November 5, 11

Slide 5

Slide 5 text

“Too many Frameworks” Saturday, November 5, 11

Slide 6

Slide 6 text

“I don’t do front-end” Saturday, November 5, 11

Slide 7

Slide 7 text

“Browser support sucks” Saturday, November 5, 11

Slide 8

Slide 8 text

“Too Slow” Saturday, November 5, 11

Slide 9

Slide 9 text

“Not Object Oriented” Saturday, November 5, 11

Slide 10

Slide 10 text

Real Problems Saturday, November 5, 11

Slide 11

Slide 11 text

Developers don’t learn JavaScript Saturday, November 5, 11

Slide 12

Slide 12 text

The Copy Problem Saturday, November 5, 11

Slide 13

Slide 13 text

How do I debug? Saturday, November 5, 11

Slide 14

Slide 14 text

13 Saturday, November 5, 11

Slide 15

Slide 15 text

13 Wha?!? Saturday, November 5, 11

Slide 16

Slide 16 text

Messy Saturday, November 5, 11

Slide 17

Slide 17 text

function  toggleBinder(){    showBinder  =  (showBinder  !=  false  ?   false  :  true  );    if(showBinder) {  myBinder.style.display="";} else{myBinder.style.display="none";} }function  toggleSound(){    pSound  =  (pSound  !=  false  ?  false  :   true  ); } Saturday, November 5, 11

Slide 18

Slide 18 text

How do I test? Saturday, November 5, 11

Slide 19

Slide 19 text

Solutions Saturday, November 5, 11

Slide 20

Slide 20 text

Learn Saturday, November 5, 11

Slide 21

Slide 21 text

Saturday, November 5, 11

Slide 22

Slide 22 text

Saturday, November 5, 11

Slide 23

Slide 23 text

Standards Saturday, November 5, 11

Slide 24

Slide 24 text

ECMAScript Saturday, November 5, 11

Slide 25

Slide 25 text

The DOM Saturday, November 5, 11

Slide 26

Slide 26 text

24 Saturday, November 5, 11

Slide 27

Slide 27 text

Code Conventions Saturday, November 5, 11

Slide 28

Slide 28 text

Enforceable with JSLint Saturday, November 5, 11

Slide 29

Slide 29 text

Saturday, November 5, 11

Slide 30

Slide 30 text

Saturday, November 5, 11

Slide 31

Slide 31 text

Documentation Saturday, November 5, 11

Slide 32

Slide 32 text

Saturday, November 5, 11

Slide 33

Slide 33 text

Who Should Read This Guide The reader of the Gecko DOM Reference is a web developer or savvy web user who knows something about how web pages are constructed. Saturday, November 5, 11

Slide 34

Slide 34 text

Language Features Saturday, November 5, 11

Slide 35

Slide 35 text

Functional Saturday, November 5, 11

Slide 36

Slide 36 text

var  crazyTalk  =  function()  {    alert('JavaScript  functions  are  Crazy!'); } $('a#crazy-­‐talk').on('click',  crazyTalk); Saturday, November 5, 11

Slide 37

Slide 37 text

Objects Saturday, November 5, 11

Slide 38

Slide 38 text

var  person  =  {    name:  "Bob",    age:  47,    children:  ["Alice",  "Ted",  "Carol"] } Saturday, November 5, 11

Slide 39

Slide 39 text

JSON Saturday, November 5, 11

Slide 40

Slide 40 text

var  conference  =  {    capacity:  200,    attendees:  [],    addPerson:  function(person)  {        if  (this.attendees.length  <  this.capacity)  {            this.attendees.push(person);        }    },        announce:  function()  {        alert('Attendee  count  is  '  +  this.attendees.length);    } } conference.addPerson(person); Saturday, November 5, 11

Slide 41

Slide 41 text

Tools Saturday, November 5, 11

Slide 42

Slide 42 text

FireBug Saturday, November 5, 11

Slide 43

Slide 43 text

Web Inspector Saturday, November 5, 11

Slide 44

Slide 44 text

IE Developer Tools Saturday, November 5, 11

Slide 45

Slide 45 text

Frameworks Saturday, November 5, 11

Slide 46

Slide 46 text

jQuery Saturday, November 5, 11

Slide 47

Slide 47 text

Microframeworks Saturday, November 5, 11

Slide 48

Slide 48 text

Spine.js Saturday, November 5, 11

Slide 49

Slide 49 text

Saturday, November 5, 11

Slide 50

Slide 50 text

Sugar.js Saturday, November 5, 11

Slide 51

Slide 51 text

Saturday, November 5, 11

Slide 52

Slide 52 text

Clean Code Saturday, November 5, 11

Slide 53

Slide 53 text

Unobtrusive Saturday, November 5, 11

Slide 54

Slide 54 text

Delete Saturday, November 5, 11

Slide 55

Slide 55 text

Delete Delete Delete Delete Delete Delete Saturday, November 5, 11

Slide 56

Slide 56 text

Delete //  In  external  file $('a.delete').on('click',  function()  {    return  confirm('Are  you  sure?'); }); Saturday, November 5, 11

Slide 57

Slide 57 text

   Delete    Delete    Delete    Delete
//  In  external  file $('.delete  a').on('click',  function()  {    return  confirm('Are  you  sure?'); }); Saturday, November 5, 11

Slide 58

Slide 58 text

Use JSLint All the Time Saturday, November 5, 11

Slide 59

Slide 59 text

Saturday, November 5, 11

Slide 60

Slide 60 text

Watch the Console Saturday, November 5, 11

Slide 61

Slide 61 text

Saturday, November 5, 11

Slide 62

Slide 62 text

console.log(‘help!’) Saturday, November 5, 11

Slide 63

Slide 63 text

Organize Saturday, November 5, 11

Slide 64

Slide 64 text

then Concatenate Saturday, November 5, 11

Slide 65

Slide 65 text

Don’t Optimize Prematurely Saturday, November 5, 11

Slide 66

Slide 66 text

Test! Saturday, November 5, 11

Slide 67

Slide 67 text

Unit Tests Saturday, November 5, 11

Slide 68

Slide 68 text

QUnit Saturday, November 5, 11

Slide 69

Slide 69 text

test("a  basic  test  example",  function()  {    ok(  true,  "this  test  is  fine"  );    var  value  =  "hello";    equal(  value,  "hello",  "We  expect  value  to  be  hello"  ); }); module("Module  A"); test("first  test  within  module",  function()  {    ok(  true,  "all  pass"  ); }); test("second  test  within  module",  function()  {    ok(  true,  "all  pass"  ); }); module("Module  B"); test("some  other  test",  function()  {    expect(2);    equal(  true,  false,  "failing  test"  );    equal(  true,  true,  "passing  test"  ); }); Saturday, November 5, 11

Slide 70

Slide 70 text

test("a  basic  test  example",  function()  {    ok(  true,  "this  test  is  fine"  );    var  value  =  "hello";    equal(  value,  "hello",  "We  expect  value  to  be  hello"  ); }); module("Module  A"); test("first  test  within  module",  function()  {    ok(  true,  "all  pass"  ); }); test("second  test  within  module",  function()  {    ok(  true,  "all  pass"  ); }); module("Module  B"); test("some  other  test",  function()  {    expect(2);    equal(  true,  false,  "failing  test"  );    equal(  true,  true,  "passing  test"  ); }); Saturday, November 5, 11

Slide 71

Slide 71 text

Jasmine Saturday, November 5, 11

Slide 72

Slide 72 text

describe("Hello  world",  function()  {    it("says  hello",  function()  {        expect(helloWorld()).toEqual("Hello  world!");    }); }); Saturday, November 5, 11

Slide 73

Slide 73 text

Integration Tests Saturday, November 5, 11

Slide 74

Slide 74 text

Cucumber Saturday, November 5, 11

Slide 75

Slide 75 text

Feature:  Purchasing  a  book    Scenario:  Ordering  a  book        When  I  go  to  the  home  page        And  I  follow  "Books"        And  I  follow  "Customize"        And  I  press  "Add  to  Cart"        And  I  select  "Standard  ($7.99)"  from  "Shipping"        And  I  press  "Checkout"        Then  I  should  see  "Order  Confirmation" Saturday, November 5, 11

Slide 76

Slide 76 text

When  /^(?:|I  )press  "([^"]*)"$/  do  |button|    click_button(button) end Then  /^(?:|I  )should  see  "([^"]*)"$/  do  |text|    assert  page.has_content?(text) end Saturday, November 5, 11

Slide 77

Slide 77 text

Runs in the Browser Saturday, November 5, 11

Slide 78

Slide 78 text

Next Steps Saturday, November 5, 11

Slide 79

Slide 79 text

Compilers Saturday, November 5, 11

Slide 80

Slide 80 text

Google’s Closure Compiler Saturday, November 5, 11

Slide 81

Slide 81 text

Yahoo’s YUI Compressor Saturday, November 5, 11

Slide 82

Slide 82 text

CoffeeScript Saturday, November 5, 11

Slide 83

Slide 83 text

Compiles to JavaScript Saturday, November 5, 11

Slide 84

Slide 84 text

fill  =  (container,  liquid  =  "coffee")  -­‐>    "Filling  the  #{container}  with  #{liquid}..." Saturday, November 5, 11

Slide 85

Slide 85 text

fill  =  (container,  liquid  =  "coffee")  -­‐>    "Filling  the  #{container}  with  #{liquid}..." var  fill; fill  =  function(container,  liquid)  {    if  (liquid  ==  null)  liquid  =  "coffee";    return  "Filling  the  "  +  container  +  "  with  "  +  liquid  +  "..."; }; Saturday, November 5, 11

Slide 86

Slide 86 text

Passes JSLint Saturday, November 5, 11

Slide 87

Slide 87 text

Classes Saturday, November 5, 11

Slide 88

Slide 88 text

class  Animal    constructor:  (@name)  -­‐>    move:  (meters)  -­‐>        alert  @name  +  "  moved  #{meters}m." class  Snake  extends  Animal    move:  -­‐>        alert  "Slithering..."        super  5 class  Horse  extends  Animal    move:  -­‐>        alert  "Galloping..."        super  45 sam  =  new  Snake  "Sammy  the  Python" tom  =  new  Horse  "Tommy  the  Palomino" sam.move() tom.move() Saturday, November 5, 11

Slide 89

Slide 89 text

class  Animal    constructor:  (@name)  -­‐>    move:  (meters)  -­‐>        alert  @name  +  "  moved  #{meters}m." class  Snake  extends  Animal    move:  -­‐>        alert  "Slithering..."        super  5 class  Horse  extends  Animal    move:  -­‐>        alert  "Galloping..."        super  45 sam  =  new  Snake  "Sammy  the  Python" tom  =  new  Horse  "Tommy  the  Palomino" sam.move() tom.move()        return  alert(this.name  +  ("  moved  "  +  meters  +  "m."));    };    return  Animal; })(); Snake  =  (function()  {    __extends(Snake,  Animal);    function  Snake()  {        Snake.__super__.constructor.apply(this,  arguments);    }    Snake.prototype.move  =  function()  {        alert("Slithering...");        return  Snake.__super__.move.call(this,  5);    };    return  Snake; })(); Horse  =  (function()  {    __extends(Horse,  Animal);    function  Horse()  {        Horse.__super__.constructor.apply(this,  arguments);    }    Horse.prototype.move  =  function()  {        alert("Galloping...");        return  Horse.__super__.move.call(this,  45);    };    return  Horse; })(); sam  =  new  Snake("Sammy  the  Python"); tom  =  new  Horse("Tommy  the  Palomino"); sam.move(); tom.move(); Saturday, November 5, 11

Slide 90

Slide 90 text

Node.js Saturday, November 5, 11

Slide 91

Slide 91 text

Evented IO Saturday, November 5, 11

Slide 92

Slide 92 text

Runs on V8 Saturday, November 5, 11

Slide 93

Slide 93 text

TL;DR Saturday, November 5, 11

Slide 94

Slide 94 text

Learn to Love JS Saturday, November 5, 11

Slide 95

Slide 95 text

Never use Inline Scripts Saturday, November 5, 11

Slide 96

Slide 96 text

Use JSLint Saturday, November 5, 11

Slide 97

Slide 97 text

Organize your Code Saturday, November 5, 11

Slide 98

Slide 98 text

Test. Seriously. Saturday, November 5, 11

Slide 99

Slide 99 text

Have fun. Saturday, November 5, 11

Slide 100

Slide 100 text

Daniel Morrison collectiveidea.com @danielmorrison @collectiveidea Saturday, November 5, 11