The Browser Environment - A Systems Programmer's Perspective

Eleanor McHugh

http://slideshare.net/feyeleanor

http://github.com/feyeleanor/TheBrowserEnvironment
The Browser Environment
A Systems Programmer's Perspective

[a rant in diverse movements]

TL;DR
JavaScript Concurrency is a Confused Mess

if you disagree you have serious Stockholm Syndrome

Elric of Melniboné, Michael Moorcock
E
lric sent his mind into twisting tunnels of logic,
across endless plains of ideas, through
mountains of symbolism and endless universes
of alternate truths; he sent his mind out further
and further and as it went he sent with it the words [...] words
that few of his contemporaries would understand...

pay attention!
all code is BSD 2-clause licensed

any resemblance to actual code &
conceptstm, living or dead, is probably
your imagination playing tricks on you

if you can make money from it you're
doing a damn sight better than we are!

In Digital Spaces
•2006 -> present [inidsol.uk]

•13 US patents

•real-time systems

•digital identity

•distributed ledgers

•DNS -> [TCP|UDP] -> HTTP

•Ruby -> Go -> JavaScript
Seeking Identity
Ellie

[physicist]
Romek

[cryptographer]

Since 2009
•http://leanpub.com/GoNotebook

•http://github.com/feyeleanor

•http://slideshare.net/feyeleanor
Abusing Go

HTTP[S]
serving web content with go

package main

import "fmt"

import "io/ioutil"

import "net/http"

import "os"

import "strings"

const LAUNCH_FAILED = 1

const FILE_READ = 2

const ADDRESS = ":3000"

var MESSAGE string

func main() {

s := strings.Split(os.Args[0], "/")

html, e := ioutil.ReadFile(s[len(s) - 1] + ".html")

Abort(FILE_READ, e)

MESSAGE = string(html)

http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {

w.Header().Set("Content-Type", "text/html")

fmt.Fprint(w, MESSAGE)

})

Abort(LAUNCH_FAILED, http.ListenAndServe(ADDRESS, nil))

}

func Abort(n int, e error) {

if e != nil {

fmt.Println(e)

os.Exit(n)

}

}

<!DOCTYPE html>

<html>

<head>

<meta charset='UTF-8' />

<title>SERVING HTML</title>

</head>

<body>

<h1>SERVING HTML</h1>

<div>

hello world!

</div>

</body>

</html>

func main() {



Abort(FILE_READ, e)





})


}

package main

import "fmt"

import "io/ioutil"

import "net/http"

import "os"

import "strings"


const FILE_READ = 2


var MESSAGE string

func main() {



Abort(FILE_READ, e)


http.HandleFunc("/", billboard)


}

func billboard(w http.ResponseWriter, r *http.Request) {



}


if e != nil {

fmt.Println(e)

os.Exit(n)

}

}

<!DOCTYPE html>

<html>

<head>



</head>

<body>


<div>

hello world!

</div>

</body>

</html>

func main() {



Abort(FILE_READ, e)




}




}

package main

import "fmt"

import "io/ioutil"

import "net/http"

import "os"

import "strings"


const FILE_READ = 2


const CERT="cert.pem"

const KEY="key.pem"

var MESSAGE string

func main() {



Abort(FILE_READ, e)



Abort(LAUNCH_FAILED, http.ListenAndServeTLS(ADDRESS, CERT, KEY, nil))

}




}


if e != nil {

fmt.Println(e)

os.Exit(n)

}

}

<!DOCTYPE html>

<html>

<head>



</head>

<body>


<div>

hello world!

</div>

</body>

</html>

func main() {



Abort(FILE_READ, e)



Abort(LAUNCH_FAILED, http.ListenAndServeTLS(ADDRESS, CERT, KEY, nil))

}

Microsoft's Gift

to Humanity
the XMLHttpRequest object

aka

AJAX
asynchronous javascript and XML

