Introduction to PyScript

Transcript

1. Introducción a PyScript Joaquín Salvachúa Joaquin.salvachua@upm.es. @jsalvachua
5. JavaScript
7. Pyscript • Python in the browser: Enable drop-in content, external file hosting (made possible by the Pyodide project, thank you!), and application hosting without the reliance on server-side configuration • Python ecosystem: Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more) • Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces • Environment management: Allow users to define what packages and files to include for the page code to run • Visual application development: Use readily available curated UI components, such as buttons, containers, text boxes, and more • Flexible framework: A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python
9. Arquitectura de integración en el navegador
10. Projects • WebAssembly/WASM: a portable binary-code format and text format for executable programs & software interfaces to enable high performance applications on web pages and other environments • Emscripten(https://emscripten.org/): an Open Source compiler toolchain to WebAssmbly, practically allowing any portable C/C++ codebase to be compiled into WebAssembly • Pyodide(https://pyodide.org/)/python-wasm( https://github.com/ethanhs/python-wasm): Python implementations compiled to WebAssembly
11. WebAssembly. https://webassembly.org
12. https://emscripten.org/
13. Pyodide • Based on • Python WASM https://github.com/ethanhs/python-wasm Just Try it :: https://pyodide.org/en/stable/console.html Note : security does not allow install ANY package not ported via Pyodide (and sandbox it)
14. PyScript • PyScript is a meta project that aims to combine multiple open technologies to create a framework for users to use Python (and other languages) to create sophisticated applications in the browser. It highly integrates with the way the DOM works in the browser and allows users to add logic, in Python, in a way that feels natural to web as well as Python developers.
15. How to use PyScript in your page • Just add this to your page :: <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
17. Hello world !!
18. Uso de PyScript • <py-script> "Hello World" </py-script> • <py-script src="/my_own_file.py"></py-script> • <py-env> - bokeh - numpy - paths: - /utils.py </py-env> • <py-repl id="my-repl" auto-generate="true"> </py-repl>
19. Tutorial • Tener una página web • Añadir <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> Puedes hacer la página con HTML y JavaScript y añadir un bloque con Python.
20. PyScript CLI • Puedes generar la cobertura de HTML con una herramienta : • https://github.com/pyscript/pyscript-cli
21. Examples • https://github.com/pyscript/pyscript/tree/main/pyscriptjs/examples • Accesible via : • https://pyscript.net/examples/