a language for interactive programs

Syndicate/js Examples

This page describes some of the example programs that are part of the JavaScript implementation of Syndicate.

Clickable Button

This is a simple clickable button; each time the button is clicked, the number on the face of the button is incremented.

The actor maintaining the counter also maintains the button’s label and listens to click events. It uses the Syndicate/js UI driver to publish the button’s label text based on its internal state and to subscribe to button click events.

DOM example

This example demonstrates two actors, each using the Syndicate/js UI driver to display user interface and receive events from it. The first actor presents a button to the user, which when clicked sends a message to the other actor. The second actor receives messages from the first, updates its internal state, and reflects its new internal state in its visible UI.

Table sorting example

A tiny model-view-controller example demonstrating display and sorting of tabular data.

Text Entry Widget

This is a simple text entry GUI control, following a design of Hesam Samimi.

Samimi’s design proceeds in two stages. In the first, it calls for two components: one representing the model of a text field, including its contents and cursor position, and one acting as the view, responsible for drawing the widget and interpreting keystrokes. In the second stage, a search component is added, responsible for searching the current content of the model for a pattern and collaborating with the view to highlight the results.

This Syndicate solution naturally has an actor for each of the three components. The model actor maintains the current contents and cursor position as assertions in the shared dataspace. The view actor observes these assertions and, when they change, updates the display. It also subscribes to keystroke events and translates them into messages understandable to the model actor. The addition of the search actor necessitates no changes to the model actor. The search actor observes the assertion of the current content of the field in the same way the view actor does. If it finds a matching substring, it asserts this fact. The view actor must observe these assertions and highlight any corresponding portion of text.

There are two implementations, one using Syndicate events and actions directly, and one using the high-level Syndicate DSL.

IoT Demo

This is a model of a home automation system.

The idea is to alert a homeowner to the possibility they have left the stove switched on beyond the time they intended to.

IoT Example

Components in the model include:

When the stove is switched on, a timer is started, and if a certain time goes by without the stove being switched off, an alert is shown on the TV.

The example was inspired by a talk given in May 2016 at the PL Seminar at Northeastern University’s College of Computer Science by Charles Consel about the DiaSuite system that he and his collaborators have been developing.


TodoMVC Example

An implementation of a standard challenge problem for web programming: a to-do list, backed by localStorage, with various nice UI features. The specification details all of the features needed for a program to qualify as a TodoMVC implementation.