AJAX
Asynchronous JavaScript and XML
•JavaScript is a single-threaded language

•but browsers are event-driven environments

•so JavaScript runtimes normally have three basic threads

•one to run the main script

•one to run scripts for high priority events

•one to run scripts for low priority events

•and each event can have callbacks de
fi
ned for it

AJAX
Asynchronous JavaScript and XML
•XMLHttpRequest
fi
rst appeared in MSXML

•available in IE5 as an ActiveX component from 1999

•similar functionality in other browsers from 2000 onwards

•fully supported in IE 7 2006

•despite its name it isn't restricted to XML

•most modern uses involve JSON

package main

import "fmt"

import "net/http"

import "os"

import "strings"

import "text/template"


const FILE_READ = 2

const BAD_TEMPLATE = 3


type Commands map[string] func(http.ResponseWriter, *http.Request)

type PageCon
fi
guration struct { Commands }

func main() {

p := PageCon
fi
guration{

Commands{ "A": AJAX_handler("A"), "B": AJAX_handler("B"), "C": AJAX_handler("C") }}

html, e := template.ParseFiles(BaseName() + ".html")

Abort(FILE_READ, e)



Abort(BAD_TEMPLATE, html.Execute(w, p))

})

for c, f := range p.Commands {

http.HandleFunc("/"+c, f)

}


}


if e != nil {

fmt.Println(e)

os.Exit(n)

}

}

func BaseName() string {


return s[len(s)-1]

}

func AJAX_handler(c string) func(http.ResponseWriter, *http.Request) {

func(w http.ResponseWriter, r *http.Request) {

w.Header().Set("Content-Type", "text/plain")

fmt.Fprint(w, c)

}

}
<!DOCTYPE html>

<html>

<head>


<title>AJAX EXAMPLE</title>

<script>

function print(e, m) {

document.getElementById(e).innerHTML += `<div>${m}</div>`;

}

{{range $c, $v := .Commands}}

function {{$c}}() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

print("event_log", this.responseText);

}

};

xhttp.open("GET", "{{$c}}", true);

xhttp.send();

}

{{end}}

</script>

</head>

<body>

<h1>AJAX EXAMPLE</h1>

<h2>Known Asynchronous Actions</h2>

<div>


<span>

<button type="button" onclick="{{$c}}();">{{$c}}</button>

</span>

{{end}}

</div>

<h2>Server Output</h2>

<div id='event_log'></div>

</body>

</html>

package main

import "fmt"

import "net/http"

import "os"

import "strings"



const FILE_READ = 2




type PageCon
fi

func main() {

p := PageCon
fi
guration{

Commands{

"A": AJAX_handler("A"),

"B": AJAX_handler("B"),

"C": AJAX_handler("C") }}


Abort(FILE_READ, e)




})



}


}

<!DOCTYPE html>

<html>

<head>



<script>



}


function {{$c}}() {





}

};


xhttp.send();

}

{{end}}

</script>

</head>

<body>



<div>


<span>


</span>

{{end}}

</div>



</body>

</html>


function {{$c}}() {





}

};


xhttp.send();

}

{{end}}


<span>

<button type="button" onclick="{{$c}}();">{{$c}}

</button>

</span>

{{end}}


function {{$c}}() {





}

};


xhttp.send();

}

{{end}}

package main

import "fmt"

import "net/http"

import "os"

import "strings"



const FILE_READ = 2




type PageCon
fi

func main() {

p := PageCon
fi
guration{



Abort(FILE_READ, e)




})



}


}


if e != nil {

fmt.Println(e)

os.Exit(n)

}

}



return s[len(s)-1]

}




fmt.Fprint(w, c)

}

}
<!DOCTYPE html>

<html>

<head>



<script>



}


function {{$c}}() {


xhttp.open("GET", "{{$c}}", false);

try {

xhttp.send();

print("event_log", xhttp.responseText);

} catch(err) {

print("event_log", `Request Failed: ${err}`);

}

}

