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)
Design: Reactive UI
Design: Responsive Design
Design: SOLID
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:
- http://babeljs.io/docs/plugins/preset-es2015/
- http://babeljs.io/docs/plugins/preset-es2016/
- http://babeljs.io/docs/plugins/preset-es2017/
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.
String.trim()
jQuery: ajax() and JSONP
Backbone
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.
- TypeScript https://www.typescriptlang.org/
- Elm http://elm-lang.org/
- Dart https://www.dartlang.org/
- ClojureScript https://github.com/clojure/clojurescript
- CoffeeScript https://github.com/jashkenas/coffeescript/wiki/list-of-languages-that-compile-to-js
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