How to Code a Time Machine

Time Lord vs Timex

On one end of the spectrum, British time machines can travel the universe and traverse epochs.

On the other end, American time machines can, well, let you know you need to flip a burger.

This article is another in a series on Frame Machine Notation (FMN) and it’s about time to show some working code. Time-pressed Time Lords can check out this codepen for the implementation of the final example in this article (it’s super exciting). Here’s a preview:

Leisurely humans, however, can work towards that magnum opus with a warm-up example of a very simple time machine that is just going to delay you getting to the end. If you are British, however, presumably you can just put it in reverse and get back your e-m-i-t.


In previous articles, I foreshadowed the introduction of a Frame Visual Notation (FVN) to line up with UML statecharts. It's time for the big reveal.

The #AlmostThere controller below shows the same machine specification in both FMN and FVN:


To be precise, the visual model above is only modeling the machine block and does not have the interface block incorporated. Correcting this situation simply requires adding the FMN for the interface block to the model:


Here we can see this very simple machine going from $Begin -> $Delay -> $End. In the $Delay state, the enter event |>| creates and starts a timer. The machine then waits for the |timeout| event to be sent. When it arrives, a transition to the $End state triggers the execution of the |<| (exit) event handler, which simply cleans up the timer resource.

This is a hugely powerful pattern and one of the major benefits of using machines as the controller logic for complex software systems. For instance, for languages such as C++ the enter/exit hooks can provide the natural places to methodically take care of manual memory allocation and deallocation. For other languages, there are all kinds of resources not managed by built-in garbage collection such as file handles, communication sockets etc for which there is typically no automatic help. Enter/exit event handlers, therefore, have great utility for any programming language.

While graphical representations can sometimes be useful, it is my belief that the use of automata in day-to-day programming has been strangled by the complexities of visually wiring these models together. Instead, I favor the textual notation which has all of the expressive power and none of the challenges of trying to draw an easy to understand picture of a software system.

Regardless, for small models, the graphical representation can quickly orient the viewer and be useful. Therefore I will continue to develop the visual notation for those that prefer it and to demonstrate parity with UML statecharts in this regard.


Now let's take a look at a small but complete demo of a slightly more sophisticated delay controller that drives and is driven by a UI. The FVN model is shown here:

FVN for #DelayDemo

Without further ado, click here for the working demo on Codepen. You should see something like this:

While it will be abundantly clear that I am not a designer, the important point is hopefully made. In the console you can see the log output as the controller changes from state to state. This demonstrates Frame’s promise of a deep linkage between the textual specification, the visual model and the implementation.

You can see the full listing of the controller logic on this gist as well as at Codepen.


This article demonstrates a number of key aspects to the technology that differentiates Frame from other modeling approaches. Although Frame has a visual notation, thanks to the precise FMN textual notation it is not only a software modeling language but more importantly a software specification language. This is achieved by the equivalence of the visual models, the text machine specifications and the reference code implementation patterns.

Additionally, we explored the first of many powerful architectural patterns with the enter/exit event handlers and showed the mechanism to implement it.

Now that we know how to manage time and resources with state machines, we have the tools to explore a universe of interesting problems with automata and Frame.

Related Articles

A professional software developer and manager. I believe Agile planning is a real thing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store