HipHop.js: (A)Synchronous Reactive Web Programming Gérard Berry Manuel Serrano Collège de France Inria/UCA Paris, France Sophia Antipolis, France [email protected] [email protected] Abstract 1 Introduction We present HipHop.js, a synchronous reactive language that We present HipHop.js, a synchronous orchestration lan- adds synchronous concurrency and preemption to JavaScript. guage for JavaScript. To help web application development, Inspired from Esterel, HipHop.js simplifies the programming HipHop.js was built within Hop.js [35], which is itself a of non-trivial temporal behaviors as found in complex web multitier JavaScript extension dedicated to facilitate the pro- interfaces or IoT controllers and the cooperation between gramming of web client-server asynchronous interactions synchronous and asynchronous activities. HipHop.js is com- in various ways. But the HipHop.js compiler generates plain piled into plain sequential JavaScript and executes on un- JavaScript code that can be used in any server or client Java- modified runtime environments. We use three examples to Script environment, without Hop.js and without any need present and discuss HipHop.js: a simple web login form to for an extra runtime support. introduce the language and show how it differs from Java- Our broad goal is to facilitate the design and program- Script, and two real life examples, a medical prescription ming of complex applications by smoothly integrating three pillbox and an interactive music system that show why con- computation models and programming styles that have been currency and preemption help programming such temporal historically developed in different communities and for dif- applications. ferent purposes. Let us first recall these models, which were characterized in the 1980’s. i) Transformational programs CCS Concepts: · Software and its engineering → Or- simply compute output values from input values, with com- chestration languages; General programming lan- paratively simple interaction with their environment. This is guages; Language types; Parallel programming lan- the domain of classical sequential programming languages. guages; Multiparadigm languages; Distributed pro- ii) Asynchronous concurrent programs perform interactions gramming languages. between their components or with their environment with uncontrollable timing, using typically network-based com- Keywords: Reactive Programming, Synchronous Program- munication. This domain was started by Hoare’s CSP in the ming, Web Programming, JavaScript 1970’s, and languages such as Erlang [3] or CML [33] were designed for it. Web programming in JavaScript or other lan- ACM Reference Format: guages also belongs to this category, but with an asymmetric Gérard Berry and Manuel Serrano. 2020. HipHop.js: (A)Synchronous Reactive Web Programming. In Proceed- client/server view. iii) Synchronous reactive programs react ings of the 41st ACM SIGPLAN International Conference on to external events in a conceptually instantaneous and deter- Programming Language Design and Implementation (PLDI ’20), ministic way: examples are real-time process control, com- June 15ś20, 2020, London, UK. ACM, New York, NY, USA, 13 pages. mand systems, communication protocol nodes, and, more https://doi.org/10.1145/3385412.3385984 generally, temporal orchestration of complex activities. This is the domain of synchronous languages, started in the 1980’s by Esterel [5], Lustre [21], and Signal [20], followed by many Permission to make digital or hard copies of all or part of this work for other languages and transformed into an industrial success personal or classroom use is granted without fee provided that copies by SCADE 6 [10] for safety-critical applications. are not made or distributed for profit or commercial advantage and that Asynchronous and synchronous programs all use concur- copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than the author(s) must rency and communication, but differently: asynchronous be honored. Abstracting with credit is permitted. To copy otherwise, or concurrency is inherently non-deterministic with commu- republish, to post on servers or to redistribute to lists, requires prior specific nication taking arbitrary non-zero time; on the opposite, permission and/or a fee. Request permissions from [email protected]. synchronous concurrency is deterministic with communi- PLDI ’20, June 15ś20, 2020, London, UK cation in conceptually zero time. Both concurrency models © 2020 Copyright held by the owner/author(s). Publication rights licensed have found many applications, but they have remained quite to ACM. ACM ISBN 978-1-4503-7613-6/20/06...$15.00 dissociated. We show that integrating HipHop.js’s synchrony https://doi.org/10.1145/3385412.3385984 with JavaScript’s asynchrony can simplify web applications 533 PLDI ’20, June 15ś20, 2020, London, UK Gérard Berry and Manuel Serrano where reactive aspects are as important as interactive ones, Hop.js. This is because direct integration examples of con- which we believe will become more and more frequent. To currency and preemption in classical sequential languages the best of our knowledge, such a smooth blending of both always paid a semantic price we want to avoid. But we kept concurrency models in the context of a mainstream web- the syntax very similar, with a simple way of using plain oriented language has never been achieved before. JavaScript for any data computation. JavaScript is obviously adequate for programming trans- To be executed, we compile a HipHop.js program into formational and interactive or simple reactive systems. Its sequential plain JavaScript code. Concurrency, communi- object orientation helps handling data structures and imple- cation, and preemption are compiled away by adequately menting classical algorithms. Its functional aspect makes microscheduling the HipHop.js reactive statements in a way it suitable for implementing basic interactions and GUIs that respects the HipHop.js semantics, identical to Esterel’s using callbacks. But, on the asynchronous side, explicitly one. The HipHop.js generated code is embedded into a Java- coding the exchange data between servers and clients re- Script reactive machine to be called from JavaScript using mains mandatory. Hop.js removes the need for such manual a simple interface. At runtime, since JavaScript’s execution communication code. Servers and clients are written in the is atomic, the execution of each HipHop.js reaction is unin- same code, where locations of code fragments are specified terruptible, which is key to ensure its correctness. This is a by multitier primitives [35] in the form of annotations telling big bonus compared to compiling Esterel into C for instance, which server or client an expression belongs to. Then Hop.js where run-time reaction atomicity has to guaranteed by the automatically generates secure communication code for the user separately for each usage, in a way that highly depends necessary data transfers. In this paper, we will stick to basic on the execution environment. usage of Hop.js, because this is not our main subject and In the sequel, we focus on the HipHop.js’s language design, because HipHop.js does not depend on Hop.js. All Hop.js the programming style it offers, and its tight integration code in our examples could be written in plain JavaScript, with JavaScript. To illustrate the diversity of its potential albeit with a significant size and complexity increase. applications, we present three examples: a simple login GUI On the reactive side, JavaScript is based on an atomic exe- to introduce the main constructs and the integration within cution mode that implements a kind of synchronous reaction. JavaScript, a medical application related to drug prescription, ECMAScript 2015 [15] has augmented it by some basic fea- and a larger scale interactive music platform used in actual tures that help asynchronous programming: yield stops the concerts that makes extensive use of all the expressiveness control and restarts from there on demand; promises and HipHop.js has to offer. async simplify the blending of asynchronous executions into The paper is organized as follows. In Section 2, we present sequential programming. These additions do help writing two implementations of the login web page: first in Java- basic temporal behaviors, but in a limited way. HipHop.js Script then in HipHop.js, introducing the language on-the-fly keeps them but adds far more powerful features. First, syn- and explaining of how it modularizes and simplifies temporal chronous concurrency helps simplifying and modularizing programming; we complete the login implementation by the designs, and synchronous signaling makes it possible to in- Hop.js coding of a HTML GUI, showing how we make the stantly communicate between synchronous concurrent state- communication between HipHop.js, Hop.js, and HTML as ments to exchange data and coordination signals. Second, simple as possible. In Section 3, we show how easy it is powerful event-driven reactive preemption statements bor- to extend the specification to make our application richer rowed from Esterel finely control the lifetime of the arbi- while reusing the unmodified initial HipHop.js code, which trarily complex program statements to which they apply, would be difficult in JavaScript. Section 4 is devoted to the instantly killing them when their control events occur; ex- drug prescription and interactive music examples.