Skip to main content

Frontend-only Multi-Player. Unlimited Bandwidth. Or: What is Croquet.io, really?

A multi-player web app needs a backend, right?

What if I told you, it doesn’t?

Read on for how Croquet gets rid of servers. No, really.

Instantaneous Shared Experiences is how we describe Croquet on our website. And while that excellently describes What Croquet does, as Croquet's Chief Architect, I wanted to share a bit about How we do that.
So I wrote a Twitter thread. Here it is in blog form, slightly extended.

Click the animation above if it does not play automatically

Croquet lets you build completely client-side multi-user web apps.

Read that again.

Client-side.
Multi-user.

No I’m not kidding. I built it, I know it works. 😁 

Croquet apps run completely client-side:
  • can be hosted as a static web site
  • no server-side code needed
  • no networking code needed 
Croquet is literally virtualizing the server: Instead of running code on a server (or in a serverless function) we run it as a virtual machine (VM) on each client. 
Croquet carefully controls the inputs to these identical VMs so they execute in sync. 

The input events for the shared VMs are routed via Croquet’s global fleet of “reflector” servers. A reflector just bounces events from one user to all users. There’s no computation involved. Reflectors are small and fast. We have them around the globe, and will have many more with extremely low latency soon.

Crucially, the reflector guarantees event order and timing so every VM processes the same event at the same time. (That’s what the animation on top shows.)
Croquet reflectors also send out a continuous heartbeat to keep the VMs running, and in sync, without user input. 

Since the “server” is really a VM running on the client, you get unlimited bandwidth from that “server” to the client.

👏Unlimited👏Bandwidth👏

In fact, you can directly “reach into” the replicated VM to pull out any data for rendering. It’s just a pointer 🤷🏻‍♀️ 

Croquet also snapshots these VMs, encrypts the snapshots, and uploads them to a server until the next time they are needed.
The encryption key never leaves the client. Our servers cannot peek into the snapshots. They can’t peek into events either, since those are fully end-to-end encrypted, too. 

And yes this really works. In a web browser. In your browser, in fact. Try this:
That’s WideWideWorld, an editable voxel world with hundreds of AIs running around, and a water simulation. Scan the QR code in the lower left with your phone (or share the session URL). Both clients will be in sync. 

Of course, to build something like WideWideWorld on top of Croquet you’ll need to know how to build a game in the first place. This prototype is by our own Brian Upton (whom you might recognize from Rainbow Six & Ghost Recon). He joined us because no other tech would allow him to build this. 

Croquet is especially good for:
  • multi-user AR / VR / WebXR
  • multi-player games
  • collaborative design and construction
  • synchronized media
  • shared simulations
  • quick prototyping of shared experiences
These are hard to build, and some of the really hard parts are always the networking and server design, implementation, deployment, and scaling. 

Croquet eliminates this headache.

By the way, we are not literally running a Docker image in the browser. Although that would be a fun exercise – theoretically, Croquet can run anything that is deterministic and serializable.

No, it’s just JavaScript. The ECMAScript standard provides the semantic guarantees we need to achieve bit-identical execution across all platforms. Even WASM can be used with some care.

Plus our API is much simpler than traditional client/server code. Your shared server “VM” can be a single class, and you interact with it simply using publish/subscribe!
class Counter extends Croquet.Model {                 init() {                     this.n = 0;                     this.subscribe("counter", "set", this.set);                     this.tick();                 }                 set(value) {                     this.n = value;                     this.publish("counter", "changed");                 }                 tick() {                     this.n++;                     this.publish("counter", "changed");                     this.future(1000).tick();                 }             }
The value of n will be synchronized between all VMs
even as it is incrementing automatically.

We have many simple tutorials to get you started: 
(also: hiring a #DevRel engineer to write more) 

We are working on higher-level frameworks, too:
VDOM is already available, and WorldCore soon! See croquet.io/docs

By the way, if you heard of Croquet about 15 years ago – yes, that was us too, in particular our founder David Smith working with Alan Kay.  

That system was written in Squeak Smalltalk and had a fancy 3D UI.
Our new JS system has no UI, so it's good for many kinds of apps.

JavaScript has become incredibly rich, but it has no simple way of communicating with the person on the phone next to you.

Croquet provides this missing infrastructure for the web.

Try it! No servers needed.

(if you 💜 servers come work with us though)
End-Of-Thread 🧵

Compiled from a Twitter Thread I posted the day after Croquet's public launch.

Comments

Popular posts from this blog

Deconstructing Floats: frexp() and ldexp() in JavaScript

While working on my  SqueakJS VM, it became necessary to deconstruct floating point numbers into their mantissa and exponent parts, and assembling them again. Peeking into the C sources of the regular VM, I saw they use the  frexp ()   and ldexp () functions found in the standard C math library. Unfortunately, JavaScript does not provide these two functions. But surely there must have been someone who needed these before me, right? Sure enough, a Google search came up with a few implementations. However, an hour later I was convinced none of them actually are fully equivalent to the C functions. They were imprecise, that is, deconstructing a float using frexp() and reconstructing it with ldexp() did not result in the original value. But that is the basic use case: for all float values, if [ mantissa , exponent ] = frexp (value) then value = ldexp ( mantissa , exponent ) even if the value is subnormal . None of the implementations (even the complex ones) really worked. I

Emulating Smalltalk-76

If you got as excited as me about Dan Ingalls' live Smalltalk-76 demo on an actual 1970's Xerox Alto, you may have wanted to try it yourself.  For one, you could try my Smalltalk-78 VM. Smalltalk-78 is a leaner version of Smalltalk-76 but very much identical in syntax semantics.  It is also possible to run the full Smalltalk-76 environment, and here is how: First, you need an emulator for the Alto computer. Ken Shiriff posted a nice piece on how to run ContrAlto on Windows . It is written in C# and I got it to work on my Mac using Mono. So here's a step-by-step: Install Mono from  http://www.mono-project.com/download/ Download ContrAlto-mono.zip from https://github.com/livingcomputermuseum/ContrAlto/releases Download this Smalltalk-76 disk image: http://www.bitsavers.org/bits/Xerox/Alto/disk_images/chm/xmsmall.zip Unzip both  ContrAlto-mono.zip  and  xmsmall.zip  in the same folder. In a terminal, change to the ContrAlto directory and run mono Contralto.exe .