Let's learn and use web standards in an unconventional way 🥳 ... we're building a piano you can play with friends. That in and of itself isn't very interesting, but we're going to be using:
- Remix
- Forms
- Web Audio (mostly via Tone.js)
<meta>,<progress>and more- Browser history
- Progressive enhancement
- Response and Server-sent events
In addition to the progressively-enhanced multiplayer piano, this repo also contains several intermediate iterations (no-op, client-side, and single-player).
- clone the repo
- run
npm install - run
npm run dev - open your browser to
https://localhost:3000
You might also need to go into your browser settings to allow sounds for localhost (or whatever host you run this on).
A more conventional approach might be just to require client-side JavaScript with websockets and media streams. Why do it this way?
It's true this example is a bit contrived and the no-JS side of things is a little janky. That said:
- This approach provides the same level of interactivity and peformance as other approaches
- This approach ships less code to the browser than other approaches
- This approach requires a comparable amount of code to write
- We get progressive enhancement with minimal effort
If this approach works for building a multiplayer piano, then why not do the same for traditional web apps, where it's even easier and the benefits are greater? 🤔
