es6-features.md

Javascript ES6 Features and Examples

Overviews

• ES6 Features Overview
  https://github.com/lukehoban/es6features
  Examples of each of the new major features

• ES6 Features Comparison
  http://es6-features.org/
  Code snippets comparing ES6 features with their ES5 equivalents

• ES6 Overview in 350 Bullet Points
  https://ponyfoo.com/articles/es6
  Quick samples and descriptions of all the various ES6 capabilities

• Javascript Features
  http://jsfeatures.in/#ES6
  More samples of features in ES5, ES6, and ES7

• ES6 - The Bits You'll Actually Use
  http://jamesknelson.com/es6-the-bits-youll-actually-use/
  A quick tour through some of the more useful features in ES6

• ES6 Succinctly
  http://kamranahmed.info/blog/2016/04/04/es6-in-depth/
  A very readable overview of the features in ES6, why you would want to use them, and examples showing what they look like.

• How to Learn ES6
  https://medium.com/javascript-scene/how-to-learn-es6-47d9a1ac2620
  A set of resources for learning ES6

• ES6 for Humans
  https://github.com/metagrover/ES6-for-humans
  A kickstarter guide to writing ES6.

• Start Using ES6 Today
  http://wesbos.github.io/ES6-Talk/
  A set of slides describing the features in ES6

• Learn Harmony (ES2015) Now
  http://learnharmony.org/
  An interactive tool for learning and experimenting with ES6/ES2015 features

• ES6 New Features Tutorials
  https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBhgcpA8eTYYWg7im72LgLt
  A set of video tutorials explaining the new features in ES6

• ES6 Cheatsheet
  https://es6cheatsheet.com/
  An interactive cheatsheet with editable and runnable examples to help explain the new syntax and features in ES6. Offered as a "Pay What You Want" model, so $0 is a valid choice, but payments are requested.

• A Rundown of Javascript 2015 Features
  https://auth0.com/blog/a-rundown-of-es6-features/
  An overview of the features in ES6 and how they can be used.

• ES6 Summary
  https://github.com/zsolt-nagy/es6-summary
  A list of ES6 features and their ES5 equivalents

• Introduction to commonly used ES6 features
  https://zellwk.com/blog/es6/
  A great look at how several of the most useful ES6 features work, such as block scoping, arrow functions, and destructuring.

• ES6 Katas: Learn ES6 by doing it
  http://es6katas.org/
  Sets of exercises to help you learn ES6 features and syntax.

• Tiny ES6 Notebook
  https://github.com/mattharrison/Tiny-ES6-Notebook
  A large list of notes, examples, and discussion on how to use the features in ES6

• Laracasts: ES2015 Crash Course
  https://laracasts.com/series/es6-cliffsnotes
  A video screencast series that covers the new features and syntax in ES6/ES2015.

In-Depth Details

• ES6 In Depth
  https://ponyfoo.com/articles/tagged/es6-in-depth
  Many articles covering each feature in greater detail

• Exploring ES6
  http://exploringjs.com/es6/index.html
  A full online book covering every aspect of ES6 in fine detail

• Understanding ES6
  https://leanpub.com/understandinges6/read
  An online book that covers all the changes and features involved in ES6

• Javascript Alonge: The "Six" Edition
  https://leanpub.com/javascriptallongesix/read
  A book that teaches Javascript and ES6 from a functional programming perspective

• How ES6 classes really work, and how to build your own
  https://medium.com/@robertgrosse/how-es6-classes-really-work-and-how-to-build-your-own-fd6085eb326a
  A deep dive into Javascript's object model, prototypal inheritance, and how ES6 classes are implemented in relation to prototypes.

Specific Features

• Metaprogramming in ES6: Symbols, Reflection, and Proxies
  https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/
  https://www.keithcirkel.co.uk/metaprogramming-in-es6-part-2-reflect/
  https://www.keithcirkel.co.uk/metaprogramming-in-es6-part-3-proxies/
  A deep dive into three new features of ES6 that enable different ways of metaprogramming.

• Learning ES6: New Collections https://www.eventbrite.com/engineering/learning-es6-new-collections/
  Details the new Map, Set, WeakMap & WeakSet collection types in ES6.

• Learning ES6: Iterators and Iterables
  https://www.eventbrite.com/engineering/learning-es6-iterators-iterables/
  Covers the new iteration-related features in ES6

