Doppio: Breaking the Browser Language Barrier
104
-
Upload
emery-berger -
Category
Software
-
view
64 -
download
1
description
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.
Transcript of Doppio: Breaking the Browser Language Barrier
- 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
- 21. Challenge #1 Browser Diversity
- 22. Challenge #1 Browser Diversity
- 23. Challenge #1 Browser Diversity
- 24. Browser Diversity Example: Storing Chat Client Logs
- 25. Browser Diversity Example: Storing Chat Client Logs Key-value (5MB) [WebSQL] Key-value (5MB) [IndexedDB] SQL Database (>5MB) [WebSQL] Key-value (5MB) [WebSQL] * Only for temporary storage * * File System (>5MB) [HTML5 FileSystem] ** Partial support
- 29. Browser Diversity Example: Storing Chat Client Logs ** Object Database (>5MB) [IndexedDB] SQL Database (>5MB) [WebSQL] File System (>5MB) [HTML5 FileSystem] * Only for temporary storage ** Partial support
- 30. Challenge #2 Event-Driven Runtime Model
- 31. Challenge #2 Event-Driven Runtime Model
- 32. Chat Client PING/PONG
- 33. void main(String[] args) { Call Stack main byte[] response = sendPing(); } Chat Client PING/PONG in Java
- 34. void main(String[] args) { Call Stack main byte[] sendPing() { socket.write(PING); socket.read(readBuffer); return readBuffer; } sendPing byte[] response = sendPing(); } Chat Client PING/PONG in Java
- 35. Call Stack main sendPing socket.write void main(String[] args) { byte[] response = sendPing(); } byte[] sendPing() { socket.write(PING); socket.read(readBuffer); return readBuffer; } Chat Client PING/PONG in Java
- 36. Call Stack main sendPing socket.read void main(String[] args) { byte[] response = sendPing(); } byte[] sendPing() { socket.write(PING); socket.read(readBuffer); return readBuffer; } Chat Client PING/PONG in Java
- 37. void main(String[] args) { Call Stack main sendPing byte[] response = sendPing(); } byte[] sendPing() { socket.write(PING); socket.read(readBuffer); return readBuffer; } Chat Client PING/PONG in Java
- 38. void main(String[] args) { Call Stack main byte[] response = sendPing(); } byte[] sendPing() { socket.write(PING); socket.read(readBuffer); return readBuffer; } Chat Client PING/PONG in Java
- 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
- 56. Doppio 100% JavaScript Runtime Library
- 57. 100% JavaScript Runtime Library Doppio Threads Doppio
- 58. 100% JavaScript Runtime Library Doppio TCP Sockets Doppio File System Doppio Unmanaged Heap Doppio Threads Doppio
- 59. Doppio Threads DoppioJVM Proof-of-concept: 100% JavaScript JVM Interpreter Doppio TCP Sockets Doppio File System Doppio Unmanaged Heap
- 60. Doppio Threads DoppioJVM Proof-of-concept: 100% JavaScript JVM Interpreter Doppio TCP Sockets Doppio File System Doppio Unmanaged Heap
- 61. 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
- 62. Doppio Threads java.lang.Thread
- 63. Doppio Threads java.lang.Thread JavaScript has one thread
- 64. Doppio Threads java.lang.Thread JavaScript has one thread ?
- 65. Doppio Threads java.lang.Thread JavaScript has one thread ? Doppio Thread Stack
- 66. Doppio Threads java.lang.Thread JavaScript has one thread ? Doppio Thread Stack Suspend Resume
- 67. Doppio Threads java.lang.Thread JavaScript has one thread Timesliced priority-based scheduling
- 68. Doppio Threads java.lang.Thread JavaScript has one thread Timesliced priority-based scheduling
- 69. Doppio Threads java.lang.Thread Language threads Responsive
- 70. Doppio Threads java.lang.Thread Language threads Responsive Synchronous I/O
- 71. Doppio Threads java.lang.Thread Language threads Responsive Synchronous I/O Doppio Threads
- 72. 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
- 73. Doppio File System java.io.UnixFileSystem
- 74. Doppio File System java.io.UnixFileSystem Doppio POSIX File System Interface
- 75. Doppio File System Key-value [localStorage] Object database [IndexedDB] File System [HTML5 FileSystem] Cloud Storage [Dropbox] RAM Disk Zip Archive java.io.UnixFileSystem Doppio POSIX File System Interface
- 76. Doppio File System Key-value [localStorage] Object database [IndexedDB] File System [HTML5 FileSystem] Cloud Storage [Dropbox] RAM Disk Zip Archive java.io.UnixFileSystem Doppio POSIX File System Interface
- 77. 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
- 78. Doppio TCP Sockets Natively-running Server Server TCP connection
- 79. Doppio TCP Sockets Natively-running Server WebSocket connection X Server
- 80. Doppio TCP Sockets Server java.net.PlainSocketImpl Doppio Sockets Natively-running Server WebSocket Connection Whats a WebSocket ?
- 81. Doppio TCP Sockets Server TCP connection WebSockify java.net.PlainSocketImpl Doppio Sockets Natively-running Server WebSocket Connection
- 82. 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
- 83. Doppio Unmanaged Heap sun.misc.Unsafe
- 84. Doppio Unmanaged Heap Need: malloc free sun.misc.Unsafe
- 85. Doppio Unmanaged Heap Binary Data Representations ArrayBuffer CanvasPixelArray Array of 32-bit ints sun.misc.Unsafe
- 86. Doppio Unmanaged Heap Binary Data Representations ArrayBuffer CanvasPixelArray Array of 32-bit ints 1:1 sun.misc.Unsafe
- 87. Doppio Unmanaged Heap Binary Data Representations ArrayBuffer CanvasPixelArray Array of 32-bit ints 1:1 1:2 sun.misc.Unsafe
- 88. Doppio Unmanaged Heap Binary Data Representations ArrayBuffer CanvasPixelArray Array of 32-bit ints 1:1 1:2 sun.misc.Unsafe Doppio Unmanaged Heap
- 89. Breaking the Browser Language Barrier 1. Key Challenges 2. Doppio Runtime System 3. Proof-of-concept: DoppioJVM
- 90. DoppioJVM OpenJDK Java Class Library sun.* Packages java.* Packages javax.* Packages etc
- 91. DoppioJVM sun.misc Unsafe Doppio Unmanaged Heap java.io UnixFileSystem Doppio File System java.net PlainSocketImpl Doppio Sockets java.lang Thread Doppio Threads OpenJDK Java Class Library sun.* Packages java.* Packages javax.* Packages etc Doppio OS Services
- 92. DoppioJVM sun.misc Unsafe java.io UnixFileSystem java.net PlainSocketImpl java.lang Thread OpenJDK Java Class Library sun.* Packages java.* Packages javax.* Packages etc Java Objects JavaScript Objects Most Numeric Types JavaScript Numbers Java Arrays JavaScript Arrays 64-bit Integers gLong Library JVM Data Structures
- 93. DoppioJVM JVM Data Structures For Free sun.misc Unsafe java.io UnixFileSystem java.net PlainSocketImpl java.lang Thread OpenJDK Java Class Library sun.* Packages java.* Packages javax.* Packages etc Java Objects JavaScript Objects Most Numeric Types JavaScript Numbers Java Arrays JavaScript Arrays 64-bit Integers gLong Library JVM GC JS GC
- 94. DoppioJVM JVM Data Structures For Free OpenJDK Java Class Library Java Objects JavaScript Objects Most Numeric Types JavaScript Numbers Java Arrays JavaScript Arrays 64-bit Integers gLong Library JVM GC JS GC Bytecode Interpreter JVM Features ClassLoader Monitors
- 95. in Action
- 96. in Action
- 97. in Action
- 98. in Action
- 99. in Action
- 100. DoppioJVM Native Compatibility Runs real, unmodified programs * javac (44 KLOC) Java compiler javap (4 KLOC) JVM class file disassembler Kawa-Scheme (121 KLOC) Scheme implementation on the JVM Rhino (57 KLOC) JavaScript implementation on the JVM
- 101. DoppioJVM Performance * * Caused by Safari memory leak: https://bugs.webkit.org/show_bug.cgi?id=119049
- 102. DoppioJVM: CodeMoo.com
- 103. Contributions Doppio: Bridges impedance mismatch between conventional languages and browser Proof-of-concept: DoppioJVM