Better JavaScripting: Web Dev Conf 2012

Better JavaScripting: Web Dev Conf 2012

Rambles and rants about writing better JavaScript.

Aea964cf59c0c81fff752896f070cbbb?s=128

Jack Franklin

October 19, 2012
Tweet

Transcript

  1. #webdevconf BETTER JAVASCRIPT Jack Franklin WDC 2012 1 Monday, 22

    October 12
  2. #webdevconf WHO IS THIS GUY? Student at the University of

    Bath Developer for Kainos.com Blogger at javascriptplayground.com (Soon to be) Author of “Beginning jQuery” Twitterer @Jack_Franklin 2 Monday, 22 October 12
  3. #webdevconf BUT FIRST! A competition 3 Monday, 22 October 12

  4. #webdevconf to win a digital copy of “Beginning jQuery” tweet

    your favourite, clean, joke with the hashtag #wdcjack and I’ll pick a favourite at the end of the talk 4 Monday, 22 October 12
  5. #webdevconf Better JavaScripting? 5 Monday, 22 October 12

  6. #webdevconf Using tools to do as much for you as

    they can Not relying on 3rd party code / plugins Getting your hands dirty 6 Monday, 22 October 12
  7. #webdevconf DEVELOPERS ARE LAZY and that’s a good thing! sometimes

    we need to be lazy and let tools do stuff for us and other times we need to get down and dirty with the code 7 Monday, 22 October 12
  8. #webdevconf A LITTLE HISTORY I used to go on and

    on (and on) about optimisations this.id instead of $(this).attr(“id”) 8 Monday, 22 October 12
  9. #webdevconf 9 Monday, 22 October 12

  10. #webdevconf Better JavaScripting isn’t about those micro-optimisations it’s about writing

    better JavaScript that will probably be more efficient too 10 Monday, 22 October 12
  11. #webdevconf .someDiv { background-color: red; } .someDiv { color: blue;

    } .someDiv { padding: 10px; } you don’t write CSS like this... 11 Monday, 22 October 12
  12. #webdevconf $(".someDiv").css("color", "blue"); $(".someDiv").attr("title", "hello"); $(".someDiv").text("Hello WDC12"); ...but you do

    write your JavaScript like this. 12 Monday, 22 October 12
  13. #webdevconf 13 Monday, 22 October 12

  14. #webdevconf Okay, so perhaps I am over-exaggerating slightly.... 14 Monday,

    22 October 12
  15. #webdevconf but I've seen folks pay such attention and create

    beautifully maintained, structured CSS 15 Monday, 22 October 12
  16. #webdevconf and treat their JavaScript file like a black box

    to paste code snippets that might work 16 Monday, 22 October 12
  17. #webdevconf organised JavaScript = better JavaScript 17 Monday, 22 October

    12
  18. #webdevconf var div = $(".someDiv"); div.chain().stuff().lots(); But I'm bored about

    talking about this kind of stuff, and I bet you're bored of listening to it. 18 WE KNOW THE BASICS Monday, 22 October 12
  19. #webdevconf 19 Monday, 22 October 12

  20. #webdevconf so here’s some of the things I think help

    you write better, more efficient and more maintainable JavaScript (controversial opinions to follow) 20 Monday, 22 October 12
  21. #webdevconf either stop using plugins or get comfortable editing plugins

    21 Monday, 22 October 12
  22. #webdevconf return this.each(function() { var elem = $(this), text =

    elem.text(), newElem = $("<" + opts.outputElem + "/>", { "class": opts.outputClass, text: text }).insertAfter(opts.insertAfter); }); 22 Monday, 22 October 12
  23. #webdevconf jQuery isn’t as complicated as people imagine it’s one

    of the most self-documenting libraries out there 23 Monday, 22 October 12
  24. #webdevconf fadeOut() slideDown() .on(“click”, function() {}) $(“#something”); css() attr() 24

    Monday, 22 October 12
  25. #webdevconf stop relying on GUIs and use the command line

    25 Monday, 22 October 12
  26. #webdevconf it’s really tricky to break something from the command

    line start slowly, read tutorials, google when you’re unsure and never just sudo to see if it works 26 Monday, 22 October 12
  27. #webdevconf tools for JS that are CLI only are becoming

    common Node, npm Grunt, Yeoman, Mocha, Bower these tools save a lot of time and are CLI exclusive 27 Monday, 22 October 12
  28. #webdevconf the npm contains some amazing tools serve, nodefetch (mine!),

    Yeoman, Grunt, nodemon to name just a few 28 Monday, 22 October 12
  29. #webdevconf you can still use GUIs but I find them

    too “black boxey” 29 Monday, 22 October 12
  30. #webdevconf get to know the developer tools I prefer Google

    Chrome 30 Monday, 22 October 12
  31. #webdevconf 31 Monday, 22 October 12

  32. #webdevconf debug with console.log edit CSS add breakpoints edit HTML

    run JS in the console 32 Monday, 22 October 12
  33. #webdevconf learn to understand JavaScript errors 33 Monday, 22 October

    12
  34. #webdevconf Uncaught ReferenceError: a is not defined 34 Monday, 22

    October 12
  35. #webdevconf Uncaught TypeError: Cannot read property '2' of null 35

    Monday, 22 October 12
  36. #webdevconf once you get more familiar with errors you fix

    them quicker and invoke them less often 36 Monday, 22 October 12
  37. #webdevconf use a code quality checker known as a code

    linter 37 Monday, 22 October 12
  38. #webdevconf I like JSHint check for errors before running your

    code great for catching typos, missing semi-colons and so on 38 Monday, 22 October 12
  39. #webdevconf start organising your JS you split up your CSS

    into multiple files (even more so with Sass) you split up your JavaScript into multiple files...no? 39 Monday, 22 October 12
  40. #webdevconf this sucks once you get a few scripts <script

    src="file1.js"></script> <script src="file2.js"></script> <script src="file3.js"></script> <script src="file4.js"></script> <script src="file5.js"></script> 40 Monday, 22 October 12
  41. #webdevconf multiple scripts = multiple HTTP requests which are blocking

    page rendering delayed = site slow to visitors 41 Monday, 22 October 12
  42. #webdevconf make use of script loaders load in scripts asynchronously,

    in parallel non-blocking, conditional loading Require JS, Yepnope 42 Monday, 22 October 12
  43. #webdevconf next problem is dependency management scripts rely on each

    other how to manage this to make sure each script has the others it depends on loaded first? 43 Monday, 22 October 12
  44. #webdevconf you could personally make sure the order of your

    script tags is as it should be but I’m a developer, and I’m lazy 44 Monday, 22 October 12
  45. #webdevconf a great library for this is Require JS it

    deals with loading your scripts but also with loading them to make sure all scripts that require others are loaded in the correct order 45 Monday, 22 October 12
  46. #webdevconf using Require JS you can also split your code

    up into modules keep separate functionality separate and modular load these through Require JS allows you to still manage dependencies 46 Monday, 22 October 12
  47. #webdevconf sometimes you need something more than all of this

    a build script 47 Monday, 22 October 12
  48. #webdevconf a build tool can compile your Sass/LESS/CoffeeScript/HAML into CSS/JavaScript/HTML

    and then combine multiple files into one minified version it can also run tests, run code quality checks, and anything else you might need Grunt (gruntjs.com) is particularly awesome in this regard 48 Monday, 22 October 12
  49. #webdevconf TO SUMMARISE either don’t use plugins, or be comfortable

    editing get to know the command line use libraries & tools like Grunt to do work for you Require JS for script and dependency management build tools because we’re lazy developers 49 Monday, 22 October 12
  50. #webdevconf COMPETITION! you’ve got till the end of Q&A to

    get your jokes in to win a copy of “Beginning jQuery” hashtag #wdcjack 50 Monday, 22 October 12
  51. #webdevconf QUESTIONS? javascriptplayground.com jackfranklin.co.uk @Jack_Franklin 51 Monday, 22 October 12