A Medium publication run by the Node.js project community, with posts on Node releases, ES modules, and JavaScript tooling.
HN commenters repeatedly recommend "Modern JavaScript Explained for Dinosaurs" as a clear explanation of why modern frontend tooling is so complicated.
Because https://medium.com/the-node-js-collection/keeping-the-node-js-core-small-137f83d18152
Note that Node is actually in a much better position than Javascript as a whole, because Node apps can be shipped with a specific version of Node. This means that the Node team actually has more power than web browsers to deprecate old features and remove parts of the library, as long as they do so carefully. It is much harder to make breaking changes in a browser than it is to make them in Node.
One middle ground I've seen people suggest is to have officially "blessed" external libraries that still need to be imported, but that are cached locally or have special privileges. For example, JQuery was at one point so common that the Firefox dev tools actually ship with a subset of the JQuery API enabled -- just so devs that are used to working with it can use it in the debugger on any site.
I look at JQuery as a massive success story for how 3rd-party extensions should work. It was extremely ubiquitous, it did influence the core language, but now we've grown and because it was kept separate, we're still free to abandon it and move on.
On the Node side maybe that means that Node ships with dependencies that still need to be added to your package.json, but that are always bundled in your installation so that you have them locally and don't need to hit a network request when you type `npm install X`.
Also on the Node side we have modules that are built by the core team, but just not…
Yes, it does make a difference, in a few ways.
AMD modules can effectively only be consumed by a browser, or a browser-focused bundling tool, since AMD was designed for the "cascading waterfall" loading approach. Anecdotally, I see no new libraries being written in AMD format, and some that are written in AMD are looking at transitioning to ES6 modules.
CommonJS modules are intended for synchronous loading under Node, and tools like Webpack and Browserify can wrap them up to be used in a browser.
ES6 modules are designed to be statically analyzable, which is a key factor in "tree shaking" to drop unused code out of a generated bundle. However, the ES6 spec only defined the syntax for modules, not how they should be loaded. Major browsers have finally implemented native support for ES6 modules, but there's still a lot of complexity around how they're going to be implemented in Node [0].
There's also complexity around how lib authors publish packages to NPM. The most compatible approach is to author lib code as ES6 modules and whatever syntax additions you want, then compile it to CommonJS and ES5 before publishing. However, that loses out on any possible benefits from tree shaking. See this Twitter thread with discussion from Dan Abramov [1].
For more info on the history and differences between various JS module formats, see the "Javascript Module Formats" section of my React/Redux links list [2].
[0]…
I'm the original author of the post. A friend who reviewed a draft of it asked me the same question. I had the following recommendations:
1. Solid recorded talk (on YouTube) on using npm run-script to automate local builds: https://www.youtube.com/watch?v=0RYETb9YVrk
2. Modern JavaScript Explained for Dinosaurs: https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70 -- this is a long post that goes into technical depth on the stuff that I covered at a high level in my post
3. Webpack -- The Confusing Parts: https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9 -- long post that goes into depth on Webpack, in particular.
Aside from all of these, the book I have found the most helpful if you want to zoom straight ahead to React is "Road to React": https://leanpub.com/the-road-to-learn-react
It's 200 pages, oriented around real code, and straightforward.
They link https://medium.com/the-node-js-collection/get-ready-a-new-v8-is-coming-node-js-performance-is-changing-46a63d6da4de
I'm mostly glad it'll come with an updated WebAssembly, hopefully fixing this bug: https://bugs.chromium.org/p/v8/issues/detail?id=6204 which blocks Luwa from working in node (handwritten wasm has a tendency to run into things emscripten would not.. I expect the same vice versa)
Will also enjoy not having to use a TextEncoder/TextDecoder shim. Kind of weird that they went full out with Unicode there, last I recall browsers were moving towards only supporting utf8
As a fellow old-schooler who's been getting back into JS myself, I've come across a couple of these types of resources that I found particlarly helpful. Here's the links:
- "Modern JavaScript Explained for Dinosaurs," by Peter Jang: https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
- "Modern JavaScript for Ancient Web Developers," by Gina Trapani: https://postlight.com/trackchanges/modern-javascript-for-ancient-web-developers
(Don't let the "ancient"/"dinosaur" stuff scare you off -- they kid because they love.)
Hope this helps!
Excellent! This is from the same author as "Modern JavaScript Explained For Dinosaurs"[1], that article got me much more closer to understanding the insane world of modern frontend development, I would recommend it to any other "dinosaurs" like me.
I'm very excited about modern CSS, I grew up in the crazy world of floats and the transition to responsive, new concepts like flexbox and grid are much more sensible approaches to layout design.
[1]https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70