{{end}}

</script>

</head>

<body>



<div>


<span>


</span>

{{end}}

</div>



</body>

</html>


function {{$c}}() {


xhttp.open("GET", "{{$c}}", false);

try {

xhttp.send();

print("event_log", xhttp.responseText);

} catch(err) {

print("event_log", `Request Failed: ${err}`);

}

}

{{end}}

fetch
a promise of things to come

package main

import "fmt"

import "net/http"

import "os"

import "strings"



const FILE_READ = 2




type PageCon
fi

func main() {

p := PageCon
fi
guration{



Abort(FILE_READ, e)




})



}


}


if e != nil {

fmt.Println(e)

os.Exit(n)

}

}



return s[len(s)-1]

}




fmt.Fprint(w, c)

}

}
<!DOCTYPE html>

<html>

<head>


<title>FETCH EXAMPLE</title>

<script>



}


async function {{$c}}() {

let response = await fetch("{{$c}}");

if (response.ok) {

let body = await response.text();

print("event_log", body);

} else {

print("event_log", `Request Failed: ${response.status}`);

}

}

{{end}}

</script>

</head>

<body>

<h1>FETCH EXAMPLE</h1>


<div>


<span>


</span>

{{end}}

</div>



</body>

</html>



fetch("{{$c}}")

.then(response => response.text())

.then(text => print("event_log", text))

.catch(e => print("event_log", `Request Failed: ${e}`));

}

{{end}}

package main

import "fmt"

import "io/ioutil"

import "net/http"

import "os"

import "strings"


const FILE_READ = 2


var MESSAGE string

func main() {


html, e := ioutil.ReadFile(s[len(s)-1] + ".html")

Abort(FILE_READ, e)




}




}


if e != nil {

fmt.Println(e)

os.Exit(n)

}

}
<!DOCTYPE html>

<html>

<head>


<title>FETCH EXAMPLE</title>

<script>



}

function hide(...n) {

n.forEach(e => {

document.getElementById(e).innerHTML = "X";

});

}

function show(...n) {

n.forEach(e => {

document.getElementById(e).innerHTML = e;

});

}

function toggle(name) {

print("event_log", name);

hide(name);

switch(name) {

case 'A':

show('B', 'C');

break;

case 'B':

show('A', 'C');

break;

case 'C':

show('A', 'B');

break;

};

}

</script>

</head>

<body>



<div>

<button id='A' type="button" onclick="toggle('A');">A</button>

<button id='B' type="button" onclick="toggle('B');">B</button>

<button id='C' type="button" onclick="toggle('C');">C</button>

</div>



</body>

</html>


n.forEach(e => {


});

}


n.forEach(e => {


});

}



hide(name);

switch(name) {

case 'A':

show('B', 'C');

break;

case 'B':

show('A', 'C');

break;

case 'C':

show('A', 'B');

break;

};

}
<body>



<div>

<button id='A' type="button" onclick="toggle('A');">A</button>

<button id='B' type="button" onclick="toggle('B');">B</button>

<button id='C' type="button" onclick="toggle('C');">C</button>

</div>



</body>

package main

import "fmt"

import "io/ioutil"

import "net/http"

import "os"

import "strings"


const FILE_READ = 2


var MESSAGE string

func main() {



Abort(FILE_READ, e)




}




}


if e != nil {

fmt.Println(e)

os.Exit(n)

}

}
<!DOCTYPE html>

<html>

<head>


<title>DOM EXAMPLE</title>

<script>

function hide(e) {

e.innerHTML = "X";

}

function show(...e) {

e.forEach(e => {

e.innerHTML = e.id;

});

}

var buttons = [];

function toggle(e) {

hide(e);

switch(e.id) {

case 'A':

show(buttons[1], buttons[0]);

break;

case 'B':


break;

case 'C':


break;

};

}