• The Most In-Depth Yet Understandable ES6 Destructuring Tutorial
  http://untangled.io/in-depth-es6-destructuring-with-assembled-avengers/
  A thorough set of examples for ES6's destructuring feature

• My New Favorite ES6 Toy: Destructured Objects as Parameters
  https://css-tricks.com/new-favorite-es6-toy-destructured-objects-parameters/
  An example of using objects and destructuring to act like named parameters

• Extract Nested Data from Arrays and Objects with Destructuring Assignment
  https://angulartoreact.com/es6-destructuring/
  Examples of how destructuring can make it easy to create new variables from other data.

• The Reflect API of ES6
  http://www.zsoltnagy.eu/the-reflect-api-of-es6/
  An overview of the Reflect API, which allows some complex metaprogramming capabilities.

• Advanced ES6 Destructuring Techniques
  http://untangled.io/advanced-es6-destructuring-techniques/
  Examples of advanced ways to use ES6's destructuring capabilities

• ES6 Proxies in Practice
  http://www.zsoltnagy.eu/es6-proxies-in-practice/
  An overview of how to use ES6 proxies for advanced use cases, with examples

• ES6 Features - 10 Use Cases for Proxy
  http://dealwithjs.io/es6-features-10-use-cases-for-proxy/
  Lists a variety of ways that ES6 proxies can be used, with links to examples

• Stop JavaScripting Like It's 1999
  https://www.slideshare.net/HunterLoftis1/connecttech-2017-stop-javascripting-like-its-1999
  A slideshow that illustrates how to use async/await and Promises to write cleaner-looking file handling code in a Node environment.

• Spreading the Spread and Rest Love: Javascript's Spread Syntax
  https://spin.atomicobject.com/2018/01/09/javascript-spread-syntax/
  Examples of the new array spread and object rest/spread syntaxes, and how to use them

Generators

• Javascript Generators
  https://blog.ragnarson.com/2016/12/15/javascript-generators.html
  A nice readable introduction to what generator functions are and how to use them

• Powering Javascript with Generators
  http://appendto.com/2016/06/powering-javascript-with-generators
  A useful introduction to the generators feature in ES6.

• Using ES6 Generators and Yield to Implement Async Workflows
  https://www.bennadel.com/blog/3123-using-es6-generators-and-yield-to-implement-asynchronous-workflows-in-javascript.htm
  A dive into how generators work, and how they can be used to handle async behavior

• A Practical Introduction to ES6 Generator Functions
  http://thejsguy.com/2016/10/15/a-practical-introduction-to-es6-generator-functions.html
  Some practical examples discussing what generator functions are, how they work, and what they can be used for.

• 3 cases where JavaScript generators rock (+ understanding them)
  http://goshakkk.name/javascript-generators-understanding-sample-use-cases/
  A simple thinking pattern for easily understanding generators, plus 3 practical applications.

• ES6 Generators and asynchronous Javascript
  http://web.archive.org/web/20160304215133/https://alexperry.io/javascript/2015/09/17/es6-generators-and-asynchronous-javascript.html
  A clear description of how generator functions can be paused and continued, and how that capability enables writing asynchronous code in a synchronous-looking way.

Promises

• Javascript Promises for Dummies
  https://scotch.io/tutorials/javascript-promises-for-dummies
  An introduction to understanding promises

• Javascript Promises... in Wicked Detail
  http://www.mattgreer.org/articles/promises-in-wicked-detail/
  Explains what promises are and how they work by building a promise implementation from scratch

• Javascript Promises: an Introduction
  https://developers.google.com/web/fundamentals/getting-started/primers/promises
  An explanation of what promises are, what they're useful for, terms, and related APIs

• ES6 Promises in Depth
  https://ponyfoo.com/articles/es6-promises-in-depth
  A detailed description of promises, what they are, and how to use them

• Awesome Promises
  https://github.com/wbinnssmith/awesome-promises
  Links to tutorials, articles, and other resources on promises

• We have a problem with promises
  https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html
  Describes some common mistakes while using promises, and how to avoid them

• ES6 Promise Anti-Patterns and Best Practices
  http://www.datchley.name/promise-patterns-anti-patterns/
  Some advice for good usage of Promises

• Broken Promises
  https://mockbrian.com/blog/2016/12/29/broken-promises/
  Some useful tips for dealing with promises.

• JS: Promises/A+, jQuery Deferreds, and errors
  http://lucybain.com/blog/2017/js-promises-errors-a-plus-vs-deferreds/
  A comparison of the two most common Promise definitions, and how they differ in behavior

