[PPT] - Hop and HipHop: Multitier Web Orchestration Grard Berry*, Manuel PowerPoint Presentation

SLIDE 1

Hop and HipHop: Multitier Web Orchestration

Gérard Berry*, Manuel Serrano**

*Collège de France Chair Algorithms, Machines and Langages **Inria Sophia-Antipolis Indian Imagination : pbase.com/gberry

ICDCIT, Bhubaneswar, Feb. 6, 2014

SLIDE 2

06/02/2014 2

G. Berry, ICDCIT

SLIDE 3

1988-1992 (CERN): http, html, url
1994: cgi, netscape, javascript s., cookie, ssl / https
1995: ie, http1.0, html2, javascript client, php
1997: flash, gecko, apache, opera, css, http1.1, auth,

dhtml

1999: css2, mathml, svg, html4, soap, httpu, ajax
2001: (xhtml), dom, wsdl
2002-08: webkit, canvas, html5, chrome, json, jquery
2010: mobile, websocket

06/02/2014 3

G. Berry, ICDCIT

A Darwinian Technology Space

display transport program navigator

SLIDE 4

06/02/2014 4

G. Berry, ICDCIT

The Primitive Web

http client server 1 html html http server 2 The program is the server

SLIDE 5

06/02/2014 5

G. Berry, ICDCIT

The Web 1.0: chatting with the server

S1 ... Main difficulty: make sense of the BACK button! http html The program is in the server cookie client

SLIDE 6

06/02/2014 6

G. Berry, ICDCIT

The Web 2.0: distributed programming

http client server 1 html server 2 js js The program is distributed between the server(s) and client(s) hello

SLIDE 7

06/02/2014 7

G. Berry, ICDCIT

Future Web : Diffuse Programming

server 1 server 2 js js Distributed programs everywhere

SLIDE 8

Lots of technologies and languages to master

⇒ heterogeneous ad-hoc programming 

Fundamental programming difficulties

– distributed programming is hard – thread-based programming is error-prone – (non-determinism, deadlocks, difficulty to debug) – idem for handling events by event-handlers – orchestrating asynchronous activities is problematic

06/02/2014 8

G. Berry, ICDCIT

Web Programming is Currently Too Difficult

Our solution: A single programming framework: Hop A Hop-embedded orchestration DSL: HipHop

SLIDE 9

Single language for all web programming needs
Full algorithmic language: functional, Scheme-based
Embeds HTML, makes it extensible
Classical multithreading (indispensable)
Multitier single code for client(s) / server(s)
Server client code generation and shipping

(client programs are server values)

Automatic data communication
Direct definition and use of web services

06/02/2014 9

G. Berry, ICDCIT

Hop’s Features

SLIDE 10

3 3

06/02/2014 10

G. Berry, ICDCIT

HTML → Hop Example

1 2 fib(3)=2

SLIDE 11

06/02/2014 11

G. Berry, ICDCIT

HTML / Javascript → Hop

<DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” ”http://www/w3/org/TR/htm14/strict.dtd”> <HTML> <HEAD> <META http-equiv=”Contents-Type” content=”text/html”> <SCRIPT src=”fib.js” type=”application/javascript/”/> </HEAD> <BODY> <TABLE> <TR> <TD onclick=”alert(’fib(1)=’+fib(1))”>1</TD> </TR> <TR> <TD onclick=”alert(’fib(2)=’+fib(2))”>2</TD> </TR> <TR> <TD onclick=”alert(’fib(3)=’+fib(3))”>3</TD> </TR> </TABLE> </BODY> </HTML>

SLIDE 12

06/02/2014 12

G. Berry, ICDCIT

Hop Multi-Tier Programming

<DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www/w3/org/TR/htm14/strict.dtd”> (<HTML> ;; server-side function (<HEAD> :script ”fib.js”) <META http-equiv=“Contents-Type” content=“text/html”> <SCRIPT src=“fib.js” type=“application/javascript/”/> </HEAD> (<BODY> (<TABLE> (<TR> (<TD> :onclick ~(alert ”fib(1)=” (fib 1)) 1)) (<TR> (<TD> :onclick ~(alert ”fib(2)=” (fib 2)) 2)) (<TR> (<TD> :onclick ~(alert ”fib(3)=” (fib 3)) 3))))) > </TR>

client-side mark

SLIDE 13

06/02/2014 13

G. Berry, ICDCIT

Hop Structured Programming (1)

