Brian Leroux, CTO at Begin, recently introduced Enhance, a new HTML framework, at QCon San Francisco. Enhance heavily lies on web standards and progressive enhancement for future-proof web applications. Enhance provides file-based routing, reusable Custom Elements, a customizable utility CSS system, and mapped API data routes that get deployed to isolated, single-purpose cloud functions.
Brian opened his QCon talk with a quote from Amazon founder Jeff Bezos:
I very frequently get the question: “What’s going to change in the next 10 years?” And that is a very interesting question; it’s a very common one. I almost never get the question: “What’s not going to change in the next 10 years?” And I submit to you that that second question is actually the more important of the two – because you can build a business strategy around the things that are stable in time.
The quote echoes a concern shared by Geertjan Wielenga at FOSDEM’20:
Large vendors are adopting JavaScript […] to create real, serious applications. […] But in the enterprise space, it is not about what is cool and what is new, it is about what is stable and reliable […] and maintainable in a few years’ time.
Building upon the stability premise, Leroux asks:
Imagine if we could write code that just worked, and ran forever. Imagine not chasing npm updates. Imagine not hunting the forums for an elusive combination of configuration values to fix a broken build.
Good news: we can. HTML, it turns out, is a pretty good choice for web development. Specifically rendering custom elements, styling them with modern CSS, and treating the element upgrade as a progressive enhancement step with JavaScript.
Enhance claims to be a new way to build web apps with web standards with no custom dialects to learn, no build steps to configure, and minimal friction.
In his talk, Leroux observed that the popular JavaScript frameworks tend to ship with transpilers or compilers that turn higher-level abstractions (e.g., JSX, template files) into lower-level web standards. This creates a few issues. Firstly, in some cases, the distance between the higher-level dialects and the transpiled code makes it difficult to reconcile one with the other, even in the context of additional tooling (e.g, source maps). Additionally, as a given framework evolves and application code scales up, dependency management and breaking changes within the framework ecosystem become a costly maintainability concern. Furthermore, framework abstractions are not compatible with one another, which restricts technical options and reusability.
Breaking changes have been a recurrent pain point in the JavaScript ecosystem. Leroux detailed:
Angular 1 to Angular 2 famously broke everybody. React 18 introduces some new semantics that can break you. TypeScript 4.8 completely changes how TypeScript transpiles down to Node modules. That’s very breaking. And that’s unfortunate because none of that is necessary.
Leroux contrasted breaking changes with the additive changes that took place in browsers: from HTTP 1 to HTTP 2, XMLHttpRequest to Fetch, <script type="module">, WOFF 1.0 to WOFF 2.0. Additive changes are opt-in and do not invalidate existing code.
Leroux then explained that Enhance is built on web standards and progressive enhancement in the front-end, and cloud functions on the back-end:
Can our front-end be pure standards-based HTML, CSS, and JS? Can we just progressively enhance it? The answer is yes. We never really packaged this up but now we have. We want you to take these legos and play with them. The answer is Enhance. […] The premises are really simple: start with HTML pages, use generally available web standards, and progressively enhance working HTML if you need to. Because the baseline is built with cloud functions, this thing is going to scale up and down to whatever demand that you need. [Deployments are completely deterministic as Enhance] uses Infrastructure as Code.
Leroux then followed with a concrete demo of the Enhance framework. Notable features include file-based routing, reusable Custom Elements, a customizable utility CSS system, and mapped API data routes that get deployed to isolated, single-purpose cloud functions. For more information, developers may access the online documentation.