modern js in practice
TRANSCRIPT
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