Transient | Webstrates

Transient elements
Transient attributes

Transient data is temporary, local data, i.e. data that does not get persisted or synchronized to other clients, and disappears on reload. In regular web development, the DOM is by default transient. Any changes made to the DOM disappears when the page is reloaded. If changes made to the DOM needs to be persisted in regular development, specific effort has to be made to accomplish this.

With Webstrates, this is the other way around. By default, all changes made to the DOM get persisted on the server and synchronized to all connected clients. If some data shouldn’t get persisted, special effort has to be made.

Webstrates allows the users to create transient data either through the custom HTML element <transient> or through attributes prefixed with transient-. These are both configurable in the client configuration.

Transient elements

Any data added inside a <transient> tag simply doesn’t get transferred to other clients:

<html>
<body>
  This content will be saved on the server and synchronized to all connected users as per usual.
  <transient>
    This element and its contents will only be visible to the user who created the element.
  </transient>
</body>
</html>

This is especially useful for (temporarily) storing data received through signaling.

Transient attributes

Any attribute name starting with transient- will automatically be transient:

<div class="popupbox" transient-visible="true">Here's a box!</div>

The above element will be visible to all clients, but the attribute transient-visible="true" will only be visible to the user who added it.

This is especially useful for managing CSS-targetable elements that should only be visible to certain users:

.popupbox {
  display: none;
}
.popupbox[transient-visible="true"] {
  display: initial;
}

A word of caution: If a user reloads a webstrate in which they have transient data, the transient data will be unrecoverable just as in a regular web application.