Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ryan Kelly: PyPy.js: What? How? Why?

Ryan Kelly: PyPy.js: What? How? Why?

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Ryan Kelly:
PyPy.js: What? How? Why?
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
@ Kiwi PyCon 2014 - Sunday, 14 Sep 2014 - Track 1
http://kiwi.pycon.org/

**Audience level**

Intermediate

**Description**

PyPy.js is an experiment in building a fast and compliant in-browser python interpreter, by compiling PyPy into javascript and retargeting its JIT to emit asmjs code at runtime. This talk will demonstrate the combination of technologies that make such a thing possible, the results achieved so far, and the challenges that still remain when taking python onto javascript's home turf.

**Abstract**

PyPy.js is an experiment in building a fast, compliant, in-browser python interpreter. By compiling the PyPy interpreter into javascript, and retargeting its JIT compiler to emit asmjs code at runtime, it is possible to run python code in the browser at speeds competitive with a native python environment. This talk will demonstrate the combination of technologies that make such a thing possible, the results that have been achieved so far, and the challenges that still remain when trying to take python onto javascript's home turf.

We'll cover: an overview of PyPy and why it's a good fit for this type of project; an introduction to asmjs and the rise of javascript as a compile target; what it looks like when you smoosh these two technologies together; a comparison with other approaches such as brython; and some concrete suggestions for how the result might be useful in practice.

**YouTube**

https://www.youtube.com/watch?v=pt-e-X_q-dk

New Zealand Python User Group

September 14, 2014
Tweet

More Decks by New Zealand Python User Group

Other Decks in Programming

