A presentation at Web Directions Code in in Melbourne VIC, Australia by Ben Buchanan (200ok)
Less, but better.
“Good design is as little as possible. Less, but better. Simple as possible but not simpler.” Dieter Rams
The complexity is in our builds, not in the platform.
Zooming out
How long should our projects last?
How long should our skills last?
Vite - 1 year HTML - 28 years
Vite HTML
Bower Qunit Grunt Jasmine Gulp Webpack Jest + Enzyme Vite NTR NodeJS + NPM Selenium Nightwatch Puppeteer Playwright Cypress Python + PIP jQuery JavaScript Bash/Shell PHP CSS Server lore HTML React (class) React (func)
Bower Qunit Grunt Jasmine Gulp Webpack Jest + Enzyme Vite NTR NodeJS + NPM Selenium Nightwatch Puppeteer Playwright Cypress Python + PIP jQuery React (class) JavaScript Bash/Shell PHP CSS Server lore HTML React (func)
Bower Qunit Grunt Jasmine Gulp Webpack Jest + Enzyme Vite NTR NodeJS + NPM Selenium Nightwatch Puppeteer Playwright Cypress Python + PIP jQuery React (class) JavaScript Bash/Shell PHP CSS Server lore HTML React (func)
Bower Qunit Grunt Gulp Jasmine Webpack Jest + Enzyme Vite NTR NodeJS + NPM Selenium Nightwatch Puppeteer Playwright Cypress Python + PIP jQuery React (class) JavaScript Bash/Shell PHP CSS Server lore HTML React (func)
{} {} {} {} {} {} Storybook Elm D3 Jade/Pug Bower Qunit Grunt {} Gatsby Angular CRA Underscore Lodash Yarn Gulp Jasmine Webpack Jest + Enzyme Vite NTR NodeJS + NPM Selenium Nightwatch Puppeteer Playwright Cypress Python + PIP jQuery React (class) JavaScript Bash/Shell PHP CSS Server lore HTML React (func)
{} {} {} Fatigue Zone {} D3 Jade/Pug Qunit {} Storybook Elm Bower {} Grunt {} Gatsby Angular CRA Underscore Lodash Yarn Gulp Jasmine Webpack Jest + Enzyme Vite NTR NodeJS + NPM Stable Zone Selenium Nightwatch Puppeteer Playwright Cypress Python + PIP jQuery React (class) JavaScript Bash/Shell PHP CSS Server lore HTML React (func)
Volatility is expensive
“Nobody wants a drill. What they want is the hole.” Old sales saying
By the pricking of my thumbs, a new web era this way comes
Eras
Mid 1990s HTML Server HTML
Mid 1990s Early 2000s HTML SSR Server HTML Server HTML CSS JS
Mid 1990s Early 2000s HTML SSR Server HTML Server HTML CSS JS Mid 2000s DOM/Ajax Server HTML CSS jQuery E2E tests
Mid 1990s Early 2000s HTML SSR Server HTML Server HTML CSS JS Mid 2000s Mid 2010s DOM/Ajax Server HTML CSS jQuery E2E tests SPA Cloud infrastructure CI/CD pipelines Package managers HTML CSS Typescript React React tests E2E tests
Eras all the way down • Plugin content - Applets, Flash, Silverlight • Mobile formats - WAP, WML, iHTML, AMP • Content - broadcast, mashup, syndication, walled garden, paywall, AI
Our roles across eras
UI Frontend HTML Business Logic Backend
UI UI HTML SSR Templating (SSR) Business Logic Business Logic Frontend Frontend (in server-side languages) Backend
UI UI UI HTML SSR DOM/Ajax Templating (SSR) Templating (SSR) Business Logic Business Logic Business Logic Frontend Frontend Backend
UI UI UI UI Templating (JavaScript) Business Logic (JavaScript) HTML Business Logic SSR DOM/Ajax Templating (SSR) Templating (SSR) Business Logic Business Logic SPA Business Logic
UI Templating (JavaScript) Business Logic (JavaScript) SPA Business Logic
Frontend of the frontend GenX of frontend Backend of the frontend UI Templating (JavaScript) Business Logic (JavaScript) SPA Backend! Only backend! Nice pure backend! Business Logic
Full stack Full stack Full stack UI Templating (JavaScript) Business Logic (JavaScript) SPA Full stack Business Logic
UX & Design Content Design Tech Writer UI Frontend Business Logic in client Backend Templates on server Frontend Business Logic on server Backend Data Data
UI UI UI UI UI? Templating (JavaScript) Business Logic (JavaScript) HTML Business Logic SSR DOM/Ajax Templating (SSR) Templating (SSR) Business Logic Business Logic SPA Streamed SSR? Templating (SSR)? Business Logic Business Logic?
Every era shapes the next
Frustrations drive innovation • Repetition and low maintainability → templating, SSR, CSS • Desire for rich designs → DOM scripting, improved media and fonts • Dislike of C in CSS → CSS layers, scope, shadow DOM • Desire to escape algorithms → fediverse, cozyweb
Frameworks shape the platform • jQuery → vanilla JS features like queryselector, forEach and fetch • SASS → vanilla CSS features like custom props • CSS-in-JS → vanilla CSS features like scope, layers, and shadow DOM
Frameworks shape the platform • JavaScript → jQuery → JavaScript (ES6) • CSS → SCSS → CSS ff • Co eescript → Typescript → …?
You only get the benefit if you use the new features of the platform.
Beware of the familiarity comfort zone
My own dream of a simpler web
Quantium’s UI library
This picture is a lie.
Industry-endorsed tooling only lasted five years.
Never fear, people had suggestions!
Deno! Bun! JSR! React Test Library! PNPM! Lerna! Turborepo! Nx! Go back to Storybook!
“The definition of insanity is doing the same thing over and over again and expecting a different result.” Einstein did not actually say this
Reduce risk, add simplicity
Ten parts at 95% reliability
~40% chance of failure 0.95^10 = 0.5987
More dependencies = more risk
Dependency risks • Bad license • Breaking changes • Missing entirely • Deprecation or EOL • Package compatibility clash • Security compromised • Runtime compatibility clash • Abandonware
Not all dependencies are equal • Why use an intermediary when you can just call the CLI? • If you only use one function, why load a whole library? • Why load a whole library for minor features?
Adding simplicity
The baseline is full of features! • Shell, Node and Python scripting • NPM and PIP for packages • NPM Workspaces • NodeJS Test Runner for unit tests • Cypress for component, E2E and accessibility tests • And of course the web platform itself - HTML, CSS, JS
Principles • Use as little as possible • Choose native where possible • Make unproven technology as fungible as possible
Hard “no” • Powershell • Yarn, Webpack, Gulp, Babel • Monorepo tools • Intermediary libraries • React-speci c test frameworks fi • Gatsby
Additions • Vite for docs and React test xtures • SCSS for our design token integration • STMUX to run things in parallel • onchange for hot reloading fi • Plus the actual executables like SASS, Stylelint, etc
/ /apps /dashtest /docs /reacttest /packages /core /dash /react /tests
Remaining complexity • I really wish NPM run would build in a watcher • Extracting TS de nitions remains disappointingly di cult • SCSS may still go, we barely need it • Github Actions is intrusive, we may push more to shell scripts ffi fi • Building Dash is a bit niche and strange, but probably not of concern to many
So… do we like it?
• 5610 dependencies (!!!) • 1525 dependencies (-72%) • ~5-10 minute rst-time setup • ~2-3 minute rst-time setup (-70%) • ~1-2 minutes to start • ~25-30 seconds to start (-50%) fi After fi Before
Less, but better. • 72% less dependencies • All existing functionality maintained • 70% less build time • New components added • 50% less start time • Massively improved test coverage
Best of all… Contributors no longer waste hours getting the project to run. ff They ship work that makes a di erence to customers.
What’s next?
React API Dash API Angular API Dash Templates Angular Templates React Tests React Templates CSS & HTML patterns
Vue! React API HTMX! Rshiny! Dash API Angular API Dash Templates Angular Templates React Tests React Templates CSS & HTML patterns Svelte! Streamlit! Web components?
You’ll never guess which new and shiny thing I proposed!
A business case for web components
Considerations for tech choices • Strength of solution and its ecosystem • Security and licensing • Cost to buy • Cost to migrate/roll out • Cost to maintain • Cost of training • Impacts to hiring and onboarding • …and how long before you ask me to approve all of this all over again?
Web components • Ecosystem - the web ✅ You can keep your current framework. • License - free ✅ You can support multiple frameworks. • Migration - incremental ✅ This choice is the lowest risk you can o er to build and maintain a UI layer. fi ff • Longevity - possibly inde nite ✅
React API Dash API Angular API NewShiny API React Tests Dash Tests Angular Tests NewShiny Tests React Templates Dash Templates Angular Templates NewShiny Templates CSS & HTML patterns
React API Dash API Angular API Web Component tests Web Components CSS & HTML patterns NewShiny API
Framework API Framework API Framework Tests Framework Tests Web Component Tests Framework Templates Framework Templates Web Components CSS & HTML patterns Framework API Framework API CSS & HTML patterns
Framework SPA Framework API Framework Component Web Components
Mid 1990s Early 2000s HTML SSR Mid 2000s Mid 2010s DOM/Ajax Mid 2020s SPA Native web?
“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” Antoine de Saint-Exupéry
Less, but better. Ben Buchanan / 200ok.blog / @200ok@mastodon.social
After an era of complexity, perhaps it’s time the web had an era of simplicity.
for free. You
can too.