Navigating ES6 Tooling Changes and Study Paths in JavaScript Development

Table of Contents

Background

This covers some of the core tooling changes available in 2016 as well as a study path. From a review perspective this emphasizes learning the base syntax then moving forward with covering the ideas on a per-project basis.

Training

Topics

Modules

Addresses issues with pollution and build.

Classes

Addresses issues with reuse and standarization.

Async functions

Addresses issues with shims, promise libraries.

Spread operator

Destructuring assignment

Tools

Browser Testing

Test Harness

Build Tools

Static Analysis

Linting

Code Coverage

Continuous Integration

Error Logging

Review

Code: ES6 (arrows, generators)

Algorithms: Trees and Search

Typed JavaScript: TypeScript

Transpilers

The current best practice is moving forward with the supported language at an organization by incrementally adding in additional presets associated with the Babel configuration. Minimally this covers the ES2015 features but would likely move forward to include each of the following:

These are covered by using http://babeljs.io/docs/plugins/preset-latest/ but during an evaluation of the specific language features it's worth seeing the behavior without the preset.

Example: https://gist.github.com/jwalsh/217a7f96758e0e3d8357a9bc5daec5af

Security

Code Reading

Each of these should take less than an hour: the goal is to summarize the logic and dependencies. This should also avoid any browser-specific work-arounds: the goal is just to get comfortable with code reading.

Books

Core

  • JDG: full reference for core or when needing a summary of expected security behavior
  • Functional JavaScript: excellent summary of essential tool when working functionally particularly with arrays; nice summary of partial application and currying
  • Maintainable JavaScript: may not follow the rules that are being used with React but is a great summary of patterns that people should recognize if if linting, namespace, module builders, etc. cover some of the risks
  • JavaScript Design Patterns: sections on module loaders, jQuery, could be avoided but the Design Pattern and MV* sections are a good contrast
  • Secrets of the JavaScript Ninja
  • Even Faster Websites: classic; required for CDN and debugging
  • JavaScript Enlightment
  • High Performance JavaScript: some of the consideration maybe we better covered by Web Page Test, Chrome Developer Tools, or Page Speed but still a good overview
  • Third-Party JavaScript: for non-UI development this covers many of the considerations for cross-domain communication, build, and testing

Current Language Features

For dealing with the current tools and ecosystem the following are recommended since it covers the core cases of dealing with the language, transpiling, upgrading libraries, async, and reactive design.

  • Nicholas Zakas, Understanding ECMAScript 6
  • Kyle Simpsons, ES6 and Beyond

Current Frameworks

  • Stoyan Stefanov, React Up and Running

Transpilers

Given the current rate of change associated with ECMAScript I've not looked too closely at the state of the following for use actively in React-driven, dashboard or visualization, or Third-Party JavaScript.

Async

  • Kyle Simpsons, Async & Performance
  • Daniel Parker, JavaScript with Promises

Design

  • Mario Casciaro, Node.js Design Patterns

Reactive Design

  • Functional and Reactive Domain Modeling
  • Grokking Reactive User Interfaces

Author: Jason Walsh

j@wal.sh

Last Updated: 2024-10-30 16:43:54