Web browsers have become a de facto universal operating system, and JavaScript its instruction set. Unfortunately, running other languages in the browser is not generally possible. Translation to JavaScript is not enough because browsers are a hostile environment for other languages. Previous approaches are either non-portable or require extensive modifications for programs to work in a browser. This talk presents Doppio, a JavaScript-based runtime system that makes it possible to run unaltered applications written in general- purpose languages directly inside the browser. Doppio provides a wide range of runtime services, including a file system that enables local and external (cloud-based) storage, an unmanaged heap, sockets, blocking I/O, and multiple threads. We demonstrate Doppio's usefulness with two case studies: we extend Emscripten with Doppio, letting it run an unmodified C++ application in the browser with full functionality, and present DoppioJVM, an interpreter that runs unmodified JVM programs directly in the browser. While substantially slower than a native JVM, DoppioJVM makes it feasible to directly reuse existing, non compute-intensive code.
Citation preview
1. Java
2. Java
3. Motivating Example Java Chat Client
4. Motivating Example Java Chat Client Features: Connects to
multiple chat servers Logs chats to file system 1 thread per
server
5. Motivating Example Java Chat Client Features: Connects to
multiple chat servers Logs chats to file system 1 thread per
server
6. Motivating Example Jav a
7. Motivating Example Java
8. Breaking the Browser Language Barrier 1. Key Challenges 2.
Doppio Runtime System 3. Proof-of-concept: DoppioJVM
9. Java Im dynamic! Unsuitable for ahead-of-time
compilation
10. Native VS Browser Threads Chat Process Java Im dynamic
!
11. Native VS Browser Workers (Processes) Threads Chat Process
Java Im dynamic !
12. Workers (Processes) Java Im dynamic ! Native VS Browser
Threads Chat Process Hey, hows it going? Terrible.
13. Native VS Browser TCP Sockets Threads Chat Process Java Im
dynamic !
14. Native VS Browser TCP Sockets WebSockets Threads Chat
Process Java Im dynamic !
15. Native VS Browser File System TCP Sockets Threads Chat
Process Java Im dynamic !
16. Native VS Browser File System Persistent Storage SQL
Database TCP Sockets Threads Chat Process Java Im dynamic !
Key-value (5MB) [WebSQL] Object Database (>5MB) [IndexedDB] File
System (>5MB) [HTML5 FileSystem]
17. Native Browser Unmanaged VS Heap TCP Sockets File System
Threads Chat Process Java Im dynamic !
18. Native Browser Unmanaged VS Heap Nothing. TCP Sockets File
System Threads Chat Process Java Im dynamic !
19. TCP Sockets File System Threads Chat Process Java Im
dynamic ! Unmanaged Heap
20. File System TCP Sockets Threads Chat Process Java Im
dynamic ! Unmanaged Heap
39. Chat Client PING/PONG in JavaScript function main() { var
response = sendPing(); } Call Stack main
40. Call Stack main function main() { var response =
sendPing(); } Chat Client PING/PONG in JavaScript
41. Call Stack main function main() { function sendPing() {
sendPing socket.send(PING); socket.onmessage = function(event) { //
event.data has the PONG }; ??? } var response = sendPing(); } Chat
Client PING/PONG in JavaScript
42. Call Stack main sendPing socket.send function main() { var
response = sendPing(); } function sendPing() { socket.send(PING);
socket.onmessage = function(event) { // event.data has the PONG };
??? } Chat Client PING/PONG in JavaScript
43. Call Stack main sendPing function main() { var response =
sendPing(); } function sendPing() { socket.send(PING);
socket.onmessage = function(event) { // event.data has the PONG };
??? } Chat Client PING/PONG in JavaScript
44. Call Stack main sendPing function main() { var response =
sendPing(); } function sendPing() { socket.send(PING);
socket.onmessage = function(event) { // event.data has the PONG };
??? } Chat Client PING/PONG in JavaScript
45. Call Stack main sendPing function main() { var response =
sendPing(); } function sendPing() { socket.send(PING);
socket.onmessage = function(event) { // event.data has the PONG };
??? } Chat Client PING/PONG in JavaScript
46. Call Stack main function main() { function sendPing() {
sendPing socket.send(PING); socket.onmessage = function(event) { //
event.data has the PONG }; while(noData) { /* Busy Wait?? */ } }
var response = sendPing(); } Chat Client PING/PONG in
JavaScript
47. Chat Client PING/PONG in JavaScript Call Stack main
sendPing function main() { var response = sendPing(); } Browser
Event Queue WebSocket message from chat server function sendPing()
{ socket.send(PING); socket.onmessage = function(event) { //
event.data has the PONG }; while(noData) { /* Busy Wait?? */ }
}
48. Chat Client PING/PONG in JavaScript function sendPing() {
socket.send(PING); socket.onmessage = function(event) { //
event.data has the PONG }; while(noData) { /* Busy Wait?? */ } }
Call Stack main sendPing function main() { var response =
sendPing(); } Browser Event Queue WebSocket message from chat
server
49. Chat Client PING/PONG in JavaScript Call Stack main
sendPing function main() { var response = sendPing(); } Browser
Event Queue WebSocket message from chat server function sendPing()
{ socket.send(PING); socket.onmessage = function(event) { //
event.data has the PONG }; while(noData) { /* Busy Wait?? */ }
}
50. Chat Client PING/PONG in JavaScript Call Stack main
function main() { function sendPing() { sendPing socket.send(PING);
socket.onmessage = function(event) { // event.data has the PONG };
return; } var response = sendPing(); } Browser Event Queue
WebSocket message from chat server
51. Call Stack main function main() { var response =
sendPing(); return; } Browser Event Queue WebSocket message from
chat server function sendPing() { socket.send(PING);
socket.onmessage = function(event) { // event.data has the PONG };
return; } Chat Client PING/PONG in JavaScript
52. Call Stack function main() { var response = sendPing();
return; } Browser Event Queue WebSocket message from chat server
function sendPing() { socket.send(PING); socket.onmessage =
function(event) { // event.data has the PONG }; return; } Chat
Client PING/PONG in JavaScript
53. Call Stack function main() { var response = sendPing();
return; } socket.onmessage callback Browser Event Queue function
sendPing() { socket.send(PING); socket.onmessage = function(event)
{ // event.data has the PONG }; return; } Chat Client PING/PONG in
JavaScript
54. Chat Client PING/PONG in JavaScript function main() { var
response = sendPing(); return; } function sendPing() {
socket.send(PING); socket.onmessage = function({ // event.data has
the PONG }; return; } void main(String[] args) { byte[] response =
sendPing(); } byte[] sendPing() { socket.write(PING);
socket.read(readBuffer); return readBuffer; }
55. Breaking the Browser Language Barrier 1. Key Challenges 2.
Doppio Runtime System Doppio Threads Doppio File System Doppio
Sockets Doppio Unmanaged Heap 3. Proof-of-concept: DoppioJVM