Now I am re-learning it in the era of ECMAScript (ES6 / ES2017), transpilation, formal support for libraries and modularization, and, mobile web performance with things like PWAs, code splitting, and WebWorkers / ServiceWorkers. I am also pleasantly surprised that JS, via the ECMAScript standard and Babel, has evolved into a pretty good programming language, all things considered.
To solidify all this stuff, I am using webpack/babel to build all static assets for a simple Python/Flask web app, which ends up deployed as a multi-hundred-page static site.
One weekend, I ported everything from
webpack, and to play around with ES2017 features, as well as explore the Sass CSS preprocessor and some D3.js examples. And boy, did that send me down a yak shaving rabbit hole. Let’s start from the beginning!
In 1998, browsers were a harsh environment to target for development; not only was Internet adoption low and not only were internet connections slow, but the browser wars — mainly between Netscape and Microsoft — were creating a lot of confusion.
Netscape Navigator 4 was released in 1997, and Internet Explorer 5 was released in 1998. The web was still trying to make sense of HTML and CSS; after all, CSS1 had only been released a year earlier.
In lieu of a “debugger”, we have the devtools built into our favorite browser, like Chrome or Firefox. This includes rich debuggers, REPLs/consoles, and visual inspection tools. Scriptable remote connections to a node environment or a browser process (via new tools like Puppeteer) further close the development loop.
Thankfully, today, Single Page Application frameworks like React have largely solved this problem, with the ascendancy of
webpack and the reliance on
webpack CLI tool, allow for local development and production builds. This can all be scripted and wired together with simple
npm run-script commands. And since
webpack can be itself installed by
npm, this keeps the entire development stack self-contained in a way that doesn’t feel too dissimilar from what you might enjoy with
lein in Clojure or
python/pip in Python.
- Using Modern JS with Python’s Flask web framework for simple static sites
webpack, and why it’s important
- Modules, modules, modules. Why JS modules matter.
babel, and why it’s important
- Transpilation, and how to think about evolving JS/ES features and “compilation”
eslintfor bonus points
- Using sourcemaps for debugging
- Production minification with
- Building automated tests with
- Understanding the value of Chrome scripting and
Want me to keep going? Let me know via @amontalenti on Twitter.
Update from 2021: It has been a few years since I published this post. Though
webpack is still widely used, it has a competitor in the form of
esbuild which is also popular, especially due to its improved build speeds over
webpack. In the Vue.js community, which has grown at a rapid clip in the last few years, the
vite build tool is popular, which leverages
esbuild under the hood for building, and
esbuild is just a re-imagining of the
webpack-style tooling for performance.