Python im Browser? Ja, das geht!

Werfen wir zuerst einen Blick auf ein kleines Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Brython</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython_stdlib.min.js"></script>
  </head>
  <body onload="brython()">
    <button id="echo">click !</button>
    <div id="output"></div>
    <script type="text/python">
      from browser import document

      def click(ev):
        for i in range(10):
          document["output"] <= f"{i}"

      document["echo"].bind("click", click)
    </script>
  </body>
</html>

Hier sehen wir eine einfache HTML Seite mit einem Button, einem div und einem Script. Allerdings ist hier etwas anders. Hier steht ja text/python! Und in dem Script-Tag steht ganz gewöhnlicher Python-Code. Möglich wird dies durch die Einbindung von zwei JavaScript-Dateien:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython_stdlib.min.js"></script>

Hiermit wird Brython auf der Seite eingebunden. Bei diesem Projekt wurde der Python-Interpreter mit der Standardbibliothek in JavaScript übersetzt. Hierdurch lässt sich Python-Code mit jedem modernen Webbrowser ausführen. Außerdem kann man, aufgrund des vorhandenen DOM-Zugriffs, auch gängige JavaScript-Aufgaben durchführen. Um Brython zu aktivieren, muss lediglich im body Element onload="brython()" eingefügt werden. Der Python-Code lässt sich natürlich auch in separaten Scripts speichern, welche dann über ein <script> Element nachgeladen werden können. Eine Besonderheit liefert Brython auch noch mit: Mit einem <= Operator können Strings auf einem sehr eleganten Weg in das bestehende HTML eingefügt werden.

Leider haben der Interpreter und die Standardbibliothek auch eine ordentliche Größe: Bei der optimierten Version müssen stolze 795 kB geladen werden. Dies kann die Ladezeit einer Seite sehr verlängern. Auch wenn diese Ladezeiten für viele Projekte ein Problem darstellen können, ist Brython eine großartige Möglichkeit, um vorhandene Python-Kenntisse im Frontend einsetzen zu können.

Das Beispiel kann hier interaktiv ausprobiert werden.

SoftwareentwicklungWissen