Embracing�#nobuild in�Modern Web
Semarang
Zain Fathoni
Why bother?
We have a good life as developer, don’t we?
Semarang
Build Systems Across Platforms
Web
AI
Mobile
Cloud
Source Code
Source Code + Data
Source Code
Source Code
Binary
AI/ML Model
Source Code
Binary
Semarang
JavaScript fatigue, anyone?
Building on Web used to be simple
( 1 )
( 2 )
( 3 )
Backwards compatible:
Modern browsers can still run decades-old website.
Well cached:
Only changed contents and assets are fetched through network requests.
Open source:
Open for debugging and learning.
Unfortunately, it has gotten more complex overtime.
The complexity was necessary, as a bridge towards better user experience.
However, it doesn’t have to stay like that.
The Complexity Bridge
Technology swings like a pendulum.
Semarang
The Web Platform has gotten so good.
Remember what they were trying to solve?
Transpiler: Babel, SWC.
Bundler: Webpack, Rspack, esbuild, Rollup, Vite, bun.
CommonJS
CSS Preprocessors: Sass, PostCSS.
package.json
Well, we don’t really need them anymore.
Interop 2024
HTTP/2
JavaScript modules
CSS Nesting and Variables
JavaScript import maps
Building Modern Web doesn’t have to be complicated
HTTP/2 significantly reduces network overhead in serving multiple assets.
CSS Variables has been available since 2017!
CSS Nesting is a part of Baseline 2023.
JavaScript modules has been available since 2018!
JavaScript import maps are also a part of Baseline 2023.
Underrated benefit:
Fine-grained cache expiration
~150ms
Fetch assets in
most of the times
How to embrace #nobuild
Semarang
Any SSR Backend + Hotwire
Semarang
What if I still love React + TypeScript?
Modern Web
got you covered
Semarang
HTMX can also be an alternative
Semarang
What about styling?
To keep your CSS simple, you can use any drop-in CSS frameworks for the basic styling.
Then add more custom styling either by including handwritten CSS files or apply the styling using HTML classes.
Drop-in CSS Frameworks
Bonus: Experimental�AI assistance panel for learning and debugging
Explore these live examples using Chrome DevTools AI assistance panel.
It demonstrates how we can easily understand how those websites are built when they use #nobuild approach.
Examples
Thank You