Developing a Statechart-to-ECMAScript Compiler Optimized for SVG User Interface Development for the World Wide Web

Jacob Beard1 and Hans Vangheluwe2
1McGill University, 2University of Antwerp and McGill University
Play (28min) Download: MP4 | MP3

There are many challenges that software developers face during the development of complex User Interfaces (UIs). Desired behaviour may be autonomous or reactive, and possibly real-time. Each UI component may be required to exhibit a radically different behaviour from that of any other component, and the behaviour of components may be inter-related. These complex behavioural relationships between components are often difficult to express, and are even more difficult to encode and maintain.

A solution may be found in Model-Driven Engineering. In particular, Statecharts, a formalism for describing complex, reactive, timed, state-based behaviour, is highly suited to model UI behaviour.

At the same time, SVG, in combination with ECMAScript is becoming increasingly popular as a platform for application development. The ECMAScript language is used to implement interactivity and dynamic behaviour in SVG visual objects. It is thus possible to create browser-based, SVG UIs which are rich in both their visual appearance and in their interactive behaviour.

A Statechart-to-ECMAScript compiler allows developers of SVG+ECMAScript-based web applications to use Statecharts to describe the behaviour of their UIs, followed by simulation and application synthesis.

Statecharts was developed in order to be intuitive for modellers. Translating Statechart models correctly into ECMAScript is a nontrivial task however. A Statecharts compilation strategy must choose how to encode the various features of the Statecharts semantics, including: Events, Event Parameters, States, Transitions, Event Dispatch, State Hierarchy, Orthogonality, History, Actions and Guards. Additionally, it is desirable to optimize target code for execution speed, memory usage and compiled code size, all of which are important in the development of rich UIs, often running in constrained environments such as a browser on a mobile device.

Because ECMAScript is a flexible, dynamic, multi-paradigm language, the space of possible Statechart compilation strategies is quite large. In general, it is desirable to map the high-level features of Statecharts onto the high-level language features of ECMAScript. Additionally, it is important to take into consideration the constraints imposed by the Web browser environment.

This paper has three goals. The first goal is to discuss four strategies that may be employed for implementing Statecharts in ECMAScript, and the tradeoffs that each approach entails with respect to execution speed, memory usage, and compiled code size. Second, it will be shown how these techniques influenced the development of our new Statechart-to-ECMAScript compiler. Finally, the paper will demonstrate how the Statechart-to-ECMAScript compiler may be used to accelerate the development of fast, robust, and richly interactive SVG UIs.