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.
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.