function newButton(id) {

let b = document.createElement("BUTTON");

b.id = id;

b.onclick = new Function("toggle(this);");

b.appendChild(document.createTextNode(id));

return b;

}

window.onload = () => {

let button_bar = document.getElementById("action_buttons");

['A', 'B', 'C'].forEach(n => {

buttons.unshift(newButton(n));

button_bar.appendChild(buttons[0]);

});

};

</script>

</head>

<body>

<h1>DOM EXAMPLE</h1>

<h2>Known Actions</h2>

<div id="action_buttons"></div>

</body>

</html>


n.forEach(e => {


});

}


n.forEach(e => {


});

}
function hide(e) {

e.innerHTML = "X";

}

function show(...e) {

e.forEach(e => {

e.innerHTML = e.id;

});

}



hide(name);

switch(name) {

case 'A':

show('B', 'C');

break;

case 'B':

show('A', 'C');

break;

case 'C':

show('A', 'B');

break;

};

}
var buttons = [];

function toggle(e) {

hide(e);

switch(e.id) {

case 'A':


break;

case 'B':


break;

case 'C':


break;

};

}

function newButton(id) {


b.id = id;

b.onclick = new Function("toggle(this);");

b.appendChild(document.createTextNode(id));

return b;

}



['A', 'B', 'C'].forEach(n => {

buttons.unshift(newButton(n));

button_bar.appendChild(buttons[0]);

});

};
<body>

<h1>DOM EXAMPLE</h1>

<h2>Known Actions</h2>


</body>

package main

import "fmt"

import "net/http"

import "os"

import "strings"



const FILE_READ = 2



type Commands map[string]func(http.ResponseWriter, *http.Request)

type PageCon
fi
guration struct{ Commands }

func main() {

p := PageCon
fi
guration{

Commands{

"A": AJAX_handler("A"), "B": AJAX_handler("B"), "C": AJAX_handler("C") }}


Abort(FILE_READ, e)




})



}


}


if e != nil {

fmt.Println(e)

os.Exit(n)

}

}



return s[len(s)-1]

}


return func(w http.ResponseWriter, r *http.Request) {


fmt.Fprint(w, c)

}

}
<!DOCTYPE html>

<html>

<head>


<title>DOM FETCH EXAMPLE</title>

<script>



}

function doCommand(c) {

fetch(c)




}

function newButton(n, c) {


b.onclick = c;

b.appendChild(document.createTextNode(n));

return b;

}




button_bar.appendChild(

newButton('{{$c}}', () => doCommand('{{$c}}')));

{{end}}

};

</script>

</head>

<body>

<h1>DOM FETCH EXAMPLE</h1>





</body>

</html>






{{end}}

};


fetch(c)




}



b.onclick = c;


return b;

}






{{end}}

};

package main

import "fmt"

import "io/ioutil"

import "net/http"

import "os"

import "strings"


const FILE_READ = 2


var MESSAGE string

func main() {



Abort(FILE_READ, e)




}




}


if e != nil {

fmt.Println(e)

os.Exit(n)

}

}
<!DOCTYPE html>

<html>

<head>


<title>TIMER EXAMPLE</title>

<script>



}


let i = window.setInterval(() => {

print("event_log", "setInterval triggered");

}, 500);

window.setTimeout(() => {

print("event_log", "setTimeout triggered");


window.clearInterval(i);

print("event_log", "setInterval cancelled");

}, 2000);

}, 3000);

}

</script>

</head>

<body>

<h1>TIMER EXAMPLE</h1>

<h2>Timer Events</h2>


</body>

</html>




}, 500);






}, 2000);

}, 3000);

}

package main

import "fmt"

import "io/ioutil"

import "net/http"

import "os"

import "strings"


const FILE_READ = 2


var MESSAGE string

func main() {



Abort(FILE_READ, e)




}




}