(module Fibo ~(js fib) ;; ship Javascript fib code to clientm 14/strict.dtd”> (define-service (fibonacci-3) (<HTML> (<HEAD> :script ”fib.js”) (<BODY> (<TABLE> (<TR> (<TD> :onclick ~(alert ”fib(1)=” (fib 1)) 1)) (<TR> (<TD> :onclick ~(alert ”fib(2)=” (fib 2)) 2)) (<TR> (<TD> :onclick ~(alert ”fib(3)=” (fib 3)) 3))))))

code shipped to client http://myserver:8080/hop/fibonacci-3

SLIDE 14

(module Fibo ~(js fib) ;; ship Javascript fib code to client 14/strict.dtd”> (define-service (fibonacci-3) (<HTML> (<HEAD> :script ”fib.js”) (<BODY> (<TABLE> (<TR> (<TD> :onclick ~(alert ”fib(1)=” (fib 1)) 1)) (<TR> (<TD> :onclick ~(alert ”fib(2)=” (fib 2)) 2)) (<TR> (<TD> :onclick ~(alert ”fib(3)=” (fib 3)) 3))))))

06/02/2014 14

G. Berry, ICDCIT

Hop Structured Programming (2)

(define-tag <TR-FIB> (i) (<TR> (<TD> :onclick ~(alert ”fib” $i “=” (fib $i)) i)))

server value exported to client

SLIDE 15

(module Fibo ~(js fib) ;; ship Javascript fib code to clientm 14/strict.dtd”> (define-service (fibonacci-3) (<HTML> (<HEAD> :script ”fib.js”) (<BODY> (<TABLE> (<TR-FIB> 1)) (<TR-FIB> 2)) (<TR-FIB> 3)))))

06/02/2014 15

G. Berry, ICDCIT

Hop Structured Programming (3)

(define-tag <TR-FIB> (i) (<TR> (<TD> :onclick ~(alert ”fib” $i “=” (fib $i)) i)))

SLIDE 16

06/02/2014 16

G. Berry, ICDCIT

Hop Functional Programming (1)

(module Fibo ~(js fib) ;; ship Javascript fib code to clientm 14/strict.dtd”> (define-service (fibonacci-3) (<HTML> (<HEAD> :script ”fib.js”) (<BODY> (<TABLE> (map <TR-FIB> ’(1 2 3)))))) (define-tag <TR-FIB> (i) (<TR> (<TD> :onclick ~(alert ”fib” $i “=” (fib $i)) i)))

SLIDE 17

06/02/2014 17

G. Berry, ICDCIT

Hop Functional Programming (2)

(module Fibo ~(js fib) ;; ship Javascript fib code to client 14/strict.dtd”> (define-service (fibonacci-3) (<HTML> (<HEAD> :script “fib.js”) (<BODY> (<TABLE> (map <TR-FIB> (iota 3 1)))))) (define-tag <TR-FIB> (i) (<TR> (<TD> :onclick ~(alert ”fib” $i “=” (fib $i)) i)))

SLIDE 18

06/02/2014 18

G. Berry, ICDCIT

Hop Web Service Definition

(module Fibo ~(js fib) ;; ship Javascript fib code to client m 14/strict.dtd”> (define-service (fibonacci-list n) ;; arbitrary input list (<HTML> (<HEAD> :script “fib.js”) (<BODY> (<TABLE> (map <TR-FIB> (iota (string->number n) 1))))) (define-tag <TR-FIB> (i) (<TR> (<TD> :onclick ~(alert ”fib” $i “=” (fib $i)) i)))

http://myserver:8080/hop/fibonacci-list?n=10

SLIDE 19

06/02/2014 19

G. Berry, ICDCIT

Exchanging data using services

;; build table of fib values as a list (define-service (fibonacci-list2 n) (map (lambda (i) (cons i (fib i))) (iota n)))

builds server url with argument 1 1 2 1 3 2 4 3 5 5 6 8

;; client code ~(with-hop ($fibonacci-list2 8) (lambda (lst) (<TABLE> (map (lambda (i) (<TR> (<TD> (car i)) (<TD> (cdr i)))) lst))))

builds HTML

n the client

SLIDE 20

Building complex applications by combining

existing web services

Making them portable to any device

– computer, smartphone, tablet, car, coffemaker, etc.

06/02/2014 20

G. Berry, ICDCIT

The Web Orchestration Problem

1. Handling lots of events of various kinds

the main goal of Hiphop

2. Handling data streams

currenly not done by HipHop the main goal of Orc / FRP / Flapjax

SLIDE 21

06/02/2014 21

G. Berry, ICDCIT

player events mouse events network events (including error events) keyboard events hop server events

SLIDE 22

06/02/2014 22

G. Berry, ICDCIT

Esterel : Reactive Event Handling

Second Meter → Lap Step → Hour → Morning HeartBeat → HeartAttack

SLIDE 23

06/02/2014 23

G. Berry, ICDCIT

abort run Slowly when 100 Meter ; every Morning do end every loop each Lap abort every Step do run Jump || run Breathe end every when 15 Second ; trap HeartAttack in || CheckHeart exit HeartAttack handle HeartAttack do run RushToHospital end trap abort when 4 Lap

The Esterel Runner

abort run Slowly when 100 Meter ; run FullSpeed

SLIDE 24

06/02/2014 24

G. Berry, ICDCIT

The ABRO Example

Emit O as soon as A and B have arrived Reset behavior each time R is received Get artists R : new artist name A : music B : picture O : play & display

A / B / A / O B / O A B / O R / R / R / R /

SLIDE 25

06/02/2014 25

G. Berry, ICDCIT

Esterel = Linear Specification

loop abort { await A || await B }; emit O ; halt when R end loop

A / B / A / O B / O A B / O R / R / R / R /

SLIDE 26

06/02/2014 26

G. Berry, ICDCIT

Linear ⇒ No Source Code Explosion !

loop abort { await A || await B || await C }; emit O ; halt when R end loop ABCRO

source: l’oreille cassée, Hergé

SLIDE 27

06/02/2014 27

G. Berry, ICDCIT

Cycle-Based Software Synchrony

Cyclic execution: static scheduling + 4-stroke engine read inputs wait compute reaction generate outputs Synchronous = Zero-delay = within the same cycle

parallel propagation of control parallel propagation of signals Concurrency resolved at compile-time – no threads!

⇒ determinism, no event / computation interference

SLIDE 28

Avionics : Rafale, Airbus, Embraer, CARERI, etc,
Trains, heavy industry, robotics
Telecom
Simulation of physical processes
Circuit design, synthesis, and verification
Music composition (!)

06/02/2014 28

G. Berry, ICDCIT

Synchronous Languages in Practice

Both in industrial and academic contexts

SLIDE 29

06/02/2014 29

G. Berry, ICDCIT

ABRO en circuits

loop abort { await A || await B }; emit O ; halt when R; end loop

SLIDE 30

06/02/2014 30

G. Berry, ICDCIT

30

G. Berry, Collège de France

module Vishnu-3 : loop trap T1 in signal S1 in pause; emit S1; exit T1 || loop trap T2 in signal S2 in pause; emit S2; exit T2 || loop present S1 and S2 then emit X end; present S1 and not S2 then emit Y end; present not S1 and not S2 then emit Z end; pause end loop end signal end trap end loop end signal end trap end loop end module

SLIDE 31

Provide the user with a unified vision of event handling

– GUI client events – events raised by services – events raised by web-connected objects – temporal events (e.g., timer expired) – Hop-generated events

Define how to react to events in function of the memory of past

events => orchestration

Avoid all threads / event-listeners synchronization problems

using Esterel’s synchronous programming style

06/02/2014 31

G. Berry, ICDCIT

HipHop’s Goal w.r.t. Orchestration

Exactly Esterel’s goal, but more ambitious: integration within Hop, dynamicity, multitier, etc.

SLIDE 32

06/02/2014 32

G. Berry, ICDCIT

Classical Javascript / HOP event Handling

(add-event-listener! ev (lambda (e) ...)) ev → (lambda (e) ...)) ... ... ... ev

interference risk:

listener call in listener execution

serious for complex
listeners!
nly if idle

SLIDE 33

ev1 → (lambda (x) ...)) ev2 → (lambda (x) ...))

06/02/2014 33

G. Berry, ICDCIT

The Synchronous Approach

ev1

1947

reactive code ev2 reaction trigger reactive machine sequence, parallelism, communication, preemption synchronous, conceptually 0-delay

SLIDE 34

Boolean presence / absence status, unique at each instant

(now& e) ;; Hop boolean expression (pre& e) ;; status at previous instant

06/02/2014 34

G. Berry, ICDCIT

HipHop Events

(class HipHopEvent ...) ;; similar to Esterel signals (class HipHopEvent ...) ;; but first-class objects as in ReactiveML

value of arbitrary type, unique at each instant

(val& e) ;; Hop expression (preval& e) ;; value at previous instant

combination functions for multiple synchronous emissions

(class CountEvent::HipHopEvent (status (default #f)) (init (default 0)) (op (default +)) ... )

SLIDE 35

06/02/2014 35

G. Berry, ICDCIT

ABRO in HipHop

;; Hop function defining HipHop code (define (ABRO& A B R O) (loop-each& (now& R) (par& (await& (now& A)) (await& (now& B))) (emit& O))) // Esterel module module ABRO : input A, B, R;

utput O;

loop { await A || await B }; emit O; each R end module Emit O as soon as both A et B have arrived Reset behavior each R

SLIDE 36

06/02/2014 36

G. Berry, ICDCIT

Variant of ABRO

After first R and every subsequent R, emit O as soon as A and B have arrived. Terminate if A et B occur simultaneously (define (ABRObis& A B R O) (trap& Done (every& (now& R) (par& (await& (now& A)) (await& (now& B))) (emit& O) (if& (and (now& A) (now& B)) (exit& Done)))))

SLIDE 37

06/02/2014 37

G. Berry, ICDCIT

HipHop Kernel: AST constructors*

stmt& : (nothing&) (emit& e hop*) (atom& hop) (pause&) (if& hop stmt& stmt&) (seq& stmt&+) (loop& stmt&+) (par& stmt&+) (suspend& hop stmt&+) (trap& trap-ident stmt&+) (exit& trap-ident) (local& (local-e+) stmt+)

* AST = Abstract Syntax Tree

SLIDE 38

06/02/2014 38

G. Berry, ICDCIT

HipHop Language Extensibility

Statements derived from primitive ones:

(halt&) (sustain& e hop) (await& [ :immediate bool ] delay stmt*) (abort& [ :immediate bool ] delay stmt+) (until& [ :immediate bool ] delay stmt+) ;; Esterel weak abort (loop-each& delay stmt+) (every& [ :immediate bool ] delay stmt+) (define (sustain& e . hop-list) (loop& (emit& (cons e hop-list) (pause&))) Build sustain&’s AST using Hop

SLIDE 39

06/02/2014 39

G. Berry, ICDCIT

HipHop Language Extensibility

(define (await-last-of& . e-list) (par& (map await& e-list))) (await-last-of& A B C) (par& (await& A) (await& B) (await& C)) Extension : dynamic reactive behavior definition genpar&, dyngenpar& : dynamically compute the par& instruction during the reaction

SLIDE 40

06/02/2014 40

G. Berry, ICDCIT

HipHop Language Extensibility

(define (repeat& N::int stmt) ;; declare a fresh private Hop counter (let ((count::int N)) ;; install a trap to exit after N steps (trap& end ;; reset the local counter (atom& (set! count N)) ;; loop until exit& (loop& ;; execute the user stmt stmt ;; increment the Hop counter (atom& (set! count (−fx count 1))) (if& (= count 0) ;; the end, escape from the loop (exit& end))))))

Note: true function not ugly macro!

SLIDE 41

06/02/2014 41

G. Berry, ICDCIT

Modularity inherited from Hop

(let ((e (instantiate::HipHopEvent))) (par& (Emitter& e) (Receiver& e))) (define (Emitter& e) ... (emit& e) ...) (define (Receiver& e) ... (await& e) ...) e

SLIDE 42

06/02/2014 43

G. Berry, ICDCIT

Execution Machine

Goal : handle input and output HipHop events
But : triggers the HipHop reaction when asked to

(define M (instantiate::HipHopMachine (program P&))) A B :: int

M P& : HipHop code

A B val& B X Y :: int X Y val& Y

SLIDE 43

06/02/2014 44

G. Berry, ICDCIT

Execution Machine: Input and Reaction

(hiphop-input! M A) ... (hiphop-input! M B 1947) ... (hiphop-react!) ;; atomic ! (hiphop-input-and-react! M A) (hiphop-input-and-react! M B 1947) A B :: int X Y :: int

M P& : HipHop code

A B val& B X Y val& Y

HipHop input: Calling the hiphop-input! Hop function in the main Hop code or in an event handler

SLIDE 44

06/02/2014 45

G. Berry, ICDCIT

Execution Machine: Gathering Inputs

handling inputs beween two reactions

A = STOP PLEASE: one press is sufficient to set the bit ... B = Toc : please count the Tocs! Toc Toc Toc → (hiphop-input! M Toc 3) A B :: int X Y :: int

M P& : HipHop code

A B val& B X Y val& Y

SLIDE 45

06/02/2014 46

G. Berry, ICDCIT

Execution Machine : Output

Define an HipHop event-listener for each output,

called by M if the reaction emits the signal

A B :: int X Y :: int

M P& : HipHop code

A B val& B X Y val& Y

(hiphop-add-event-listener! M X (lambda () (action) )) (hiphop-add-event-listener! M Y (lambda (V) (action V) ))

SLIDE 46

06/02/2014 47

G. Berry, ICDCIT

hopfm& : Five Synchronous Activities

(define (hopfm&) (until& (memq (val& musicstate) '(stop ended)) (par& ;; running all the components in synchronous parallel ;; peek a random playlist (random-playlist& catalog genre playlist) ;; manage a playlist (playlist& playlist) ;; deal with new tracks (track& track album artist) ;; manage new artists (artist-info& catalog genre artist bio discog similar playlist) ;; update the gui (gui& musicstate track album artist bio discog similar))))

SLIDE 47

06/02/2014 48

G. Berry, ICDCIT

Finding a Random Artist With Music

(define (random-playlist& catalog genre playlist) (trap& found ;; start looping (loop& ;; creates two local events (local& ((local-artist (instantiate::HipHopEvent)) (local-playlist (instantiate::HipHopEvent))) ;; get a random artist from FMA (with-hop& ($hopfm/genre/artist/random genre catalog) local-artist) ;; get the tracks of that artist (with-hop& ($hopfm/artist/tracks (val& local-artist)) local-playlist) (if& (pair? (val& local-playlist)) ;; an artist with music is found (seq& (emit& playlist (val& local-playlist)) (exit& found)))))))

SLIDE 48

06/02/2014 49

G. Berry, ICDCIT

From Specification To HipHop Code

(define (artist-info& catalog genre artist bio discog similar playlist) (every& (now& artist) ;; we have a playlist for that artist (par& ;; request a similar artist list (similar-artist& catalog genre playlist artist similar) ;; fetch artist biography and discography (artist/bio& artist bio discog) ;; fetch the artist images (artist/image& artist)))) The artist-info& component searches in parallel an image of the current artist, information about that artist, and a similar artist with a playlist. It outputs bio, discog, similar, and playlist towards the other components as soon as the corresponding information has been found.

SLIDE 49

06/02/2014 50

G. Berry, ICDCIT

Fetching an Image From Two Sites

(define (artist/image& artist) ;; find the first image out of two services (let ((el (dom-get-element-by-id "hophifi-internet-artist-image"))) (local& ((img (instantiate::HipHopEvent (name "image")))) ;; try finding one image on two different servers ;; abort the pending request as soon as one returns (trap& (done) (par& (seq& (with-hop& ($hopfm/artist/image (val& artist)) img) (if& (now& img) (exit& done))) (seq& (with-hop& ($hopfm/artist/image/echonest (val& artist)) img) (if& (now& img) (exit& done))))) (if& (now& img) ;; update the GUI with the new image (atom& (node-style-set! el :visibility "visible") (set! el.src (val& img))) ;; no image was found, hides the current one (atom& (node-style-set! el :visibility "hidden"))))))

SLIDE 50

06/02/2014 51

G. Berry, ICDCIT

(trap& (done) (par& (seq& (with-hop& ($hopfm/artist/image (val& artist)) img) (if& (now& img) (exit& done))) (seq& (with-hop& ($hopfm/artist/image/echonest (val& artist)) img) (if& (now& img) (exit& done))))) (if& (now& img) <then> <else>)))

parallel search, immediately terminates by exit& as soon as

ne search returns an image

but parallel may also terminate if both searches return no image

SLIDE 51

06/02/2014 52

G. Berry, ICDCIT

HipHop fix for Chromium Bug

(define (onended& play ended stop) (every& (now& play) ;; new music in the player (until& (or (now& stop) (now& ended)) (loop& ;; slow loop polling music duration (let& ((music (val& play))) (if& (music-duration? music) (await& (timer& (music-duration music)) (loop& ;; fast loop polling music-ended? (if& (music-ended? music) (emit& ended music) (await& (timer& 10))))) (await& (timer& 100))))))

no threads, no event loop

SLIDE 52

The web becomes the universal diffuse platform
Hop greatly simplifies and integrates web

programming

HipHop greatly simplifies reaction to events and global

service orchestration

But stream orchestration à la ORC not yet available

06/02/2014 53

G. Berry, ICDCIT

Conclusion

More research and experimentation needed!

SLIDE 53

ReactiveC (F. Boussinot) ,Reactive ML (L. Mandel)

integration within C / ML

– successors : Junior (Java), SugarCubes, FunLoft, etc.

06/02/2014 54

G. Berry, ICDCIT

Related Reactive Work

Timed CCP, V. Saraswat :

– integration within Concurrent Constraint Programming

– much more implicit control

Esterel, Lustre, Signal

– environment integration not part of the language

Esterel Execution Machines (C. André, D. Gaffé)
Quartz, SCL in Germany