DEV Community

Deniz Akşimşek
Deniz Akşimşek

Posted on • Originally published at denizaksimsek.com on

Sprinkle Sharing

This post is directly from my notes, with no edits.

When people talk about code sharing between server and client, the usual suspects are Node.js and sharing model classes. However, there’s often good reason to duplicate these.

A far more interesting type of code sharing to me is eliminating this duplication:

When you are writing a server-driven web app with “sprinkles” of JS, you want to have interactive components, but also deliver usable HTML to non-JS-enabled [1] clients. This means you are essentially writing a component with the first render and subsequent updates are written in different languages – HTML then JS. How to make this nicer? (Existing answers follow)

Alpine and similar

Write both in one language: “HTML with JS inline in special attributes”.

React and similar

Write both in one language: “JS optionally with JSX”. Hard to set up sprinkle style, but wasn’t this how it was originally created to be used?


  1. “Non-JS-enabled” includes not only browsers where the user turned off JS, but also times when the JS didn’t load, or errored due to use of unsupported modern features. ↩︎

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay