Reactive Views and the needed JavaScript Toolchain

Reactive Views are the big thing in the Applications-with-JavaScript field. Applications-with-JavaScript are mostly slightly more interactive Web pages. The basic idea is that, when you change the underlying data (Let’s say a username), the library figures out how to update what you see on the screen.

The big player in the filed is react. There are tons of components out there and a big ecosystem.

But the new world includes a lot things that where not that pervasive in JavaScript before. Programming in react (and many of other newer libraries) need a toolchain now. This can be difficult. One example is the prototyping environment for react (this means: change some code, see if it does what you want, repeat): A live-in-the-browser transpiler used to be included or so; then they switched to babel, then babel dropped their browser support, then someone somehow managed to provide a browser based tool for this again etc.

So before you start learning react, you need seemingly to learn how to use and configure webpack and babel and how to write ES2015. It may be great if you program 8h a day. But it is also new barrier, demotivating (learn x and y before you can do z!) and I might learn some statistics instead.

Anyhow, for now I started to learn vue.js Vue is far smaller than react. It's ecosystem is smaller, too. It demands less tools. Let's see how this journey continues. I sometimes miss jQuery.

Notes:

  • Related for Python: Virtualenv is an anti-pattern (for beginners).
  • Added 2019-12-05: HTML, CSS and our vanishing industry entry points.
  • Added 2019-12-05: I have been using vue since quite some time (3 years, it seems?!) for smaller things. Its ecosystem also often assumes to use a toolchain, but it is less baked into the whole project.
  • Added 2022-12-20: Via chiborg I learned about the ideas of small web (article) and indie web (wiki/community). Both emphasize building small websites with established technology and simple architectures. Indieweb has an article on toolchains, which seems to share my concerns. Their article on JavaScript suggest using it only for progressive enhancement thus having most of the code at the backend. However, I think some interactions would be overly cumbersome without JavaScript and I still would like to write these without a large toolchain. Ideally, everything would be plain JS which I can throw in an independend minifier in case the code has a relevant size. And given the Javascript module system it would actually be possible to import code without toolchain. But years after the module system’s introduction, a lot of libraries do not have ES modules, let alone ES modules in the browser. Modernweb has some helpful tools if you want to go in that direction.
  • Added 2022-12-20: Btw.: still missing jQuery, still using vue and being relatively happy with it.
  • Added 2024-02-02: Its slow, but it seems that developing with ES6 module and no toolchain gets easier. QUnit works surprisingly well with ES6 and in the browser (Mocha caused me some trouble, many other tools require node)
  • Added 2024-02-02: Toolchains and requiring complex libraries can also be part of making front end more prestigious, cleaning it from work that is seen as messy and feminine.

Creative Commons License
Reactive Views and the needed JavaScript Toolchain by Jan Dittrich is licensed under a Creative Commons Attribution 4.0 International License.