Introducing Enhance WASM

Brian LeRoux’s avatar

by Brian LeRoux
@brianleroux@indieweb.social
on

The image is a playful, cloud-themed illustration featuring logos of various programming languages and frameworks, such as Django, .NET, Go, Java, Node.js, PHP, Python, Ruby on Rails, R, and WordPress. In the center, a cute, winged mascot is pulling a banner that says EVERY SERVER, ANY LANGUAGE suggesting a platform or service that supports multiple programming languages across different server environments. The background is a light blue sky with fluffy clouds, adding to the airy, cloud computing motif.

Backend agnostic server-side rendering (SSR) for Web Components

Web Components are the browser native way to extend HTML. But as a primarily browser based technology they are defined with JavaScript which limits them to either rendering solely client side — which has janky performance, poor SEO, and is not optimally accessible — or within a server-side JavaScript runtime, which isn’t always an option for shops that use other backend runtimes.

Enhance WASM unlocks server-side rendering Web Components for any backend runtime.

  • Write Once, Render Anywhere: Author standard web components and deploy them with any backend. Enhance WASM takes care of rendering across any server environment.
  • Seamless Integration: Easily integrate Enhance WASM into your existing projects with minimal setup. Extensive documentation, high quality baseline components, and broad community support make adoption a breeze.
  • Better DX: Stop wasting time on slow build steps and reimplementing brittle frontend code that already works. Web standards ensure rock solid reliability and performance without rewrites.
  • Performance Optimized: No more spinners or skeleton screens. Enjoy faster load times and improved SEO. Your users get a snappy experience, and you get better developer velocity.

We really believe this is a leapfrog moment for frontend development. Server-side rendering is a key requirement for personalized web applications. Organizations that prioritize the stability, performance and accessibility of web standards run workloads in a huge variety of backend runtimes. Now we can build browser native web interfaces that cross the runtime chasm.

Try it out and get involved!

Enhance is completely open source code and we need your help! We’re opening up Enhance WASM immediately with support for Node, Deno, Python, Ruby, PHP, Java, C#, Rust, and Go. We need your help testing and implementing support for these and other runtimes! If you want to see a runtime not mentioned here please let us know.

Example starter projects:

FAQ

How are components authored?

Components are authored exactly per the Web Components specification. Enhance WASM also enables a more backend oriented pure functional style and has several helper libraries for making common client-side patterns cleaner.

Do I need to run client JS to render components?

No. Web Components are completely rendered server-side HTML. You can then optionally run client-side upgrades should the element need it. It is worth noting we’ve found the majority of elements only need to be server rendered and do not require any client javascript at all.

Can I use client-side JS with these components?

Of course!

What about Lit?

We definitely hear community folk when they say, “just use Lit”, but per the Lit documentation their own SSR renderer isn’t production ready today, and even then is Node.js only. Lit is ultimately more focused on client-side upgrade than server-side usage which is totally cool! Enhance encourages SSR and “HTML first” and treats the client-side element upgrade as a progressive enhancement step. You can use Enhance to render initial HTML and Lit for client-side interactions if that makes sense for your project. We find most elements are not client-side interactive anyhow.


Web Mentions