From JabbaScript
To JavaScript

matth@catalyst.net.nz

1. Workflow

2. Making It Fast

3. Trivia

1. Workflow

Don't Repeat Yourself

Linting?

Live Linting (demo)

Inline Live linting

SublimeEditor with Linter

Boilerplate

(function($){
    "use strict";
    //write code here
}(jQuery));

Boilerplate

(function(){
    "use strict";
    var private_variable;
    window.setThing = function(override){
         private_variable = override;
    }
    window.getThing = function(){
         return private_variable;
    }
}());

Debugging !== alert()

Breakpoints (demo)

Logging JavaScript errors

...from any user, on production!

window.onerror(msg, url, line) {
    var message = "Error in "+url+" on line "+line+": "+msg;
    $.post("/logerror", { "msg" : message }); 
}

See also Sentry

2. Making It Fast

Buttery Smooth Motion

Fast Events

I was going to call this responsive web design but...

Buttery Smooth Motion

the '24FPS Oughta Be Enough For Everyone' myth

Buttery Smooth Motion

but you don't get motion blur for free in a browser

$("#thing").slideUp();

Buttery Smooth Motion

12FPS = 84 ms/frame

24FPS = 42 ms/frame

48FPS = 21 ms/frame

60FPS = 16 ms/frame

aim for this →

see 100fps.com for more on perception of motion

Buttery Smooth Motion

60fps is 16-21ms/frame
subtract reflow and repaint time
subtract garbage collection time
= ~15ms for your JavaScript

benchmark your JavaScript!

Buttery Smooth Motion

Different approaches:

• SMIL (lol)
• CSS (Chrome, IE10, FF5)
• JavaScript (everything)

Buttery Smooth Motion

Different approaches:

• SMIL (lol)
• CSS (mobile)
• JavaScript (everything else)

Buttery Smooth Motion

The UI thread is responsible for UI and JavaScript

Buttery Smooth Motion

Event Stack (demo)

Doesn't matter if your javascript is doing animation. It can still interrupt animation!

Buttery Smooth Motion

Event Stack

Doesn't matter if your javascript is doing animation. It can still interrupt animation!

Fast Events

requestAnimationFrame vs.
setTimeout / setInterval

jQuery .on() AKA .live() AKA .delegate()

mobile? touch* vs click()

Fast Events

requestAnimationFrame vs.
setTimeout / setInterval

Use requestAnimationFrame for timers controlling visible things

Don't use setInterval. Use recursive setTimeout.

Fast Events

jQuery .on() AKA .live() AKA .delegate()

Event Bubbling

Fast jQuery Events

An event {return false;}

means

did you mean that?

3. Trivia

HTML5 Shims

Reflow strategies

Web Workers

Minimising Garbage Collection

HTML5 Polyfills AKA Shims

a good list of polyfills

Try CSS3Pie

Reflow strategies

Paint AKA reflow AKA layouting

Reflow strategies

which actions trigger paint/reflow/layout?

• Changing DOM nodes
• Hiding a DOM node with display: none (not visibility:hidden)
• Moving a DOM node on the page
• Changing CSS
• User resizing window/fonts

Reflow strategies

// Suboptimal, causes layout twice.
var newWidth = aDiv.offsetWidth + 10; // Read
aDiv.style.width = newWidth + 'px'; // Write
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.height = newHeight + 'px'; // Write

// Better, only one layout.
var newWidth = aDiv.offsetWidth + 10; // Read
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.width = newWidth + 'px'; // Write
aDiv.style.height = newHeight + 'px'; // Write

//via http://gent.ilcore.com/

Reflow strategies

Reflow strategies

• Batch DOM changes before any reflow-triggering actions
• cloneNode the element, work on the copy, & clobber the original
• detach node, make changes, put it back
• hide the element with display: none, make 1000 changes, restore display.

Web Workers

Move computation out of the UI thread

The UI thread is responsible for UI and JavaScript

More? High performance JavaScript

Minimising Garbage Collection

Too many anonymous functions/variables?

Caching jQuery selectors

Premature optimisation

34kb for handlebars.js vs. 3kb for the resulting template function

Premature optimisation

Case study:

String concatenation VS array pushing and joining

Let's see what JSPerf.com says

Game Over

See you on IRC on #javascript

Questions?

matth@catalyst.net.nz