Modern js in practice
- 1. Modern JS in practice Anders Fisher Developer Mountain
- 2. 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!
- 3. 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!
- 4. 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.
- 5. 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.
- 6. 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.
- 7. 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.
- 8. 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.
- 9. 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!
- 10. 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.
- 11. 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.
- 12. Example App