Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Leveling Up at
JavaScript
Who am I?
• Developer Advocate for IBM
• MobileFirst, Cordova, Ionic,
HTML5, Kittens
• Blogging at
raymondcamden.com
• Twe...
The Problem
(one of many)
The Problem
The Problem
The Problem
The Problem
The Problem
My Goal
My Goal
1. Organization
PRO TIP 1: STOP
PUTTING ALL YOUR JS
ON TOP OF THE PAGE!
<html>
<head>
<script>
function omgPonies() {
//250 lines of PONIES!
}
</script>
</head>
<body>
<!-- lots of layout, proba...
<html>
<head>
<script src="ponies.js"></script>
</head>
<body>
<!-- lots of layout, probably frames and
tables -->
</body>...
QUESTION: HOW DO
YOU KNOW WHEN YOUR
JS FILE IS TOO BIG?
QUESTION: HOW DO
YOU KNOW WHEN YOUR
JS FILE IS TOO BIG?
Answer: It already is.
Typical Web App
Typical Web App
• Code to do DOM crap
Typical Web App
• Code to do DOM crap
• Code to hit the server and get crap
Typical Web App
• Code to do DOM crap
• Code to hit the server and get crap
• Code to call other libraries
Typical Web App
• Code to do DOM crap
• Code to hit the server and get crap
• Code to call other libraries
• Whole section...
Solution:
Frameworks!
You have options...
You have options...
Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, YUI, Agility.js,
Knockback.js, CanJS, Maria, Polym...
Design Patterns
var c = new Car();
c.startEngine();
c.drive();
c.soNotRealistic();
The Module Pattern
• Creates a "package" for your code
• Explicitly allows for public (exposed) and private
methods
• Simp...
var someModule = (function() {
//stuff here
}());
var someModule = (function() {
//stuff here
}());
var someModule = (function() {
//stuff here
}());
var someModule = (function() {
//stuff here
}());
var someModule = (function() {
//stuff here
}());
var someModule = (function() {
var counter = 0;
return {
incrementCounter: function () {
return counter++;
},
resetCounter...
Demo
2. Linting
This is linting!
This is linting!
This is linting!
This is linting!
This is linting!
Use ===!!!
Don't pollute the global scope!
Use semicolons!
You know you rename a
function and tell yourself
you're going to fix it later?
You know you define a function
to accept two arguments and
end up only ever using one?
You know how you write
really stupid code
sometimes?
Linting helps with that!
Option One
Option One
• JSLint
Option One
• JSLint
• "Warning: JSLint will hurt your feelings."
Option One
• JSLint
• "Warning: JSLint will hurt your feelings."
• Available at jslint.com, and in many editors
Option Two
Option Two
• JSHint
Option Two
• JSHint
• "It is quickly transforming from a tool that helps
developers to prevent bugs to a tool that makes
s...
Option Two
• JSHint
• "It is quickly transforming from a tool that helps
developers to prevent bugs to a tool that makes
s...
Option Two
• JSHint
• "It is quickly transforming from a tool that helps
developers to prevent bugs to a tool that makes
s...
Demo
3. Testing
A quick diversion
(no kittens, honest)
So yeah - testing good
Making Testing Easier
Making Testing Easier
• Multiple options (I like Jasmine)
Making Testing Easier
• Multiple options (I like Jasmine)
• Good editors support this out of the box
Making Testing Easier
• Multiple options (I like Jasmine)
• Good editors support this out of the box
• Automation tools su...
Demo
4. Performance and
Debugging
Dev Tools
Dev Tools
• Browser's default behavior is to do nothing
Dev Tools
• Browser's default behavior is to do nothing
• Run with your tools open, pretty much 100% of
the time
Dev Tools
• Browser's default behavior is to do nothing
• Run with your tools open, pretty much 100% of
the time
• USE MOR...
5. Learning More
Where to focus
Where to focus
• Sites that can teach you X
Where to focus
• Sites that can teach you X
• Knowing Y exists
Where to focus
• Sites that can teach you X
• Knowing Y exists
• Figuring out when you don't need to give a crap
about Z
Learning
Learning
• Mozilla Developer Network (google: mdn x)
Learning
• Mozilla Developer Network (google: mdn x)
• CodeSchool
Learning
• Mozilla Developer Network (google: mdn x)
• CodeSchool
• Kahn Academy
Discovering
Discovering
• Cooper Press newsletters (cooperpress.com)
Discovering
• Cooper Press newsletters (cooperpress.com)
• JavaScript Weekly, HTML5 Weekly, Mobile
Weekly (no Kitten Weekl...
Leveling Up at JavaScript
Leveling Up at JavaScript
Leveling Up at JavaScript
Leveling Up at JavaScript
Leveling Up at JavaScript
Leveling Up at JavaScript
Leveling Up at JavaScript
Leveling Up at JavaScript
Leveling Up at JavaScript
Leveling Up at JavaScript
Leveling Up at JavaScript
Upcoming SlideShare
Loading in …5
×

Leveling Up at JavaScript

2,031 views

Published on

My presentation on how I tried to suck less at JavaScript.

Published in: Internet

Leveling Up at JavaScript

  1. 1. Leveling Up at JavaScript
  2. 2. Who am I? • Developer Advocate for IBM • MobileFirst, Cordova, Ionic, HTML5, Kittens • Blogging at raymondcamden.com • Tweeting at @raymondcamden
  3. 3. The Problem (one of many)
  4. 4. The Problem
  5. 5. The Problem
  6. 6. The Problem
  7. 7. The Problem
  8. 8. The Problem
  9. 9. My Goal
  10. 10. My Goal
  11. 11. 1. Organization
  12. 12. PRO TIP 1: STOP PUTTING ALL YOUR JS ON TOP OF THE PAGE!
  13. 13. <html> <head> <script> function omgPonies() { //250 lines of PONIES! } </script> </head> <body> <!-- lots of layout, probably frames and tables --> </body> </html>
  14. 14. <html> <head> <script src="ponies.js"></script> </head> <body> <!-- lots of layout, probably frames and tables --> </body> </html>
  15. 15. QUESTION: HOW DO YOU KNOW WHEN YOUR JS FILE IS TOO BIG?
  16. 16. QUESTION: HOW DO YOU KNOW WHEN YOUR JS FILE IS TOO BIG? Answer: It already is.
  17. 17. Typical Web App
  18. 18. Typical Web App • Code to do DOM crap
  19. 19. Typical Web App • Code to do DOM crap • Code to hit the server and get crap
  20. 20. Typical Web App • Code to do DOM crap • Code to hit the server and get crap • Code to call other libraries
  21. 21. Typical Web App • Code to do DOM crap • Code to hit the server and get crap • Code to call other libraries • Whole section to put those giant dialogs on front of the screen asking you to "like" the site even though all it does is cause EVERYONE PURE RAGE!
  22. 22. Solution:
  23. 23. Frameworks!
  24. 24. You have options...
  25. 25. You have options... Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, YUI, Agility.js, Knockback.js, CanJS, Maria, Polymer, React, cujoJS, Montage, Sammy.js, Stapes, Epitome, soma.js, DUEL, Kendo UI, BUT WAIT, THERE'S MORE, PureMVC, Olives, PlastronJS, Dijon, rAppid.js, DefJS+ExtJS, Aria Templates, Enyo+Backbone.js, AngularJS (optimized), SAPIUI5, OMG REALLY?!?!, Exoskeleton, Atma.js, Ractive.js, ComponentJS, Vue.js, React+Backbone.js
  26. 26. Design Patterns
  27. 27. var c = new Car(); c.startEngine(); c.drive(); c.soNotRealistic();
  28. 28. The Module Pattern • Creates a "package" for your code • Explicitly allows for public (exposed) and private methods • Simple way to encapsulate a set of logic behind a variable
  29. 29. var someModule = (function() { //stuff here }());
  30. 30. var someModule = (function() { //stuff here }());
  31. 31. var someModule = (function() { //stuff here }());
  32. 32. var someModule = (function() { //stuff here }());
  33. 33. var someModule = (function() { //stuff here }());
  34. 34. var someModule = (function() { var counter = 0; return { incrementCounter: function () { return counter++; }, resetCounter: function () { console.log( "counter value prior to reset: " + counter ); counter = 0; } }; }());
  35. 35. Demo
  36. 36. 2. Linting
  37. 37. This is linting!
  38. 38. This is linting!
  39. 39. This is linting!
  40. 40. This is linting!
  41. 41. This is linting! Use ===!!! Don't pollute the global scope! Use semicolons!
  42. 42. You know you rename a function and tell yourself you're going to fix it later?
  43. 43. You know you define a function to accept two arguments and end up only ever using one?
  44. 44. You know how you write really stupid code sometimes?
  45. 45. Linting helps with that!
  46. 46. Option One
  47. 47. Option One • JSLint
  48. 48. Option One • JSLint • "Warning: JSLint will hurt your feelings."
  49. 49. Option One • JSLint • "Warning: JSLint will hurt your feelings." • Available at jslint.com, and in many editors
  50. 50. Option Two
  51. 51. Option Two • JSHint
  52. 52. Option Two • JSHint • "It is quickly transforming from a tool that helps developers to prevent bugs to a tool that makes sure you write your code like Douglas Crockford."
  53. 53. Option Two • JSHint • "It is quickly transforming from a tool that helps developers to prevent bugs to a tool that makes sure you write your code like Douglas Crockford." • "JSLint can suck it" - Brendan Eich
  54. 54. Option Two • JSHint • "It is quickly transforming from a tool that helps developers to prevent bugs to a tool that makes sure you write your code like Douglas Crockford." • "JSLint can suck it" - Brendan Eich • Available at jshint.com, and in many editors
  55. 55. Demo
  56. 56. 3. Testing
  57. 57. A quick diversion (no kittens, honest)
  58. 58. So yeah - testing good
  59. 59. Making Testing Easier
  60. 60. Making Testing Easier • Multiple options (I like Jasmine)
  61. 61. Making Testing Easier • Multiple options (I like Jasmine) • Good editors support this out of the box
  62. 62. Making Testing Easier • Multiple options (I like Jasmine) • Good editors support this out of the box • Automation tools support it
  63. 63. Demo
  64. 64. 4. Performance and Debugging
  65. 65. Dev Tools
  66. 66. Dev Tools • Browser's default behavior is to do nothing
  67. 67. Dev Tools • Browser's default behavior is to do nothing • Run with your tools open, pretty much 100% of the time
  68. 68. Dev Tools • Browser's default behavior is to do nothing • Run with your tools open, pretty much 100% of the time • USE MORE THAN ONE!
  69. 69. 5. Learning More
  70. 70. Where to focus
  71. 71. Where to focus • Sites that can teach you X
  72. 72. Where to focus • Sites that can teach you X • Knowing Y exists
  73. 73. Where to focus • Sites that can teach you X • Knowing Y exists • Figuring out when you don't need to give a crap about Z
  74. 74. Learning
  75. 75. Learning • Mozilla Developer Network (google: mdn x)
  76. 76. Learning • Mozilla Developer Network (google: mdn x) • CodeSchool
  77. 77. Learning • Mozilla Developer Network (google: mdn x) • CodeSchool • Kahn Academy
  78. 78. Discovering
  79. 79. Discovering • Cooper Press newsletters (cooperpress.com)
  80. 80. Discovering • Cooper Press newsletters (cooperpress.com) • JavaScript Weekly, HTML5 Weekly, Mobile Weekly (no Kitten Weekly - shame)

×