Reactive Web Programming

Transcription

1 Reactive Web Programming Colin Vidal INRIA Sophia Antipolis Supervisors : Manuel Serrano Gérard Berry December 2, / 14

2 JavaScript language A mainstream language to write web application : very easy to write dynamic (modular) program, which parts on remote servers ; embedded in common web browsers ; also use in server side (NodeJS) ; no threads with shared memory capabilities ; asynchronous ; efficient, thanks to JIT ; 2 / 14

3 Hop.js Language for building web, multitiers web applications. A JavaScript run-time with few goodies : defines easily route (URL), or access to distant services, with language primitives ; server and client code in the same program ; fully compatible with NodeJS libraries ; parse and evaluate XML trees like an imbrication of functions. function BAR() { console.log( bar called ); } function FOO(attrs) { console.log( foo called, attrs.val) } <bar><foo val=5 /></bar> will print foo called 5 bar called 3 / 14

4 Way to program web applications The web is conceptually asynchronous no control on layers which it depends (we won t block) ; interactions between different peers is asynchronous (eg. requests of users, answer to them, UI events... ) ; no way to keep track of state without using global variables and big automates. It s difficult to have a global view of sequential execution of the program, because of the continuations : difficult to avoid bug and maintains. needs to orchestration technique. 4 / 14

5 Esterel language Originally, Esterel is : static code, no run-time dynamic loading very efficient for schedule, control and orchestrate asynchronous code in a synchronous way used to be embedded on host language ; Adapted for embedded systems, static languages... but actually not adapted to web programming. 5 / 14

6 Esterel + JavaScript How to get power of control of Esterel, keeping the flexibility, and asynchronous style of JavaScript? 6 / 14

7 HipHop.js A Hop.js library which is : a reactive extension of the language ; a partial clone of Esterel ; specific of JavaScript programming. A reactive HipHop.js program is describe with an XML tree (avoid parsing), eventually, it will be a DSL. 7 / 14

8 1 " use hopscript " 2 var rjs = require (" reactive -js"); 3 var prg = < rjs. reactivemachine name =" ABRO " > 4 <rjs. inputsignal name ="R" /> 5 <rjs. inputsignal name ="A" /> 6 <rjs. inputsignal name ="B" /> 7 <rjs. outputsignal name ="O"/> 8 <rjs. loop > 9 <rjs. abort signal_name ="R"> 10 <rjs. sequence > 11 <rjs. parallel > 12 <rjs. await signal_name ="A" /> 13 <rjs. await signal_name ="B" /> 14 </ rjs. parallel > 15 <rjs. emit signal_name ="O" /> 16 <rjs. halt /> 17 </ rjs. sequence > 18 </ rjs. abort > 19 </ rjs. loop > 20 </ rjs. reactivemachine >; 8 / 14

9 1 function foo ( evt ) { 2 console. log ( evt. signal, "is set "); 3 } 4 5 prg. seteventlistener ("O", foo ); 6 7 prg. setinput ("A"); 8 prg. setinput ("B"); 9 prg. react (); // will print "O is set " 9 / 14

10 Compilation of HipHop.js program Goal : simulation of circuits, with high level objects that represent components and wires (not concerned by optimization yet). var foo = <ReactiveMachine name="foo">... </ReactiveMachine>; 1. The XML tree is evaluated in Hop.js, as a regular imbrication of functions ; 2. this evaluation build an AST tree of the program ; 3. visitors cross on it, building the run-time objects ; 4. returns a reactive machine into foo. 10 / 14

11 What we have now, with HipHop.js? same semantics that Esterel (core language, immediate reaction to the absence) ; expression and types are directly in JavaScript ; tiny API to set event handler on signal emission, set inputs, start reaction ; save the machine state, and restore it for a further execution. 11 / 14

12 Merge signal and variables Esterel variables can t be shared between concurrent threads, since a thread write on it : avoid non-determinism ; difficult to use it ; odd for peoples from imperative programming. The SCL language allow it, since there is an deterministic order between initialization, writing and reading the variables. 12 / 14

13 Conclusion Orchestrate web applications with a re-implementation of Esterel, keeping lot of the language : web programmers just have to write a reactive machine and plug already existing inputs events and callbacks on it ; all of core statement of Esterel, no compromise Lots of things to be done, for instance : Make easy to use debugging tools ; more concise way to write reactive program than XML ; make applications, find users! 13 / 14

14 Thanks for your attention! 14 / 14