Easing the pain of building in JavaScript

In principle, JavaScript is a very dynamic and interactive programming language. However, that has changed significantly in recent years. Now, modern web development requires extensive build and compilation steps. That is unfortunate for two reasons. First, it makes development less pleasant. Second, it makes web development harder to learn. This blog post covers ideas and tools for easing some of the pain of building.

Static vs. dynamic  #

Quick refresher – in the context of this blog post:

• Static means: at compile time, before deployment.
• Dynamic means: at runtime, after deployment.

Benefits of building  #

The reason why there are so many build steps in modern web development is that they bring lots of benefits. They have advanced the status quo. These are a few examples:

• Linting and static type checking signals errors early in development.
• Tree-shaking leads to less code being deployed.
• Source-to-source compliation via, e.g., Babel and TypeScript lets you use modern language features on older engines.

Vision: less building  #

So how do we get both: the benefits of building and a quick turn-around during development?

These are a few ideas:

• Writing code: perform static checks incrementally, as people are editing code, and show errors inside IDEs.
• Running code during development:
  • Development servers can perform incremental building. For example, files could be compiled on the fly via Babel.
  • Live-reloading (the browser reloads whenever files are changed) also makes development more interactive.
• Deployment: perform as many build steps as are needed to minimize and optimize the code to deploy.

Some tools offer a hybrid approach: compile dynamically at development time, compile statically for deployment. For example:

• Vue can compile its templates dynamically.
• Polymer’s lit-html explores templating via tagged template literals. These could be compiled statically for deployment.
• babel-standalone can dynamically transpile JavaScript in browsers. Michael Jackson has used it together with unpkg.com to transpile React apps, Angular apps and others.
• Macros (e.g. as supported in JavaScript via Sweet.js) are another way of supporting non-native syntax. Macros can be applied dynamically and statically.

Conclusion  #

Having ES modules in browsers already helps with building less. In the future, I’m looking forward to ideas for making web development not just more powerful, but also more interactive and dynamic.

For teaching web development to non-programmers, I’d like to introduce features incrementally: First HTML, then CSS, then JavaScript, then the DOM, then frameworks, etc. It helps if build tools can be introduced as late as possible, if newcomers can be productive without them (or if they become as invisible as possible).