Upgrade to Pro — share decks privately, control downloads, hide ads and more …

You Can't Fear JavaScript Anymore

You Can't Fear JavaScript Anymore

Presented at GRDevDay '11.

Daniel Morrison

November 05, 2011
Tweet

More Decks by Daniel Morrison

Other Decks in Programming

Transcript

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

    View full-size slide

  2. Perceived Problems
    Saturday, November 5, 11

    View full-size slide

  3. Perceived Problems
    (Excuses)
    Saturday, November 5, 11

    View full-size slide

  4. “JavaScript Sucks”
    Saturday, November 5, 11

    View full-size slide

  5. “Too many Frameworks”
    Saturday, November 5, 11

    View full-size slide

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

    View full-size slide

  7. “Browser support sucks”
    Saturday, November 5, 11

    View full-size slide

  8. “Too Slow”
    Saturday, November 5, 11

    View full-size slide

  9. “Not Object Oriented”
    Saturday, November 5, 11

    View full-size slide

  10. Real Problems
    Saturday, November 5, 11

    View full-size slide

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

    View full-size slide

  12. The Copy Problem
    Saturday, November 5, 11

    View full-size slide

  13. How do I debug?
    Saturday, November 5, 11

    View full-size slide

  14. 13
    Saturday, November 5, 11

    View full-size slide

  15. 13
    Wha?!?
    Saturday, November 5, 11

    View full-size slide

  16. Messy
    Saturday, November 5, 11

    View full-size slide

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

    View full-size slide

  18. How do I test?
    Saturday, November 5, 11

    View full-size slide

  19. Solutions
    Saturday, November 5, 11

    View full-size slide

  20. Learn
    Saturday, November 5, 11

    View full-size slide

  21. Saturday, November 5, 11

    View full-size slide

  22. Saturday, November 5, 11

    View full-size slide

  23. Standards
    Saturday, November 5, 11

    View full-size slide

  24. ECMAScript
    Saturday, November 5, 11

    View full-size slide

  25. The DOM
    Saturday, November 5, 11

    View full-size slide

  26. 24
    Saturday, November 5, 11

    View full-size slide

  27. Code Conventions
    Saturday, November 5, 11

    View full-size slide

  28. Enforceable with JSLint
    Saturday, November 5, 11

    View full-size slide

  29. Saturday, November 5, 11

    View full-size slide

  30. Saturday, November 5, 11

    View full-size slide

  31. Documentation
    Saturday, November 5, 11

    View full-size slide

  32. Saturday, November 5, 11

    View full-size slide

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

    View full-size slide

  34. Language Features
    Saturday, November 5, 11

    View full-size slide

  35. Functional
    Saturday, November 5, 11

    View full-size slide

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

    View full-size slide

  37. Objects
    Saturday, November 5, 11

    View full-size slide

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

    View full-size slide

  39. JSON
    Saturday, November 5, 11

    View full-size slide

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

    View full-size slide

  41. Tools
    Saturday, November 5, 11

    View full-size slide

  42. FireBug
    Saturday, November 5, 11

    View full-size slide

  43. Web Inspector
    Saturday, November 5, 11

    View full-size slide

  44. IE Developer Tools
    Saturday, November 5, 11

    View full-size slide

  45. Frameworks
    Saturday, November 5, 11

    View full-size slide

  46. jQuery
    Saturday, November 5, 11

    View full-size slide

  47. Microframeworks
    Saturday, November 5, 11

    View full-size slide

  48. Spine.js
    Saturday, November 5, 11

    View full-size slide

  49. Saturday, November 5, 11

    View full-size slide

  50. Sugar.js
    Saturday, November 5, 11

    View full-size slide

  51. Saturday, November 5, 11

    View full-size slide

  52. Clean Code
    Saturday, November 5, 11

    View full-size slide

  53. Unobtrusive
    Saturday, November 5, 11

    View full-size slide

  54. Delete
    Saturday, November 5, 11

    View full-size slide

  55. Delete
    Delete
    Delete
    Delete
    Delete
    Delete
    Saturday, November 5, 11

    View full-size slide

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

    View full-size slide


  57.    Delete
       Delete
       Delete
       Delete

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

    View full-size slide

  58. Use JSLint
    All the Time
    Saturday, November 5, 11

    View full-size slide

  59. Saturday, November 5, 11

    View full-size slide

  60. Watch the Console
    Saturday, November 5, 11

    View full-size slide

  61. Saturday, November 5, 11

    View full-size slide

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

    View full-size slide

  63. Organize
    Saturday, November 5, 11

    View full-size slide

  64. then Concatenate
    Saturday, November 5, 11

    View full-size slide

  65. Don’t Optimize
    Prematurely
    Saturday, November 5, 11

    View full-size slide

  66. Test!
    Saturday, November 5, 11

    View full-size slide

  67. Unit Tests
    Saturday, November 5, 11

    View full-size slide

  68. QUnit
    Saturday, November 5, 11

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  71. Jasmine
    Saturday, November 5, 11

    View full-size slide

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

    View full-size slide

  73. Integration Tests
    Saturday, November 5, 11

    View full-size slide

  74. Cucumber
    Saturday, November 5, 11

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  77. Runs in the Browser
    Saturday, November 5, 11

    View full-size slide

  78. Next Steps
    Saturday, November 5, 11

    View full-size slide

  79. Compilers
    Saturday, November 5, 11

    View full-size slide

  80. Google’s
    Closure Compiler
    Saturday, November 5, 11

    View full-size slide

  81. Yahoo’s
    YUI Compressor
    Saturday, November 5, 11

    View full-size slide

  82. CoffeeScript
    Saturday, November 5, 11

    View full-size slide

  83. Compiles to JavaScript
    Saturday, November 5, 11

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  86. Passes JSLint
    Saturday, November 5, 11

    View full-size slide

  87. Classes
    Saturday, November 5, 11

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  90. Node.js
    Saturday, November 5, 11

    View full-size slide

  91. Evented IO
    Saturday, November 5, 11

    View full-size slide

  92. Runs on V8
    Saturday, November 5, 11

    View full-size slide

  93. TL;DR
    Saturday, November 5, 11

    View full-size slide

  94. Learn to Love JS
    Saturday, November 5, 11

    View full-size slide

  95. Never use Inline Scripts
    Saturday, November 5, 11

    View full-size slide

  96. Use JSLint
    Saturday, November 5, 11

    View full-size slide

  97. Organize your Code
    Saturday, November 5, 11

    View full-size slide

  98. Test. Seriously.
    Saturday, November 5, 11

    View full-size slide

  99. Have fun.
    Saturday, November 5, 11

    View full-size slide

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

    View full-size slide