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.
A late-2021 note on Microsoft IE11, and what’s to come in mid-2022: Microsoft has publicly announced that “The Internet Explorer 11 desktop application will be retired and go out of support on June 15, 2022”. To support this transition, they have added an enterprise-opt-in “IE Mode” to their otherwise-Chromium-based Edge browser. IE11 is the last browser not to support native ES6 modules, among other important ES features, and has a 0.7% (and declining) global market share. This likely means that in late 2022, we’ll see IE11 dropped from the compatibility list of
Great article, very useful. Looking forward to the next part.
Great article! Additionally Typescript is also on its way to becoming a de-facto standard for non-trivial projects as of 2019. https://dev.to/nickytonline/is-2019-the-year-of-typescript-18p2
Nice reflection as always! It is fun to think back to the “early” days, JS devs have it so much better now 🙂
100% agree! Though, with all that extra infrastructure comes a bit more initial learning curve and complexity.
great! earlier I was intimidated by things people said about JS and though of avoiding it at any cost(now that seems irrational, I should conduct my own research before coming to conclusions). I have already started to learn JS now.
Keep going. I give up, is that a real book? Looked for it on O’reilly but failed.
Great article. Any idea for when its coming the next “chapters”?
Some links I didn’t include in the original article but that I always go hunting for when sending people this article include:
“Advanced Frontend Automation with npm run scripts”, a 20-minute YouTube talk on how to effectively use npm run-script. https://www.youtube.com/watch?v=0RYETb9YVrk
“Webpack: The Confusing Parts”: https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9