One of the most amazing features of compilers is their ability to not just transform code into machine-readable things but also to optimize away abstractions.
Languages like C++ and Rust advertise something called “zero-cost abstractions”:
In general, C++ implementations obey the zero-overhead principle: What you don’t use, you don’t pay for […]. And further: What you do use, you couldn’t hand code any better.
– Bjarne Stroustrup1
This can be very powerful, like iterators that compile to machine instructions equivalent to those of hand-coded loops (or
The problem of bloat
Knowing this, it is sometimes quite hard to see what web frontend development is like.
I think this can be improved up, and some of the technology to do that already exists. For example, tools like critical css, and Closure Compiler can already get rid of some of the unused CSS/JS. Using that to our advantage is not that easy though, and certainly not the default for most developers.
Tracking precise dependencies
The next step is to use better compilers and build tools.
Targeting CSS, I’m come to like how powerful SASS is. Sadly, it has no notion of dependency tracking like CSS modules, which means that writing
@import "logo" twice means the code gets injected twice. PostCSS looks like solid base to write CSS code transformers on, but I have not used it.
In the end, CSS will need to be de-duplicated, relevant assets inlined, and optimized when the whole page has been built.
Great developer experience
To me, this means basically two things:
- Quick, incremental builds
- Readable, meaningful errors that are easy to debug
I’m not even talking about hot code reloading or writing a whole bunch of documentation. Just, make it fast during development (not JS optimizations), and output debuggable code (with SourceMaps).
More content to be added.
Stroustrup, B. (2012, March). Foundations of C++. In European Symposium on Programming (pp. 1-25). Springer Berlin Heidelberg. ↩
For example: The amazing LuaJIT’s tracing just-in-time compiler can optimize complex functional code using luafun (a library for writing functional Lua) to really efficient machine code (see their Readme). ↩
I’m only thinking about static pages here, and hope we can built from that. ↩