DEV Community

Cover image for Are Sync Engines The Future of Web Applications?

Are Sync Engines The Future of Web Applications?

Isaac Hagoel on June 17, 2024

Look at the GIF below — it shows a real-time Todo-MVC demo, syncing across windows and smoothly transitioning in and out of offline mode. While it’...
Collapse
 
mikec711g profile image
Michael Casile

Great article. Only bad part is that it enlightens me about some lacks in my apps. As you mentioned, the solutions are not trivial ... but they could easily head off future problems.

Collapse
 
ccozens profile image
Chris Cozens

Amazing thanks for this - I've been considering exactly the same port so really nice to see this and have your thoughts. I've been tinkering with SQLite Cloud as an alternative but I'm not clear it's local first.
Helpful to see another implementation of svelte-SSE too as think I'll need the same for sqlite cloud.

Collapse
 
isaachagoel profile image
Isaac Hagoel

Good luck @ccozens! I don't think it matters that much whether something is "local first" or not. I care more about which problem that thing solves. In other words, don't let that stop you :)

Collapse
 
riklempens profile image
Rik Lempens • Edited

We use the ThingsDB rooms concept to achieve this in our infrastructure monitoring and this works like a charm.
If anyone is interested ThingDB is fully open source and we have a free ebook explaining this concept which is freely available to anyone interested.

Edit:
We just made the book available online, see this chapter for our rooms concept.

Collapse
 
jmojico profile image
Julian Mojico

Good one thanks

Collapse
 
charlymarchiaro profile image
Charly Marchiaro

Very nice article! Really interesting concept.

Collapse
 
minhnq0702 profile image
Ming nè

Thank for the post. It's amaizng!!

Collapse
 
getclibu profile image
Neville Franks

Yjs is an awesome CRDT library that enables apps to resolve differences and update in real time. It also enables offline first use and is perfect for collaborative rich text editing. And it's open source. That said it does have a learning curve. We use it very effectively in our PKM Clibu Notes - clibu.com

Collapse
 
isaachagoel profile image
Isaac Hagoel

I heard great things about Yjs but is it good in the general case (outside of text)? A common criticism is that you can control what the CRDTs converge to and sometimes they don't converge on the desired outcome

Collapse
 
getclibu profile image
Neville Franks • Edited

Interesting comment. I've not heard or witnessed any issues where the desired outcome isn't what is expected. That said, even though I've read a fair bit about CRDTs I don't profess to fully understand how they do the magic they do.

Clibu Notes has a tree that notes live in. The user creates this tree, can drag & drop nodes, rename them, change their icons, color etc. The tree is a YJS document so all changes resolve across all devices. We also use it for the rich text editor etc.

Feel free to try it for yourself. Feedback welcome and appreciated. clibu.com

Some good CRDT resources:
jakelazaroff.com
crdt.tech/
vlcn.io/blog/intro-to-crdts
medium.com/@amberovsky/crdt-confli...

And if you are interested in Local First development a new excellent podcast is:
localfirst.fm/

There are also several CRDT SQLite gaining traction at the moment.
ex. vlcn.io/docs/cr-sqlite/intro

HTH, Neville

Collapse
 
rusutraiancristian profile image
Rusu Traian Cristian

In my opinion, these are not problems waiting to be solved by a framework. These are go-to (default) features already integrated into a well-built system. Figma and the other examples here are good examples of well-built software, state of the art, if I may.

My point is, dev teams should strive to achieve all these into their software without using a framework for that. Being well built includes these.

Collapse
 
isaachagoel profile image
Isaac Hagoel

my goal here was to introduce the ideas as well as a good implementation of them (Replicache). I agree that it is possible to implement something like that on your own, whether it's smart or not depends on your specific situation

Collapse
 
rusutraiancristian profile image
Rusu Traian Cristian

Sure. My point was that people should focus on delivering quality software which in fact should come with all these by default. Not everything should be “solved” with a framework.

The need for such a framework merely shows how low the qualify of the software delivered today is, by the average developer. I mean look at the comments! You have people saying you enlightened them and now they can see what they did wrong. Proves my point that there’s are so few good engineers and probably more than 90% are average or below, delivering software not thought from all angles.

But by all means, your article is good and never have I said my ideas are contradicting with yours, I said it in my first comment, it is just my opinion. :)

Collapse
 
letsapp profile image
James McGril

Great article! I appreciate your view points. I do believe PWAs are the future of building native apps and the whole Web will operate this way one day. One codebase to rule them all! Lol...If you design with careful intent and not on pushing for speed you can accomplish amazing things using vanilla JS, CSS, HTML! I built my own client side sync library leveraging service Worker, broadcast channel, local storage, indexed db, background sync. After app installation any action you perform is instantaneous. It's a enterprise grade sales quoting tool and our entire Salesforce loves it! I think if developers focus more on the right tool for the right job and less on what framework will make their lives easier you'll see an explosion of amazing things on the web!

Collapse
 
isaachagoel profile image
Isaac Hagoel

Cool! I considered building a toy version of Replicache myself as an exercise. Is the tool you built open source?

Collapse
 
letsapp profile image
James McGril

Not yet

Collapse
 
codingfiend profile image
Edward de Jong

I released a new language Beads earlier this year that includes a limited sync engine capability for client/server web apps. Basically the server is the source of truth, and clients subscribe to the sparse N-dimensional matrix data on the server (which covers almost any data structure you want), and to make changes on the server side you make remote procedure calls. All of the communication is done with websockets to the server side (which is presumed to be running in Node.JS). You program the cilent and server at the same time in the same language, and can share code between them.

It works very well. Not having to handle messages is very handy. It is tricky to keep web sockets open; some browsers are aggressive about closing them, so you have to set a keep-alive frequency to keep the connections open.

My language replaces the HTML + JS + CSS stack with a single language that emits vanilla JS with no frameworks. The client side has the superpower of knowing what part of the DOM needs to be regenerated, because we track version numbers of each atomic node of the sparse matrix that is being communicated between client/server.

Cuts way down on refresh bugs.

If someone is interested you can join my Discord group and i will set up the tools for you. discord.gg/pTAdsSW

Collapse
 
mitsol profile image
Modern IT Solutions

reminds me a lot of Meteor! You should defenitely check it out: meteor.com/

Its a great framework imo!

Collapse
 
fruity4pie profile image
Aslan

I didn’t know that websockets are paid

lol

Collapse
 
isaachagoel profile image
Isaac Hagoel

?

Collapse
 
documendous profile image
Documendous

A lot of these can be solved with use of server side rendering along with lightweight javascript libraries like htmx and alpine.js.

Collapse
 
isaachagoel profile image
Isaac Hagoel

which one of these problems can be solved with htmx and alpine?

Collapse
 
pouchlabs profile image
pouchlabs

check out pouchlite