if e != nil {

fmt.Println(e)

os.Exit(n)

}

}
<!DOCTYPE html>

<html>

<head>


<title>TIMER EXAMPLE</title>

<script>



}

const doAfter = (i, f) => { return window.setTimeout(f, i) };

const doEvery = (i, f) => { return window.setInterval(f, i) };


let i = doEvery(500, () => {

print("event_log", "doEvery triggered");

);

doAfter(3000, () => {

print("event_log", "doAfter triggered");

doAfter(2000, () => {


print("event_log", "doEvery cancelled");

});

});

}

</script>

</head>

<body>

<h1>TIMER EXAMPLE</h1>

<h2>Timer Events</h2>


</body>

</html>

const doAfter = (i, f) => { return window.setTimeout(f, i) };



let i = doEvery(500, () => {


});

doAfter(3000, () => {


doAfter(2000, () => {



});

});

}




}, 500);






}, 2000);

}, 3000);

}


let i = doEvery(500, () => {


});

doAfter(3000, () => {


doAfter(2000, () => {



});

});

}

package main

import "fmt"

import "net/http"

import "os"

import "strings"



const FILE_READ = 2



type Commands map[string]func(http.ResponseWriter, *http.Request)

type PageCon
fi
guration struct{ Commands }

func main() {

p := PageCon
fi
guration{

Commands{

"A": AJAX_handler("A"), "B": AJAX_handler("B"), "C": AJAX_handler("C") }}


Abort(FILE_READ, e)




})



}


}


if e != nil {

fmt.Println(e)

os.Exit(n)

}

}



return s[len(s)-1]

}


return func(w http.ResponseWriter, r *http.Request) {


fmt.Fprint(w, c)

}

}
<!DOCTYPE html>

<html>

<head>


<title>TIMER FETCH EXAMPLE</title>

<script>

const print = (e, m) => document.getElementById(e).innerHTML += `<div>${m}</div>`;


var timers = {}


if (timers[c]) {

print("event_log", `no longer polling ${c}`);

window.clearInterval(timers[c]);

timers[c] = null;

} else {

print("event_log", `polling ${c}`);

timers[c] = doEvery(500, () => {

fetch(c)




});

}

}



b.onclick = c;


return b;

}






{{end}}

}

</script>

</head>

<body>

<h1>TIMER FETCH EXAMPLE</h1>





</body>

</html>

WebSocket
bidirectional communication

package main

import "fmt"

import "log"

import "net/http"

import "os"

import "strings"


import "golang.org/x/net/websocket"


const FILE_READ = 2



type PageCon
fi
guration struct {

URL string

Commands []string

}

func main() {

p := PageCon
fi
guration{"/socket", []string{"A", "B", "C"}}


Abort(FILE_READ, e)




})

http.Handle(p.URL, websocket.Handler(func(ws *websocket.Conn) {

defer func() {

if e := ws.Close(); e != nil {

log.Println(e.Error())

}

}()

var b struct{ Message string }

for {

if e := websocket.JSON.Receive(ws, &b); e == nil {

log.Printf("received: %vn", b.Message)

websocket.JSON.Send(ws, []interface{}{b.Message})

} else {

log.Printf("socket receive error: %vn", e)

break

}

}

}))


}


if e != nil {

fmt.Println(e)

os.Exit(n)

}

}



return s[len(s)-1]

}
<!DOCTYPE html>

<html>

<head>


<title>WebSocket EXAMPLE</title>

<script>

function print(m) {

document.getElementById("event_log").innerHTML += `<div>${m}</div>`;

}



b.onclick = c;


return b;

}


var socket = new WebSocket(`ws://${location.host}{{.URL}}`);

socket.onopen = (e) => print("opening socket: {{.URL}}");

socket.onclose = (e) => print("closing socket: {{.URL}}");

socket.onerror = (e) => print(e.message);

socket.onmessage = (m) => print(JSON.parse(m.data));