• Escape from Callback Mountain: the "Functional River" pattern
  https://github.com/justsml/escape-from-callback-mountain/
  An opinionated suggested approach for writing promise callbacks to form a pipeline

• ES6 Promises: Patterns and Anti-Patterns
  https://medium.com/datafire-io/es6-promises-patterns-and-anti-patterns-bbb21a5d0918
  Several useful techniques for using Promises, such as "promisifying" callback-based functions and running promises in parallel or sequence, and some common mistakes to avoid like not actually returning anything in a promise callback.

• Gotchas about async/await and Promises
  https://dev.to/maxart2501/gotchas-about-asyncawait-and-promises-9di
  Several valuable tips about how to safely use async/await and Promise behavior, especially around error-handling.

• await vs return vs return await
  https://jakearchibald.com/2017/await-vs-return-vs-return-await/
  An informative look at the differences in behavior between various uses of the async/await syntax in relation to promises

Techniques

• "Real" Mixins with Javascript Classes"
  http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/
  An explanation of what mixins are, and how to implement them using ES6 classes

• Functional Mixins in ECMAScript 2015
  http://raganwald.com/2015/06/17/functional-mixins.html
  Another approach at combining mixins and classes

• Selective transpilation for modern Javascript environments
  https://medium.com/@adamrackis/selective-transpilation-for-modern-javascript-environments-15bde6b75cfd
  An investigation into ways to offer up differently-compiled bundles for different platforms with various levels of JS feature support.

Javascript Module Formats

• JavaScript Modules: A Beginner's Guide
  https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc
  https://medium.freecodecamp.com/javascript-modules-part-2-module-bundling-5020383cf306
  A two-part article discussing the various ways to define a module in Javascript, and common tools used to bundle modules together

• Understanding ES6 Modules via Their History
  https://www.sitepoint.com/understanding-es6-modules-via-their-history/
  A recap of how the various Javascript module formats evolved over time, and how that's lead to ES6 modules

• Javascript Module Systems Showndown: CommonJS vs AMD vs ES2015
  https://auth0.com/blog/javascript-module-systems-showdown/
  A look at the history and reasons for each module format's creation

• History and Background of Javascript Module Loaders
  https://appendto.com/2016/06/the-short-history-of-javascript-module-loaders/
  An overview of the various tools that have been used to load different module formats over time

• Understanding Javascript Modules: Bundling and Transpiling
  https://www.sitepoint.com/javascript-modules-bundling-transpiling/
  An overview of tools commonly used to bundle and transpile various module formats

• How Javascript Modules Work - from Past to Present
  http://www.penta-code.com/how-javascript-modules-work-from-past-to-present/
  An overview of the different approaches that have been used to load Javascript modules over time.

• Understanding the State of Javascript Modules
  http://georgemauer.net/2016/11/25/how-js-modules-work.html
  A look at the major differences in module loading approaches, and why tools like Webpack or Browserify are needed to help, as well as recommendations on which tools to use adn why.

• A 10-Minute Primer to JS Module Formats, Loaders, and Bundlers
  http://jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/
  A useful introduction to the various module formats and module tools

• History of Javascript: Evolution of JS Modularity
  https://github.com/myshov/history_of_javascript/tree/master/4_evolution_of_js_modularity
  A well-researched article that recounts the history and development of Javascript module definition approaches

• The State of Javascript Modules
  https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358
  An extended article summarizing the state of ES module implementations, how the transition to modules relates to the Node ecosystem, and what the changes will mean for Webpack users and module authors.

• Reify: Meteor's evolving Javascript module compiler
  https://blog.meteor.com/reify-meteors-evolving-javascript-module-compiler-70425fa45d81
  A detailed look at the subtleties of ES6 module syntax, and how Meteor's Reify compiler and Babel's module transform plugin deal with those restrictions in different ways.

• ES6 Modules in Node Today
  https://medium.com/web-on-the-edge/es-modules-in-node-today-32cff914e4b
  John-David Dalton, author of Lodash, announces his new ES6 module loader, which enables ES module usage in Node right now.

• State of Modules in JavaScript
  https://www.sitepen.com/blog/2017/10/26/state-of-modules-in-javascript/
  Covers the key features of ES modules, including basic syntax, syntax for importing/exporting/re-exporting, dynamic imports, debugging, bundling, and more.