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 Slide

  2. Perceived Problems
    Saturday, November 5, 11

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. Real Problems
    Saturday, November 5, 11

    View Slide

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

    View Slide

  12. The Copy Problem
    Saturday, November 5, 11

    View Slide

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

    View Slide

  14. 13
    Saturday, November 5, 11

    View Slide

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

    View Slide

  16. Messy
    Saturday, November 5, 11

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

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

    View Slide

  19. Solutions
    Saturday, November 5, 11

    View Slide

  20. Learn
    Saturday, November 5, 11

    View Slide

  21. Saturday, November 5, 11

    View Slide

  22. Saturday, November 5, 11

    View Slide

  23. Standards
    Saturday, November 5, 11

    View Slide

  24. ECMAScript
    Saturday, November 5, 11

    View Slide

  25. The DOM
    Saturday, November 5, 11

    View Slide

  26. 24
    Saturday, November 5, 11

    View Slide

  27. Code Conventions
    Saturday, November 5, 11

    View Slide

  28. Enforceable with JSLint
    Saturday, November 5, 11

    View Slide

  29. Saturday, November 5, 11

    View Slide

  30. Saturday, November 5, 11

    View Slide

  31. Documentation
    Saturday, November 5, 11

    View Slide

  32. Saturday, November 5, 11

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

  34. Language Features
    Saturday, November 5, 11

    View Slide

  35. Functional
    Saturday, November 5, 11

    View Slide

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

    View Slide

  37. Objects
    Saturday, November 5, 11

    View Slide

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

    View Slide

  39. JSON
    Saturday, November 5, 11

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

  41. Tools
    Saturday, November 5, 11

    View Slide

  42. FireBug
    Saturday, November 5, 11

    View Slide

  43. Web Inspector
    Saturday, November 5, 11

    View Slide

  44. IE Developer Tools
    Saturday, November 5, 11

    View Slide

  45. Frameworks
    Saturday, November 5, 11

    View Slide

  46. jQuery
    Saturday, November 5, 11

    View Slide

  47. Microframeworks
    Saturday, November 5, 11

    View Slide

  48. Spine.js
    Saturday, November 5, 11

    View Slide

  49. Saturday, November 5, 11

    View Slide

  50. Sugar.js
    Saturday, November 5, 11

    View Slide

  51. Saturday, November 5, 11

    View Slide

  52. Clean Code
    Saturday, November 5, 11

    View Slide

  53. Unobtrusive
    Saturday, November 5, 11

    View Slide

  54. Delete
    Saturday, November 5, 11

    View Slide

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

    View Slide

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

    View Slide


  57.    Delete
       Delete
       Delete
       Delete

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

    View Slide

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

    View Slide

  59. Saturday, November 5, 11

    View Slide

  60. Watch the Console
    Saturday, November 5, 11

    View Slide

  61. Saturday, November 5, 11

    View Slide

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

    View Slide

  63. Organize
    Saturday, November 5, 11

    View Slide

  64. then Concatenate
    Saturday, November 5, 11

    View Slide

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

    View Slide

  66. Test!
    Saturday, November 5, 11

    View Slide

  67. Unit Tests
    Saturday, November 5, 11

    View Slide

  68. QUnit
    Saturday, November 5, 11

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

  71. Jasmine
    Saturday, November 5, 11

    View Slide

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

    View Slide

  73. Integration Tests
    Saturday, November 5, 11

    View Slide

  74. Cucumber
    Saturday, November 5, 11

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

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

    View Slide

  78. Next Steps
    Saturday, November 5, 11

    View Slide

  79. Compilers
    Saturday, November 5, 11

    View Slide

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

    View Slide

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

    View Slide

  82. CoffeeScript
    Saturday, November 5, 11

    View Slide

  83. Compiles to JavaScript
    Saturday, November 5, 11

    View Slide

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

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

  86. Passes JSLint
    Saturday, November 5, 11

    View Slide

  87. Classes
    Saturday, November 5, 11

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

  90. Node.js
    Saturday, November 5, 11

    View Slide

  91. Evented IO
    Saturday, November 5, 11

    View Slide

  92. Runs on V8
    Saturday, November 5, 11

    View Slide

  93. TL;DR
    Saturday, November 5, 11

    View Slide

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

    View Slide

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

    View Slide

  96. Use JSLint
    Saturday, November 5, 11

    View Slide

  97. Organize your Code
    Saturday, November 5, 11

    View Slide

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

    View Slide

  99. Have fun.
    Saturday, November 5, 11

    View Slide

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

    View Slide