A Web Without Spinners, an Introduction to Replicache

Episode 35 of the 20MinJS podcast covers a very innovative JavaScript library called “Replicache”.

This library allows you to quickly build multi-user, collaborative applications without worrying about the underlying architecture of such applications. Think about building GoogleDocs on your own, or perhaps something like Figma, where you can collaborate with other users on your designs, how would you approach building something like that?

It sounds like a monumental task, the collaborative aspect of these applications opens up a huge Pandora’s box when you start looking into it. How do you handle updates? What happens if they’re not fully compatible? What if one of your users loses connectivity for a while? And I can keep asking questions like that.

Well, Replicache is meant to answer 99% of all those questions, and provide some guidance for the remaining 1%. This is why in this episode we talked to Aaron Boodman, founder of RociCorpt, the creators of Replicache.

As always, you can listen to the full interview here:

Or if you’re not into podcasts, just keep on reading!

Highligh #1: What exactly is Replicache?

One of the first questions we tackled was to properly define Replicache, because it’s really an exciting piece of techonology, but given the potential it brings, one might think it’s either a framework, a SaaS that we interact with, or something completely different. In fact, Replicache is a JavaScript library that you can add to your projects and use it to coordinate mutations on top of your data source.

In other words, if you’re building an app that relies on data, then through the use of Replicache, you can centralize the way you affect that data (i.e through mutations) and while doing so, you’ll gain other benefits, such as:

• “Multi player” support. In other words, your application can share the updates across all your app users and ensure that their UIs reflect the latest version of the data within milliseconds of it changing.
• Offline mode. Replicache keeps a local cache of your changes, so it can let you keep working as if you were online for days. Once you come back online, it’ll internally synch with all other clients to provide you (and them) with the latest merged version of your data.
• Blazingly fast UI updates. Due to the internal architecture of Replicache, and all the services it adds, your interaction with the data sources is done only when data has changed. That means you don’t waste time checking when nothing happens, or the opposite, checking too late once a lot of things have happened.

Of course, these are not features you can’t build on your own, but if you listen to the interview, you’ll hear Aaron mention how some companies spend years working on their own frameworks that can achieve all of this. Well, now with Replicache, you have the building blocks required to focus only on building your app, instead of spending time building the tools to eventually build your app.

You save a lot of time, and of course, a lot of money.

Highlight #2: What makes Replicache so fast?

While the project is closed-source and we can’t see the actual implementation, we have their architecture documents available that describe a bit of how Replicache works. Long story short, Replicache will have a local copy of their app running on your system, and your UI will connect to it directly. This local version will be the one synching data between you and the server (where the rest of the datas resides).

This means you’re able to get updates very quickly as soon as the data source sends updates to your local Replicache, it’ll push them to your UI. This local replicache is also responsible for the offline mode. Every time you lose connectivity, it’ll keep track of everything you’re doing, and once you’re back online, it’ll be the one in charge of synching the data as much as possible.

Note that when something like this happens, it’s very hard to ensure that the data can be merged without conflicts. Which is why for those cases, you’ll have to find a way to implement a manual resolution process (Aaron talks about some options for this on the episode).

Highlight #3: What kind of back-end do you need for Replicache?

That’s a fascinating question because while the front-end is, obviously, pure JavaScript, Replicache claims to be “Bring Your Own Backend”, which means you can build an application using Replicache with any tech stack. As long as you’re using JavaScript on the front (and what else would you use?) you can then code the back-end in anything you want.

That said, they provide some libraries for you to use on the back-end out of the box to simplify how you communicate with their services. So yes, you can build your application with any tech stack, but if you’re not using one of the “preferred” ones (like NextJS, or React), then you’ll have to a little extra to make it all work.

If you’re wondering what exactly that “extra” is, you can check out their documentation here, it has all the details you need.

Highlight #4: Getting started with Replicache: how easy is it?

I can’t say I’m a Replicache expert after our interview with Aaron or after the few tests I did on my own, but I can definitely echo what Aaron mentioned during the interview: the easiest way to get started with Replicache to understand if you need it, is to use one of their pre-built apps.

You can boot up a basic To-Do app built with Replicache in seconds using a single command: npx create-replicache-app my-app react

With that, you can start reading code, and making changes to understand how it works. They have a small tutorial on their documentation showing you how to add a feature to that To-Do application.

Once you’ve gone through it and you’ve done your own tests, you’ll have a better grasp of all the new concepts you’ll be dealing with (like data mutators, where and how to store the data model, etc).

All in all, I’d rate Replicache as a “medium” in terms of difficulty getting started. Once you pass the initial hurdle, things look much more accessible.

This concludes the highlights of this interview, but don’t go yet! If I managed to peak your interest about Replicache, give the episode a listen, there is a lot more information there!

And if you’ve already tried Replicache, leave a comment and share your experience, I’d love to read what others have been doing with it!