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

Better JavaScripting: Web Dev Conf 2012

Better JavaScripting: Web Dev Conf 2012

Rambles and rants about writing better JavaScript.

Jack Franklin

October 19, 2012
Tweet

More Decks by Jack Franklin

Other Decks in Technology

Transcript

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

    View full-size slide

  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

    View full-size slide

  3. #webdevconf
    BUT FIRST!
    A competition
    3
    Monday, 22 October 12

    View full-size slide

  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

    View full-size slide

  5. #webdevconf
    Better JavaScripting?
    5
    Monday, 22 October 12

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  9. #webdevconf
    9
    Monday, 22 October 12

    View full-size slide

  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

    View full-size slide

  11. #webdevconf
    .someDiv { background-color: red; }
    .someDiv { color: blue; }
    .someDiv { padding: 10px; }
    you don’t write CSS like this...
    11
    Monday, 22 October 12

    View full-size slide

  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

    View full-size slide

  13. #webdevconf
    13
    Monday, 22 October 12

    View full-size slide

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

    View full-size slide

  15. #webdevconf
    but I've seen folks pay such attention and
    create beautifully maintained, structured CSS
    15
    Monday, 22 October 12

    View full-size slide

  16. #webdevconf
    and treat their JavaScript file like a black box to paste code snippets
    that might work
    16
    Monday, 22 October 12

    View full-size slide

  17. #webdevconf
    organised JavaScript
    =
    better JavaScript
    17
    Monday, 22 October 12

    View full-size slide

  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

    View full-size slide

  19. #webdevconf
    19
    Monday, 22 October 12

    View full-size slide

  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

    View full-size slide

  21. #webdevconf
    either stop using plugins
    or
    get comfortable editing plugins
    21
    Monday, 22 October 12

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  24. #webdevconf
    fadeOut()
    slideDown()
    .on(“click”, function() {})
    $(“#something”);
    css()
    attr()
    24
    Monday, 22 October 12

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  28. #webdevconf
    the npm contains some amazing tools
    serve, nodefetch (mine!), Yeoman, Grunt, nodemon
    to name just a few
    28
    Monday, 22 October 12

    View full-size slide

  29. #webdevconf
    you can still use GUIs
    but I find them too “black boxey”
    29
    Monday, 22 October 12

    View full-size slide

  30. #webdevconf
    get to know the developer tools
    I prefer Google Chrome
    30
    Monday, 22 October 12

    View full-size slide

  31. #webdevconf
    31
    Monday, 22 October 12

    View full-size slide

  32. #webdevconf
    debug with console.log
    edit CSS
    add breakpoints
    edit HTML
    run JS in the console
    32
    Monday, 22 October 12

    View full-size slide

  33. #webdevconf
    learn to understand JavaScript errors
    33
    Monday, 22 October 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. #webdevconf
    once you get more familiar with errors
    you fix them quicker
    and invoke them less often
    36
    Monday, 22 October 12

    View full-size slide

  37. #webdevconf
    use a code quality checker
    known as a code linter
    37
    Monday, 22 October 12

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  40. #webdevconf
    this sucks once you get a few scripts





    40
    Monday, 22 October 12

    View full-size slide

  41. #webdevconf
    multiple scripts = multiple HTTP requests
    which are blocking
    page rendering delayed = site slow to visitors
    41
    Monday, 22 October 12

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  47. #webdevconf
    sometimes you need something more than all of this
    a build script
    47
    Monday, 22 October 12

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  51. #webdevconf
    QUESTIONS? javascriptplayground.com
    jackfranklin.co.uk
    @Jack_Franklin
    51
    Monday, 22 October 12

    View full-size slide