Transcript

  1. PyPy.js
    What? How? Why?
    Ryan Kelly
    [email protected]
    @rfkelly

    View Slide

  2. Mozilla

    View Slide

  3. Mozilla

    View Slide

  4. Mozilla

    The Web

    View Slide

  5. The Web
    Technology:
    HTTP
    HTML
    CSS
    JavaScript
    Culture:
    Open
    Ubiquitous
    Secure
    Trustworthy

    View Slide

  6. The Web
    Cons:
    HTTP
    HTML
    CSS
    JavaScript
    Pros:
    Open
    Ubiquitous
    Secure
    Trustworthy

    View Slide

  7. The Web is worth
    Keeping

    View Slide

  8. The Web is worth
    Improving

    View Slide

  9. Andreas Gal, Mozilla CTO:
    "For Mozilla, anything that the Web can’t do, or anything that the Web is not faster and better
    at than native technologies, is a bug."
    https://bugzilla.mozilla.org/

    View Slide

  10. A Bug in the Web
    "I want to code in Python dammit"

    View Slide

  11. PyPy.js
    What? How? Why?

    View Slide

  12. What?

    View Slide

  13. PyPy.js: What?

    View Slide

  14. PyPy.js is ... Not the First
    Pyjamas PyJS
    Skulpt
    Brython
    PythonJS
    RapydScript
    Pystachio
    Pyjaco
    ...?

    View Slide

  15. PyPy.js is ... An Experiment

    View Slide

  16. PyPy.js is ... Compliant

    View Slide

  17. PyPy.js is ... Fast

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. PyPy.js is ... In­Browser
    v
    a
    r v
    m = n
    e
    w P
    y
    P
    y
    J
    S
    (
    )
    ;
    v
    m
    .
    r
    e
    a
    d
    y
    .
    t
    h
    e
    n
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    )
    { .
    .
    . }
    )
    v
    m
    .
    s
    e
    t
    (
    "
    x
    "
    , 1
    2
    )
    .
    t
    h
    e
    n
    (
    .
    .
    .
    )
    v
    m
    .
    e
    v
    a
    l
    (
    "
    x = x + 1
    "
    )
    .
    t
    h
    e
    n
    (
    .
    .
    .
    )
    v
    m
    .
    g
    e
    t
    (
    "
    x
    "
    )
    .
    t
    h
    e
    n
    (
    .
    .
    .
    )

    View Slide

  23. PyPy.js is ... In­Browser

    View Slide

  24. PyPy.js is ...
    "An experiment in building a fast, compliant, in­browser python environment"
    But...

    View Slide

  25. PyPy.js is ... Not so Fast

    View Slide

  26. PyPy.js is ... Humongous
    Raw GZip
    pypy.vm.js 15 MB 2 MB
    pypy.vm.js.mem 5.5 MB 1.4 MB

    View Slide

  27. PyPy.js is ... Humongous
    Raw GZip
    pypy.vm.js 14 MB 1.8 MB
    pypy.vm.js.mem 5.5 MB 1.4 MB

    View Slide

  28. How?

    View Slide

  29. PyPy

    View Slide

  30. PyPy:
    A Python interpreter, written in "RPython"
    A toolchain for translating RPython to C
    A JIT­Compiler­Generator

    View Slide

  31. PyPy:

    View Slide

  32. PyPy:
    PyPy.py

    View Slide

  33. PyPy:
    PyPy.py PyPy.c
    rpython

    View Slide

  34. PyPy:
    PyPy.py PyPy.c PyPy.x86
    rpython gcc

    View Slide

  35. PyPy:
    PyPy.py PyPy.c
    mycode.py
    PyPy.x86
    rpython gcc

    View Slide

  36. PyPy:
    PyPy.py PyPy.c
    mycode.x86
    mycode.py
    PyPy.x86
    rpython gcc
    pypy jit

    View Slide

  37. Emscripten

    View Slide

  38. Emscripten:
    An LLVM backend that generates JavaScript
    A simulated POSIX environment, in JavaScript
    Originally for porting games to the web

    View Slide

  39. Emscripten:

    View Slide

  40. Emscripten:
    mycode.c

    View Slide

  41. Emscripten:
    mycode.c mycode.js
    emcc

    View Slide

  42. Emscripten:
    mycode.c mycode.js mycode.x86
    js jit
    emcc

    View Slide

  43. asm.js
    "An extraordinarily optimizable, low­level subset of JavaScript"

    View Slide

  44. f
    u
    n
    c
    t
    i
    o
    n S
    q
    r
    t
    M
    o
    d
    u
    l
    e
    (
    s
    t
    d
    l
    i
    b
    , f
    o
    r
    e
    i
    g
    n
    , h
    e
    a
    p
    ) {
    "
    u
    s
    e a
    s
    m
    "
    ;
    v
    a
    r s
    q
    r
    t = s
    t
    d
    l
    i
    b
    .
    M
    a
    t
    h
    .
    s
    q
    r
    t
    ;
    v
    a
    r H
    E
    A
    P
    F
    6
    4 = n
    e
    w s
    t
    d
    l
    i
    b
    .
    F
    l
    o
    a
    t
    6
    4
    A
    r
    r
    a
    y
    (
    h
    e
    a
    p
    )
    ;
    f
    u
    n
    c
    t
    i
    o
    n s
    q
    r
    t
    _
    p
    t
    r
    (
    a
    d
    d
    r
    ) {
    a
    d
    d
    r = a
    d
    d
    r
    |
    0
    ;
    v
    a
    r x = 0
    .
    0
    ;
    x = +
    H
    E
    A
    P
    F
    6
    4
    [
    a
    d
    d
    r >
    > 3
    ]
    ;
    H
    E
    A
    P
    F
    6
    4
    [
    a
    d
    d
    r >
    > 3
    ] = +
    s
    q
    r
    t
    (
    x
    )
    ;
    }
    r
    e
    t
    u
    r
    n { s
    q
    r
    t
    _
    p
    t
    r
    : s
    q
    r
    t
    _
    p
    t
    r }
    ;
    }

    View Slide

  45. PyPy.js: How?

    View Slide

  46. PyPy.js: How?
    PyPy.py

    View Slide

  47. PyPy.js: How?
    PyPy.py PyPy.c
    rpython

    View Slide

  48. PyPy.js: How?
    PyPy.py PyPy.c PyPy.js
    rpython emcc

    View Slide

  49. PyPy.js: How?
    PyPy.py PyPy.c PyPy.js PyPy.x86
    rpython js jit
    emcc

    View Slide

  50. PyPy.js: How?
    PyPy.py PyPy.c PyPy.js
    mycode.py
    PyPy.x86
    rpython js jit
    emcc

    View Slide

  51. PyPy.js: How?
    PyPy.py PyPy.c PyPy.js
    mycode.js
    mycode.py
    PyPy.x86
    rpython js jit
    emcc
    pypy jit

    View Slide

  52. PyPy.js: How?
    PyPy.py PyPy.c PyPy.js
    mycode.js mycode.x86
    mycode.py
    PyPy.x86
    rpython js jit
    emcc
    pypy jit
    js jit

    View Slide

  53. Awful?

    View Slide

  54. PyPy.js: How?
    PyPy.py PyPy.c PyPy.js
    mycode.js mycode.x86
    mycode.py
    PyPy.x86
    rpython js jit
    emcc
    pypy jit
    js jit

    View Slide

  55. PyPy.js: How?
    PyPy.py PyPy.c PyPy.js
    mycode.js mycode.x86
    mycode.py
    PyPy.x86
    rpython js jit
    emcc
    pypy jit
    js jit
    cpu
    micro-ops
    prediction
    pipelining
    ...

    View Slide

  56. It's awful
    all the way down

    View Slide

  57. Why?

    View Slide

  58. PyPy.js: Why?
    http://www.smbc­comics.com/index.php?id=2088

    View Slide

  59. PyPy.js: Why?
    http://www.smbc­comics.com/index.php?id=2088

    View Slide

  60. PyPy.js: Why?
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    p
    y
    t
    h
    o
    n
    "
    >
    p
    r
    i
    n
    t
    (
    "
    b
    u
    h
    -
    b
    y
    e j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    !
    "
    )
    <
    /
    s
    c
    r
    i
    p
    t
    >

    View Slide

  61. You're
    gonna have
    a bad time

    View Slide

  62. Consider Alternatives
    http://brython.info
    http://github.com/PythonJS

    View Slide

  63. py2exe

    View Slide

  64. py2web

    View Slide

  65. IPython

    View Slide

  66. Free Stuff!

    View Slide

  67. Please, file bugs
    against the Web

    View Slide

  68. [email protected]
    @rfkelly
    http://pypyjs.org/
    http://github.com/rfk/talk­pypyjs­what­how­why

    View Slide

  69. View Slide