A brief run through some of the advantages of using ES6 and webpack to transpile your code. The example source is available here https://github.com/atleastimtrying/pizza_tracker .

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