Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Doppio: Breaking the Browser Language Barrier

777 views

Published on

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.

Published in: Software
  • Be the first to comment

Doppio: Breaking the Browser Language Barrier

  1. 1. Java
  2. 2. Java
  3. 3. Motivating Example Java Chat Client
  4. 4. Motivating Example Java Chat Client Features: • Connects to multiple chat servers • Logs chats to file system • 1 thread per server
  5. 5. Motivating Example Java Chat Client Features: • Connects to multiple chat servers • Logs chats to file system • 1 thread per server
  6. 6. Motivating Example Jav a
  7. 7. Motivating Example Java
  8. 8. Breaking the Browser Language Barrier 1. Key Challenges 2. Doppio Runtime System 3. Proof-of-concept: DoppioJVM
  9. 9. Java I’m dynamic! Unsuitable for ahead-of-time compilation
  10. 10. Native VS Browser Threads Chat Process Java I’m dynamic !
  11. 11. Native VS Browser Workers (“Processes”) Threads Chat Process Java I’m dynamic !
  12. 12. Workers (“Processes”) Java I’m dynamic ! Native VS Browser Threads Chat Process Hey, how’s it going? Terrible.
  13. 13. Native VS Browser TCP Sockets Threads Chat Process Java I’m dynamic !
  14. 14. Native VS Browser TCP Sockets WebSockets Threads Chat Process Java I’m dynamic !
  15. 15. Native VS Browser File System TCP Sockets Threads Chat Process Java I’m dynamic !
  16. 16. Native VS Browser File System Persistent Storage SQL Database TCP Sockets Threads Chat Process Java I’m dynamic ! Key-value (<5MB) [localStorage] (>5MB) [WebSQL] Object Database (>5MB) [IndexedDB] “File System” (>5MB) [HTML5 FileSystem]
  17. 17. Native Browser Unmanaged VS Heap TCP Sockets File System Threads Chat Process Java I’m dynamic !
  18. 18. Native Browser Unmanaged VS Heap Nothing. TCP Sockets File System Threads Chat Process Java I’m dynamic !
  19. 19. TCP Sockets File System Threads Chat Process Java I’m dynamic ! Unmanaged Heap
  20. 20. File System TCP Sockets Threads Chat Process Java I’m dynamic ! Unmanaged Heap
  21. 21. Challenge #1 Browser Diversity
  22. 22. Challenge #1 Browser Diversity
  23. 23. Challenge #1 Browser Diversity
  24. 24. Browser Diversity Example: Storing Chat Client Logs
  25. 25. Browser Diversity Example: Storing Chat Client Logs Key-value (<5MB) [localStorage]
  26. 26. Browser Diversity Example: Storing Chat Client Logs * * SQL Database (>5MB) [WebSQL] Key-value (<5MB) [localStorage] * Only for temporary storage
  27. 27. Browser Diversity Example: Storing Chat Client Logs ** * * * * Object Database (>5MB) [IndexedDB] SQL Database (>5MB) [WebSQL] Key-value (<5MB) [localStorage] * Only for temporary storage ** Partial support
  28. 28. Browser Diversity Example: Storing Chat Client Logs Key-value (<5MB) [localStorage] ** Object Database (>5MB) [IndexedDB] * * SQL Database (>5MB) [WebSQL] * Only for temporary storage * * “File System” (>5MB) [HTML5 FileSystem] ** Partial support
  29. 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. 30. Challenge #2 Event-Driven Runtime Model
  31. 31. Challenge #2 Event-Driven Runtime Model
  32. 32. Chat Client PING/PONG
  33. 33. void main(String[] args) { Call Stack main … byte[] response = sendPing(); … } Chat Client PING/PONG in Java
  34. 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. 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. 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. 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. 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. 39. Chat Client PING/PONG in JavaScript function main() { … var response = sendPing(); … } Call Stack main
  40. 40. Call Stack main function main() { … var response = sendPing(); … } Chat Client PING/PONG in JavaScript
  41. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 56. Doppio 100% JavaScript Runtime Library
  57. 57. 100% JavaScript Runtime Library Doppio Threads Doppio
  58. 58. 100% JavaScript Runtime Library Doppio TCP Sockets Doppio File System Doppio Unmanaged Heap Doppio Threads Doppio
  59. 59. Doppio Threads DoppioJVM Proof-of-concept: 100% JavaScript JVM Interpreter Doppio TCP Sockets Doppio File System Doppio Unmanaged Heap
  60. 60. Doppio Threads DoppioJVM Proof-of-concept: 100% JavaScript JVM Interpreter Doppio TCP Sockets Doppio File System Doppio Unmanaged Heap
  61. 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. 62. Doppio Threads java.lang.Thread
  63. 63. Doppio Threads java.lang.Thread JavaScript has one thread
  64. 64. Doppio Threads java.lang.Thread JavaScript has one thread ?
  65. 65. Doppio Threads java.lang.Thread JavaScript has one thread ? Doppio Thread Stack
  66. 66. Doppio Threads java.lang.Thread JavaScript has one thread ? Doppio Thread Stack ✓ Suspend ✓ Resume
  67. 67. Doppio Threads java.lang.Thread JavaScript has one thread Timesliced priority-based scheduling
  68. 68. Doppio Threads java.lang.Thread JavaScript has one thread Timesliced priority-based scheduling
  69. 69. Doppio Threads java.lang.Thread ✓ Language threads ✓ Responsive
  70. 70. Doppio Threads java.lang.Thread ✓ Language threads ✓ Responsive ✓ Synchronous I/O
  71. 71. Doppio Threads java.lang.Thread ✓ Language threads ✓ Responsive ✓ Synchronous I/O Doppio Threads
  72. 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. 73. Doppio File System java.io.UnixFileSystem
  74. 74. Doppio File System java.io.UnixFileSystem Doppio POSIX File System Interface
  75. 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. 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. 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. 78. Doppio TCP Sockets Natively-running Server Server TCP connection
  79. 79. Doppio TCP Sockets Natively-running Server WebSocket connection X Server
  80. 80. Doppio TCP Sockets Server java.net.PlainSocketImpl Doppio Sockets Natively-running Server WebSocket Connection What’s a WebSocket ?
  81. 81. Doppio TCP Sockets Server TCP connection WebSockify java.net.PlainSocketImpl Doppio Sockets Natively-running Server WebSocket Connection
  82. 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. 83. Doppio Unmanaged Heap sun.misc.Unsafe
  84. 84. Doppio Unmanaged Heap Need: • malloc • free sun.misc.Unsafe
  85. 85. Doppio Unmanaged Heap Binary Data Representations • ArrayBuffer • CanvasPixelArray • Array of 32-bit ints sun.misc.Unsafe
  86. 86. Doppio Unmanaged Heap Binary Data Representations • ArrayBuffer • CanvasPixelArray • Array of 32-bit ints 1:1 sun.misc.Unsafe
  87. 87. Doppio Unmanaged Heap Binary Data Representations • ArrayBuffer • CanvasPixelArray • Array of 32-bit ints 1:1 1:2 sun.misc.Unsafe
  88. 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. 89. Breaking the Browser Language Barrier 1. Key Challenges 2. Doppio Runtime System 3. Proof-of-concept: DoppioJVM
  90. 90. DoppioJVM OpenJDK Java Class Library sun.* Packages java.* Packages javax.* Packages etc…
  91. 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. 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. 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. 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. 95. in Action
  96. 96. in Action
  97. 97. in Action
  98. 98. in Action
  99. 99. in Action
  100. 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. 101. DoppioJVM Performance * * Caused by Safari memory leak: https://bugs.webkit.org/show_bug.cgi?id=119049
  102. 102. DoppioJVM: CodeMoo.com
  103. 103. Contributions • Doppio: Bridges impedance mismatch between conventional languages and browser • Proof-of-concept: DoppioJVM

×