Modern JS in practiceAnders Fisher

Developer Mountain

Some caveats

• This is all based on my personal experience.

• There are other options available.

• Try to think about what your needs are.

• I’d love to hear about techniques/improvements!

Why ES6?

• More features than ES5.

• It’s backwards compatible.

• I don’t feel the need for a typed language.

• It’s well documented.

• It’s a standard!

Transpiling

• If your code is complex enough to have more than a few simple concepts transpiling will give you more options.

• I like webpack and babel, but others are available.

• It gives you a compile step in your JS, for linting, TDD and minifying.

• It allows you to develop a front end build process that can be shared between very different projects.

What’s it called?

• ES5 is the sort of JS we had for a while until 2015.

• ES6 is ES2015 and has a range of new features.

• ES7 is ES2016 and expands the existing library further.

• I’m currently mostly working ES2015 but calling it ES6.

Compatibility

• Modern browsers are continuing to march forward, now that Microsoft has ceased support for IE in favour of edge. Modern browsers should keep pace.

• caniuse.com is an excellent resource for support of features of modern JS.

• Chrome already supports a lot of the features here.

Patterns to follow

• Divide your functionality into separate files.

• Keep a single responsibility for each file.

• Build a pipeline of functions to pass your data through.

• Keep your functions simple, pure and avoid side effects.

• Use functional programming methods like map and reduce to simplify code.

Enhancements

• Use let and const instead of var.

• Use => functions instead of call(this).

• Import/export in place of require.

• Use ` when using string interpolation.

Strings

• Strings in ES5 were a pain.

• Using backticks we can do string interpolation.

• Using backticks we can do multi-line strings!

• Suddenly templating libraries seem redundant!

Sugar

• JS can be cleaner and neater thanks to some of the sugar provided in ES6.

• Shorthand in objects { foo: foo} becomes { foo }.

• Assignment of variables via destructuring.

• Method definitions have shorthand within object literals.

Libraries• There are load of modules for JS now (Yay NPM),

but a fair few of them are a bit ropey (Boo NPM).

• Including libraries in JS is now easier and more reliable than ever, webpack and browserify give us a simple reliable way to manage our external resources.

• Try to be restrained when using external libraries, they all need to be loaded in the browser! If in doubt take a look at the source.

Example App