newButton('{{$v}}', () => socket.send(

JSON.stringify({ Message: '{{$v}}' }))));

{{end}}

}

</script>

</head>

<body>

<h1>WebSocket EXAMPLE</h1>





</body>

</html>


type PageCon
fi
guration struct {

URL string

Commands []string

}

func main() {

p := PageCon
fi


Abort(FILE_READ, e)




})


defer func() {



}

}()


for {


log.Printf("received: %vn", b.Message)

websocket.JSON.Send(ws, []interface{}{b.Message})

} else {


break

}

}

}))


}












{{end}}

}

package main

import "fmt"

import "log"

import "net/http"

import "os"

import "strings"




const FILE_READ = 2



type PageCon
fi
guration struct {

URL string

Commands []string

}

func main() {

p := PageCon
fi


Abort(FILE_READ, e)




})

events := make(chan string, 4096)

var monitors []*websocket.Conn


i := len(monitors)

monitors = append(monitors, ws)

defer func() {



}

monitors[i] = nil

}()


for {


events <- b.Message

} else {


break

}

}

}))

go func() {

for {

e := <-events

for _, ws := range monitors {

if ws != nil {

go func(ws *websocket.Conn, e string) {

websocket.JSON.Send(ws, []interface{}{e})

}(ws, e)

}

}

}

}()


}


if e != nil {

fmt.Println(e)

os.Exit(n)

}

}



return s[len(s)-1]

}

<!DOCTYPE html>

<html>

<head>


<title>WebSocket EXAMPLE</title>

<script>

function print(m) {

document.getElementById("event_log").innerHTML += `<div>${m}</div>`;

}



b.onclick = c;


return b;

}












{{end}}

}

</script>

</head>

<body>

<h1>WebSocket EXAMPLE</h1>





</body>

</html>

func main() {

p := PageCon
fi


Abort(FILE_READ, e)




})




i := len(monitors)


defer func() {



}

monitors[i] = nil

}()


for {


events <- b.Message

} else {


break

}

}

}))

go func() {

for {

e := <-events


if ws != nil {



}(ws, e)

}

}

}

}()


}



i := len(monitors)


defer func() {



}

monitors[i] = nil

}()


for {


events <- b.Message

} else {


break

}

}

}))

func main() {

p := PageCon
fi


Abort(FILE_READ, e)




})




i := len(monitors)


defer func() {



}

monitors[i] = nil

}()


for {


events <- b.Message

} else {


break

}

}

}))

go func() {

for {

e := <-events


if ws != nil {



}(ws, e)

}

}

}

}()


}


go func() {

for {

e := <-events


if ws != nil {



}(ws, e)

}

}

}

}()

package main

import "log"


const SERVER = "ws://localhost:3000/socket"

const ADDRESS = "http://localhost/"

func main() {

if ws, e := websocket.Dial(SERVER, "", ADDRESS); e == nil {

var m []interface{}

for {

if e := websocket.JSON.Receive(ws, &m); e == nil {

log.Printf("message: %vn", m)

} else {

log.Fatal(e)

}

}

} else {

log.Fatal(e)

}

}

package main

import "log"

import "os"

import "time"


const SERVER = "ws://localhost:3000/socket"

const ADDRESS = "http://localhost/"

func main() {

if ws, e := websocket.Dial(SERVER, "", ADDRESS); e == nil {


for _, v := range os.Args[1:] {

b.Message = v

websocket.JSON.Send(ws, &b)

time.Sleep(1 * time.Second)

}

} else {

log.Fatal(e)

}

}

The Browser Environment - A Systems Programmer's Perspective

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to The Browser Environment - A Systems Programmer's Perspective

Similar to The Browser Environment - A Systems Programmer's Perspective (20)

More from Eleanor McHugh

More from Eleanor McHugh (20)

Recently uploaded

Recently uploaded (20)

The Browser Environment - A Systems Programmer's Perspective