You Can't Fear JavaScript Anymore

Presented at GRDevDay '11.

Transcript

1. You Can’t Fear JavaScript Anymore. Daniel Morrison Collective Idea Saturday, November 5, 11
2. Perceived Problems Saturday, November 5, 11
3. Perceived Problems (Excuses) Saturday, November 5, 11
4. “JavaScript Sucks” Saturday, November 5, 11
5. “Too many Frameworks” Saturday, November 5, 11
6. “I don’t do front-end” Saturday, November 5, 11
7. “Browser support sucks” Saturday, November 5, 11
8. “Too Slow” Saturday, November 5, 11
9. “Not Object Oriented” Saturday, November 5, 11
10. Real Problems Saturday, November 5, 11
11. Developers don’t learn JavaScript Saturday, November 5, 11
12. The Copy Problem Saturday, November 5, 11
13. How do I debug? Saturday, November 5, 11
14. 13 Saturday, November 5, 11
15. 13 Wha?!? Saturday, November 5, 11
16. Messy Saturday, November 5, 11
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
18. How do I test? Saturday, November 5, 11
19. Solutions Saturday, November 5, 11
20. Learn Saturday, November 5, 11
21. Saturday, November 5, 11
22. Saturday, November 5, 11
23. Standards Saturday, November 5, 11
24. ECMAScript Saturday, November 5, 11
25. The DOM Saturday, November 5, 11
26. 24 Saturday, November 5, 11
27. Code Conventions Saturday, November 5, 11
28. Enforceable with JSLint Saturday, November 5, 11
29. Saturday, November 5, 11
30. Saturday, November 5, 11
31. Documentation Saturday, November 5, 11
32. Saturday, November 5, 11
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
34. Language Features Saturday, November 5, 11
35. Functional Saturday, November 5, 11
36. var  crazyTalk  =  function()  {    alert('JavaScript  functions  are  Crazy!'); } $('a#crazy-­‐talk').on('click',  crazyTalk); Saturday, November 5, 11
37. Objects Saturday, November 5, 11
38. var  person  =  {    name:  "Bob",    age:  47,    children:  ["Alice",  "Ted",  "Carol"] } Saturday, November 5, 11
39. JSON Saturday, November 5, 11
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
41. Tools Saturday, November 5, 11
42. FireBug Saturday, November 5, 11
43. Web Inspector Saturday, November 5, 11
44. IE Developer Tools Saturday, November 5, 11
45. Frameworks Saturday, November 5, 11
46. jQuery Saturday, November 5, 11
47. Microframeworks Saturday, November 5, 11
48. Spine.js Saturday, November 5, 11
49. Saturday, November 5, 11
50. Sugar.js Saturday, November 5, 11
51. Saturday, November 5, 11
52. Clean Code Saturday, November 5, 11
53. Unobtrusive Saturday, November 5, 11
54. <a  href="/items/5/delete"  onclick="return  confirm('Are  you  sure?')">Delete</a> Saturday, November 5, 11
55. <a  href="/items/5/delete"  onclick="return  confirm('Are  you  sure?')">Delete</a> <a  href="/items/6/delete"  onclick="return  confirm('Are  you  sure?')">Delete</a> <a  href="/items/7/delete"  onclick="return  confirm('Are  you  sure?')">Delete</a> <a  href="/items/8/delete"  onclick="return  confirm('Are  you  sure?')">Delete</a> <a  href="/items/9/delete"  onclick="return  confirm('Are  you  sure?')">Delete</a> <a  href="/items/10/delete"  onclick="return  confirm('Are  you  sure?')">Delete</a> Saturday, November 5, 11
56. <a  href="/items/5/delete"  class="delete">Delete</a> //  In  external  file $('a.delete').on('click',  function()  {    return  confirm('Are  you  sure?'); }); Saturday, November 5, 11
57. <div  class="delete">    <a  href="/items/5/delete">Delete</a>    <a  href="/items/6/delete">Delete</a>    <a  href="/items/7/delete">Delete</a>    <a  href="/items/8/delete">Delete</a> </div> //  In  external  file $('.delete  a').on('click',  function()  {    return  confirm('Are  you  sure?'); }); Saturday, November 5, 11
58. Use JSLint All the Time Saturday, November 5, 11
59. Saturday, November 5, 11
60. Watch the Console Saturday, November 5, 11
61. Saturday, November 5, 11
62. console.log(‘help!’) Saturday, November 5, 11
63. Organize Saturday, November 5, 11
64. then Concatenate Saturday, November 5, 11
65. Don’t Optimize Prematurely Saturday, November 5, 11
66. Test! Saturday, November 5, 11
67. Unit Tests Saturday, November 5, 11
68. QUnit Saturday, November 5, 11
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
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
71. Jasmine Saturday, November 5, 11
72. describe("Hello  world",  function()  {    it("says  hello",  function()  {        expect(helloWorld()).toEqual("Hello  world!");    }); }); Saturday, November 5, 11
73. Integration Tests Saturday, November 5, 11
74. Cucumber Saturday, November 5, 11
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
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
77. Runs in the Browser Saturday, November 5, 11
78. Next Steps Saturday, November 5, 11
79. Compilers Saturday, November 5, 11
80. Google’s Closure Compiler Saturday, November 5, 11
81. Yahoo’s YUI Compressor Saturday, November 5, 11
82. CoffeeScript Saturday, November 5, 11
83. Compiles to JavaScript Saturday, November 5, 11
84. fill  =  (container,  liquid  =  "coffee")  -­‐>    "Filling  the  #{container}  with  #{liquid}..." Saturday, November 5, 11
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
86. Passes JSLint Saturday, November 5, 11
87. Classes Saturday, November 5, 11
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
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
90. Node.js Saturday, November 5, 11
91. Evented IO Saturday, November 5, 11
92. Runs on V8 Saturday, November 5, 11
93. TL;DR Saturday, November 5, 11
94. Learn to Love JS Saturday, November 5, 11
95. Never use Inline Scripts Saturday, November 5, 11
96. Use JSLint Saturday, November 5, 11
97. Organize your Code Saturday, November 5, 11
98. Test. Seriously. Saturday, November 5, 11
99. Have fun. Saturday, November 5, 11
100. Daniel Morrison collectiveidea.com @danielmorrison @collectiveidea Saturday, November 5, 11