Reval: Instant & Collaborative Meteor Development

I just released a new and much improved version Reval! Check it out at https://github.com/qualialabs/reval (I posted a beta version in here).

This package allows you to instantly reload files, via either an in-browser editor or an editor plugin. It works with Blaze, Jade, CSS, and arbitrary Javascript, both client-side and server-side. It also allows for live, collaborative code editing via an integration with Ngrok.

The above screenshot was taken by opening the in-browser Reval editor inside the excellent open-source Reaction Commerce project.

4 Likes

If the system is capable of real-time collaboration, how did you implement CRDT (conflict-free data types) or operational transforms nicely in Meteor?

I’m not talking Google Docs level real-time collaboration, but it does let multiple people modify the source code of a running website at the same time and see the results of those changes instantly.

If there is an open-source code browser-based code editor (I’m currently using Monaco), that supports that sort of level of collaborative editing, I’d love to take a look!

Here is a more comprehensive explanation I posted in the Blaze Slack:

“I probably should’ve posted a video! The core functionality is something similar to hot module reloading, which by itself is pretty helpful. But in addition to an editor plugin, there is also an in-browser editor. When you enable that editor it shrinks your application by 50% along both axis. Then you can hold command and it will show you the template under your mouse. If you click it will find and load the HTML/js/CSS for that template. You can then edit the code in the browser and have it instantly reload without a refresh. Each change is stored as a “patch” which you can persist or drop. These patches are stored in the db and survive across reloads or opening new tabs. By clicking the Publish button, it produces a public URL by which your app is temporarily available. This makes it so that other people can see you make changes, and if they make changes you will also instantly see them. Our designer uses this to assist engineers with design remotely”

I’ll try to post a video soon

1 Like