#webdevconf
BETTER JAVASCRIPT
Jack Franklin
WDC 2012
1
Monday, 22 October 12
Slide 2
Slide 2 text
#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
Slide 3
Slide 3 text
#webdevconf
BUT FIRST!
A competition
3
Monday, 22 October 12
Slide 4
Slide 4 text
#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
Slide 5
Slide 5 text
#webdevconf
Better JavaScripting?
5
Monday, 22 October 12
Slide 6
Slide 6 text
#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
Slide 7
Slide 7 text
#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
Slide 8
Slide 8 text
#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
Slide 9
Slide 9 text
#webdevconf
9
Monday, 22 October 12
Slide 10
Slide 10 text
#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
Slide 11
Slide 11 text
#webdevconf
.someDiv { background-color: red; }
.someDiv { color: blue; }
.someDiv { padding: 10px; }
you don’t write CSS like this...
11
Monday, 22 October 12
Slide 12
Slide 12 text
#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
Slide 13
Slide 13 text
#webdevconf
13
Monday, 22 October 12
Slide 14
Slide 14 text
#webdevconf
Okay, so perhaps I am over-exaggerating slightly....
14
Monday, 22 October 12
Slide 15
Slide 15 text
#webdevconf
but I've seen folks pay such attention and
create beautifully maintained, structured CSS
15
Monday, 22 October 12
Slide 16
Slide 16 text
#webdevconf
and treat their JavaScript file like a black box to paste code snippets
that might work
16
Monday, 22 October 12
#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
Slide 19
Slide 19 text
#webdevconf
19
Monday, 22 October 12
Slide 20
Slide 20 text
#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
Slide 21
Slide 21 text
#webdevconf
either stop using plugins
or
get comfortable editing plugins
21
Monday, 22 October 12
Slide 22
Slide 22 text
#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
Slide 23
Slide 23 text
#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
#webdevconf
stop relying on GUIs
and use the command line
25
Monday, 22 October 12
Slide 26
Slide 26 text
#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
Slide 27
Slide 27 text
#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
Slide 28
Slide 28 text
#webdevconf
the npm contains some amazing tools
serve, nodefetch (mine!), Yeoman, Grunt, nodemon
to name just a few
28
Monday, 22 October 12
Slide 29
Slide 29 text
#webdevconf
you can still use GUIs
but I find them too “black boxey”
29
Monday, 22 October 12
Slide 30
Slide 30 text
#webdevconf
get to know the developer tools
I prefer Google Chrome
30
Monday, 22 October 12
Slide 31
Slide 31 text
#webdevconf
31
Monday, 22 October 12
Slide 32
Slide 32 text
#webdevconf
debug with console.log
edit CSS
add breakpoints
edit HTML
run JS in the console
32
Monday, 22 October 12
Slide 33
Slide 33 text
#webdevconf
learn to understand JavaScript errors
33
Monday, 22 October 12
Slide 34
Slide 34 text
#webdevconf
Uncaught ReferenceError: a is not defined
34
Monday, 22 October 12
Slide 35
Slide 35 text
#webdevconf
Uncaught TypeError: Cannot read property '2' of null
35
Monday, 22 October 12
Slide 36
Slide 36 text
#webdevconf
once you get more familiar with errors
you fix them quicker
and invoke them less often
36
Monday, 22 October 12
Slide 37
Slide 37 text
#webdevconf
use a code quality checker
known as a code linter
37
Monday, 22 October 12
Slide 38
Slide 38 text
#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
Slide 39
Slide 39 text
#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
Slide 40
Slide 40 text
#webdevconf
this sucks once you get a few scripts
40
Monday, 22 October 12
Slide 41
Slide 41 text
#webdevconf
multiple scripts = multiple HTTP requests
which are blocking
page rendering delayed = site slow to visitors
41
Monday, 22 October 12
Slide 42
Slide 42 text
#webdevconf
make use of script loaders
load in scripts asynchronously, in parallel
non-blocking, conditional loading
Require JS, Yepnope
42
Monday, 22 October 12
Slide 43
Slide 43 text
#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
Slide 44
Slide 44 text
#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
Slide 45
Slide 45 text
#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
Slide 46
Slide 46 text
#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
Slide 47
Slide 47 text
#webdevconf
sometimes you need something more than all of this
a build script
47
Monday, 22 October 12
Slide 48
Slide 48 text
#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
Slide 49
Slide 49 text
#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
Slide 50
Slide 50 text
#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
Slide 51
Slide 51 text
#webdevconf
QUESTIONS? javascriptplayground.com
jackfranklin.co.uk
@Jack_Franklin
51
Monday, 22 October 12