Author-prepared version A Decentralized Approach for Programming Interactive Applications with JavaScript and Blockly Assaf Marron Gera Weiss Guy Wiener Weizmann Institute of Science Ben-Gurion University HP Labs [email protected] [email protected] [email protected] Abstract Keywords Behavioral Programming, JavaScript, We present a decentralized-control methodology and a Coroutines, HTML 5, Google Blockly, Visual Pro- tool-set for developing interactive user interfaces. We gramming, Client-side, Web application, Browser focus on the common case of developing the client side of Web applications. Our approach is to combine vi- 1. Introduction sual programming using Google Blockly with a single- The behavioral programming (BP) approach is an ex- threaded implementation of behavioral programming tension and generalization of scenario-based program- in JavaScript. We show how the behavioral program- ming, which was introduced in [4, 11] and extended ming principles can be implemented with minimal pro- in [17]. In behavioral programming, individual re- gramming resources, i.e., with a single-threaded envi- quirements are programmed in a decentralized manner ronment using coroutines. We give initial, yet full, ex- as independent modules which are interwoven at run amples of how behavioral programming is instrumental time. Advantages of the approach include facilitation in addressing common issues in this application do- of incremental development [17], naturalness [10], and main, e.g., that it facilitates separation of graphical rep- facilitation of early detection of conflicting require- resentation from logic and handling of complex inter- ments [18]. A review of research and tool development object scenarios. The implementation in JavaScript and in behavioral programming to date appears in [14]. Blockly (separately and together) expands the avail- While behavioral programming mechanisms are avail- ability of behavioral programming capabilities, pre- able in several languages such as live sequence charts viously implemented in LSC, Java, Erlang and C++, (LSC), Java, Erlang and C++, its usage for complex to audiences with different skill-sets and design ap- real-world application and development of relevant proaches. methodologies are only beginning. The purpose of the research summarized in this pa- Categories and Subject Descriptors D.3.3 [Language per was to examine behavioral programming in a spe- Constructs and Features]: Concurrent programming cific application domain, and to adjust it to languages, structures; D.1.3 [Programming Techniques]: Concur- technologies and work methods that are used in this do- rent programming main. The paper also sheds light on the principles of programming behaviorally and the facilities required of General Terms Languages, Design, Human Factors behavioral-programming infrastructure. The paper describes and demonstrates the imple- mentation of behavioral programming in JavaScript and in Google’s Blockly for the client side of Web applications, and then discusses general usability and design principles highlighted by these implementa- tions. Clearly, in addition to the combined Blockly- and-JavaScript implementation shown here, behavioral [Copyright notice will appear here once ’preprint’ option is removed.] programming can be used with JavaScript without Author-prepared version; See published version in AGERE! 2012 - ACM DL 1 2012/12/19 Blockly, or with Blockly with translation to another necessary, in the least, and in some cases, artificial and language, such as Dart. In this regard, Blockly is a layer even detrimental to the understandability of the text. above our JavaScript implementation, which can sim- In this context, of course, the language name Blockly plify development and facilitate experimenting with a fits nicely with its proposed use in programming be- variety of programming idioms. We hope that together haviorally. Still to minimize confusion, we avoided us- with previously described ideas about scenario-based ing the terms block and blocking in two other com- and behavioral programming, this paper will help drive mon software-related meanings, namely, (c) stopping the incorporation of these principles into a wide vari- a process or a subroutine while waiting for an event or ety of new and existing environments for development resource; and, (d) a segment of program code which with agents, actors, and decentralized control, and will contains all the commands between some end-markers help add them into the basic set of programming con- such as curly braces or begin and end. cepts that are understandable by and useful for novice and expert programmers alike. 2. Behavioral Programming We propose that decentralized scenario oriented pro- In this section we outline the technique of Behavioral gramming techniques offer significant advantages over Programming for the development of reactive systems. traditional programming metaphors in this specific do- Formal definitions and comparisons with other pro- main. Consider, for example, an application with some gramming techniques appear in [14, 17, 19]. buttons on a screen where there is a requirement that A preliminary assumption in our implementation of the software reacts to a sequence of button clicks in behavioral programming is that an application, or a a certain way. Using a non-behavioral style with, e.g., system, is focused on processing streams of events with JavaScript, one of the standard programming languages the goal of identifying and reacting to occurrences of in this domain, the programmer would handle each meaningful scenarios. Detected event sequences are button-click separately, and introduce special code to then used to trigger abstract, higher level, events, which manage state for recognizing the specific sequence of in turn may trigger other events. Some of these events events. We argue that with behavioral programming are translated to actions that the system takes to effect such a requirement can be coded in a single imperative changes in the external world. This cycle results with script with state management being implicit and natural a reactive system that translates inputs coming from its rather than explicit. See Section 5.1. sensors to actions performed by its actuators. Our choice of the domain of interactive technology Requested Events is influenced also by the current debate about the rel- b-thread ative merits of Flash and JavaScript/HTML5 technolo- Blocking gies (see, e.g., [28]). We believe that the technologi- b-thread cal discussion conducted mainly in industry should be b-thread accompanied with academic revisiting and analysis of b-thread software engineering and methodology aspects. Selected Event Figure 1. Behavioral programming execution cycle: About the terms block and blocking all b-threads synchronize, declaring requested and As we are dealing with languages and programming id- blocked events; a requested event that is not blocked ioms, the reader should note that the term block appears is selected and b-threads waiting for it are resumed. in this paper in two different meanings: (a) a brick or a box - referring to programming command drawn as More specifically, in a behavioral program, event a two-dimensional shape; and (b) a verb meaning to sequences are detected and generated by independent forbid or to prevent, associated with the behavioral pro- threads of behavior that are interwoven at run time in gramming idiom for declaring events that must not hap- an enhanced publish/subscribe protocol. Each behav- pen at a given point in time. It is interesting to observe ior thread (abbr. b-thread) specifies events which, from that these meanings are individually commonly used its own point of view must, may, or must not occur. and are appropriate for the intent, that finding alterna- As shown in Figure 1, the infrastructure consults all tive terms for the sole purpose of disambiguation, is un- b-threads by interweaving and synchronizing them, and Author-prepared version; See published version in AGERE! 2012 - ACM DL 2 2012/12/19 selects the events that will constitute integrated sys- ness of b-threads (see Section 5) facilitate subsequent tem behavior without requiring direct communication adding and changing of event choices. between b-threads. Specifically, all b-threads declare The behavioral programming technique facilitates events that should be considered for triggering (called new automated approaches for planning in execu- requested events) and events whose triggering they for- tion [12, 15], program verification and synthesis [13, bid (block), and then synchronize. An event selection 18, 22], visualization and debugging of concurrent ex- mechanism then triggers one event that is requested and ecution [5], natural language coding of scenarios [9], not blocked, and resumes all b-threads that requested and program repair [20] . the event. B-threads can also declare events that they simply “listen-out for”, and they too are resumed when 3. Infrastructure Implementation these waited-for events occur. 3.1 Coordinating behaviors written in JavaScript This facilitates incremental non-intrusive develop- In principle, the concepts of behavioral programming ment as outlined in the example of Figure 2. For are language independent and indeed they have been another example, consider a game-playing program, implemented in a variety of languages using differ- where each game rule and each player strategy is added ent techniques. However, certain language facilities in a separate module that is oblivious