Varv with Webstrates #

Our primary implementation of Varv builds on Webstrates and Codestrates v2. Webstrates is a server application that synchronizes the DOM (Document Object Model) of a website with the Webstrates server and persists it on it. Codestrates v2 is a development platform for Webstrates, which allows to create interactive software in Webstrates directly in the web browser without the need for additional tools like code editors or an IDE (Integrated Development Environment). You can read more about Webstrates and Codestrates v2 on their respective websites.

In Varv, we utilize Webstrates and Codestrates in two ways: Webstrates acts as a synchronization and persistence layer for concept definitions and the DOM data store. Codestrates v2 acts as an authoring environment—through its Cauldron editor—and is used to create additional tooling for Varv like a Data Inspector and a View Inspector.

Webstrates #

Synchronized Software Code #

The implementation code of software created in Varv, e.g., concept definitions, HTML templates, and CSS styles, are synchronized and persisted through the Webstrates server. This means, that changes to either of these are immediately synchronized with other clients visiting the same webstrate. This works in conjunction with the execution engine of Codestrates v2 and Cauldron (see below), which allow users to collaboratively edit software code in Varv in real-time.

Synchronized DOM Data Store #

Using the dom data store with Webstrates persists state of software created with Varv on the Webstrates server and synchronizes them with other clients. This makes it possible to create collaborative applications in Varv. The data store listens for changes in the data store, so that state changes conducted on other clients are automatically applied in the local client.

Codestrates v2 #

Cauldron Editor #

The Cauldron editor is an authoring environment that is part of Codestrates v2. For a general introduction to Cauldron, we refer to reader to the guide on the Codestrates v2 website. In addition to the features when using the regular Codestrates v2, in Varv, Cauldron also supports to create concept definition fragments. Like HTML or CSS fragments, concept definition fragments can also be activated and deactivated by toggling them to auto-run.

Data Inspector #

The data inspector is a tool to inspect the state, i.e., concepts and concept instances, of Varv. It is located in the tree browser of Cauldron. When selecting a concept type in the data inspector, the inspector shows the properties and actions of the given concept type. When selecting a concept instance, on the other hand, it shows the values of each of the properties of the given instance. Values can be modified directly in the data inspector and changes are immediately applied to the state of the Varv runtime.

When selecting either a concept type or concept instance, the selected element is highlighted in the dom view:

Lastly, the data inspector can create new concept instances and clone or delete existing ones. This can be done by right-clicking on a concept type to create instances or on a concept instance to clone or delete it in the context menu. Cloning a concept instance can be done either shallow or deep: a shallow clone has the same references to other concepts while a deep clone also copies all referenced concepts, e.g., when a concept has the property "schema": { "myProperty": "myOtherConcept" }.

View Inspector #

The view inspector enables users to inspect elements in the dom view of a Varv software. To inspect an element using the view inspector, a user has to hold ctrl/cmd and right-click on any element in a dom view. This will open a context menu which shows the template fragments that created this part of the view and, if the element is part of a concept instance, highlight that concept instance in the data inspector.