EuroPython2018_talk.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Let’s embrace WebAssembly!\n",
    "\n",
    "<img src='images/wasm.png' width=100 align=right>\n",
    "<img src='images/python.png' width=100 align=right>\n",
    "\n",
    "EuroPython 2018 - Edinburgh\n",
    "\n",
    "Almar Klein\n",
    "\n",
    "\n",
    "<img src='images/pano_ed.jpg' width=100% >\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# What is WebAssembly?\n",
    "\n",
    "<img src='images/wasm.png' align=right width=300>\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "WebAssembly == WASM"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# WASM is an OPEN standard ...\n",
    "\n",
    "<br>\n",
    "<div style='display:flex; width:100%; justify-content:space-around; align-items:center;'>\n",
    "<img src='images/group.png' style='height:200px; width:200px;'>\n",
    "<img src='images/rocket.png' style='height:100px; width:100px;'>\n",
    "<img src='images/file.png' style='height:100px; width:100px;'>\n",
    "<img src='images/check-square.png' style='height:100px; width:100px;'>\n",
    "</div>\n",
    "<br>\n",
    "\n",
    "Collaborative effort by Mozilla, Google, Apple, Microsoft ...\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# ... for executable code\n",
    "\n",
    "<br>\n",
    "<div style='display:flex; width:100%'>\n",
    "<img src='images/group.png' style='height:100px; width:100px;'>\n",
    "<img src='images/rocket.png' style='height:200px; width:200px;'>\n",
    "<img src='images/file.png' style='height:100px; width:100px;'>\n",
    "<img src='images/check-square.png' style='height:100px; width:100px;'>\n",
    "</div>\n",
    "<br>\n",
    "\n",
    "It's fast!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<img src='images/assembly1.png' width=600>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<img src='images/assembly2.png' width=600>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "\n",
    "# It has a compact binary format\n",
    "\n",
    "<br>\n",
    "<div style='display:flex; width:100%'>\n",
    "<img src='images/group.png' style='height:100px; width:100px;'>\n",
    "<img src='images/rocket.png' style='height:100px; width:100px;'>\n",
    "<img src='images/file.png' style='height:200px; width:200px;'>\n",
    "<img src='images/check-square.png' style='height:100px; width:100px;'>\n",
    "</div>\n",
    "<br>\n",
    "\n",
    "#### And a human readable counterpart:\n",
    "\n",
    "```wasm\n",
    "(module\n",
    "    (type $print (func (param i32))\n",
    "    (func $main\n",
    "        (i32.const 42)\n",
    "        (call $print)\n",
    "    )\n",
    "    (start $main)\n",
    ")\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "\n",
    "# It's safe\n",
    "\n",
    "<br>\n",
    "<div style='display:flex; width:100%'>\n",
    "<img src='images/group.png' style='height:100px; width:100px;'>\n",
    "<img src='images/rocket.png' style='height:100px; width:100px;'>\n",
    "<img src='images/file.png' style='height:100px; width:100px;'>\n",
    "<img src='images/check-square.png' style='height:200px; width:200px;'>\n",
    "</div>\n",
    "<br>\n",
    "\n",
    "Because browsers."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# WebAssembly is coming and it's awesome!\n",
    "\n",
    "<br>\n",
    "<div style='display:flex; width:100%'>\n",
    "<img src='images/group.png' style='height:50px; width:50px;'>\n",
    "<img src='images/rocket.png' style='height:50px; width:50px;'>\n",
    "<img src='images/file.png' style='height:50px; width:50px;'>\n",
    "<img src='images/check-square.png' style='height:50px; width:50px;'>\n",
    "</div>\n",
    "<br><br>\n",
    "\n",
    "<center>\n",
    "<img src='images/so-much-awesome-meme.jpg' width=460px>\n",
    "</center>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# WebAssembly adoption"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Lua community\n",
    "\n",
    "Let's write web apps in Lua !!\n",
    "\n",
    "<center><img src='images/cat_scream.jpg' width=500></center>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Rust community\n",
    "\n",
    "Let's use Rust for everything !!\n",
    "\n",
    "<center><img src='images/cat_happy.jpg' width=400></center>\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# C++ community\n",
    "\n",
    "We can now  write web apps in C++ ...\n",
    "\n",
    "\n",
    "<center><img src='images/cat_evil.jpg' width=500px></center>\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# JavaScript community\n",
    "\n",
    "\n",
    "Will this end our suffering?\n",
    "\n",
    "<center><img src='images/cat_surprised.jpg' width=500></center>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Will this end our monopoly?"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Python community\n",
    "\n",
    "... what is this WebAssembly thing?\n",
    "\n",
    "<center><img src='images/cat_bored.jpg' width=500px></center>\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# WASM may not be obvious for Python\n",
    "\n",
    "... Because Python is an *interpreted* language"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Three use-cases how we can embrace WASM"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "from ppci import wasm"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Use case 1: Compile a Python interpreter\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<center><img src='images/py_to_browser.png' width=800px></center>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Examples\n",
    "\n",
    "\n",
    "* Pyodide: compiles CPython + numpy/pandas/matplotlib, to run in the browser\n",
    "* PyPyJS\n",
    "* RustPython: Python interpreter written in Rust\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Note: Python code is still run in a VM!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Use case 2: Compile a subset of Python to WASM"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<center><img src='images/pysnippet_to_wasm.png' width=800px></center>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "@wasm.wasmify\n",
    "def find_prime(nth):\n",
    "    n = 0\n",
    "    i = -1       \n",
    "    while n < nth:\n",
    "        i = i + 1        \n",
    "        if i <= 1:\n",
    "            continue  # nope\n",
    "        elif i == 2:\n",
    "            n = n + 1\n",
    "        else:\n",
    "            gotit = 1\n",
    "            for j in range(2,  i//2+1):\n",
    "                if i % j == 0:\n",
    "                    gotit = 0\n",
    "                    break\n",
    "            if gotit == 1:\n",
    "                n = n + 1    \n",
    "    return i"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "-"
    }
   },
   "outputs": [],
   "source": [
    "%time find_prime(1000)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Run in JS"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "-"
    }
   },
   "outputs": [],
   "source": [
    "from ppci.lang.python import python_to_wasm\n",
    "\n",
    "def main():\n",
    "    print(find_prime(1000))\n",
    "\n",
    "m = python_to_wasm(main, find_prime)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "-"
    }
   },
   "outputs": [],
   "source": [
    "wasm.run_wasm_in_notebook(m)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "notes"
    }
   },
   "source": [
    "wasm.run_wasm_in_node(m) and wasm.run_wasm_in_notebook(m)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Compile a subset of Python to WASM\n",
    "\n",
    "* Write code to run on the web\n",
    "* Write code to run fast\n",
    "* Binaries are cross-platform!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "Note: \n",
    "\n",
    "* The python-to-wasm compiler is just a POC!\n",
    "* Assumes a (reliable) wasm-to-native compiler"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Use case 3: Python as a platform to bind and run WASM modules\n",
    "    \n",
    "... and allow that code to call into Python functions"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<center><img src='images/py_as_platform.png' width=700px></center>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Rocket game\n",
    "\n",
    "<center>\n",
    "    <!-- <a href='https://thread-safe.nl/rocket/' target='new'> -->\n",
    "    <a href='rocket.html' target='new'>\n",
    "    <img src='images/github_rocket_wasm.png' width=900>\n",
    "    </a>\n",
    "</center>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Single binary WASM file (58 KB)\n",
    "\n",
    "<center>    \n",
    "    <img src='images/github_rocket_wasm_html.png' width=600>\n",
    "</center>\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ppci import wasm\n",
    "\n",
    "m = wasm.Module(open(r'wasm/rocket.wasm', 'rb'))\n",
    "m"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "m.show_interface()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<center>\n",
    "<img src='images/github_rocket_wasm_js.png' width=1000>\n",
    "</center>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<center>\n",
    "<img src='images/rocket_in_js.png' width=800>\n",
    "</center>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<center>\n",
    "<img src='images/rocket_in_py.png' width=800>\n",
    "</center>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "class PythonRocketGame:\n",
    "    \n",
    "    # ...\n",
    "    \n",
    "    def wasm_sin(self, a:float) -> float:\n",
    "        return math.sin(a)\n",
    "    \n",
    "    def wasm_cos(self, a:float) -> float:\n",
    "        return math.cos(a)\n",
    "    \n",
    "    def wasm_Math_atan(self, a:float) -> float:\n",
    "        return math.atan(a)\n",
    "    \n",
    "    def wasm_clear_screen(self) -> None:\n",
    "        # ...\n",
    "    \n",
    "    def wasm_draw_bullet(self, x:float, y:float) -> None:\n",
    "        # ...\n",
    "    \n",
    "    def wasm_draw_enemy(self, x:float, y:float) -> None:\n",
    "        # ...\n",
    "    \n",
    "    def wasm_draw_particle(self, x:float, y:float, a:float) -> None:\n",
    "        # ...\n",
    "    \n",
    "    def wasm_draw_player(self, x:float, y:float, a:float) -> None:\n",
    "       # ...\n",
    "    \n",
    "    def wasm_draw_score(self, score:float) -> None:\n",
    "        # ..."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Run Rocket in Python with Qt"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "-"
    }
   },
   "outputs": [],
   "source": [
    "from rocket_qt import QtRocketGame\n",
    "game = QtRocketGame()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "game.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Run Rocket in Python with prompt_toolkit\n",
    "\n",
    "Over SSH :)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# This game is not that hard to play ..."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "## Let's make an AI!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "#print(open('wasm/ai2.c', 'rt').read())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "-"
    }
   },
   "outputs": [],
   "source": [
    "from ppci import wasm\n",
    "ai2 = wasm.Module(open('wasm/ai2.wasm', 'rb'))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "ai2.show_interface()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "-"
    }
   },
   "outputs": [],
   "source": [
    "from rocket_ai import AiRocketGame\n",
    "game = AiRocketGame(ai2)\n",
    "game.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "\n",
    "# Wrapping up ..."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## WASM is coming, and its awesome!\n",
    "\n",
    "<img src='images/wasm.png' width=150 align=right>\n",
    "\n",
    "* Open, low-level, fast, compact and safe\n",
    "* Already works in most browsers\n",
    "* Not limited to the web\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "<img src='images/python.png' width=150 align=right>\n",
    "\n",
    "## We Pythonista's should embrace it!\n",
    "\n",
    "* E.g. run a Python VM in the browser\n",
    "* E.g. compile subset of Python to fast, crossplatform code\n",
    "* E.g. use Python as a platform to bind and execute WASM modules"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "## Thanks!"
   ]
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "celltoolbar": "Slideshow",
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}