Brython: Ersetzen von JavaScript durch Python im Frontend

Hallo Habr!



Sehr zur Zufriedenheit unserer Leserschaft aktualisiert unsere Arbeit weiterhin die Python-Bücher . Aber die Suche geht in diese Richtung weiter - und heute möchten wir Brython - Python für Browser erwähnen. Der Artikel ist kurz, ein wenig verspielt und detektivisch, wir haben versucht, den Stil des Autors beizubehalten.



Dieser Artikel bietet eine kurze Einführung in die Arbeit mit Brython , einer Python-Implementierung für die Front-End-Entwicklung (Browser).



Das gesamte Projekt ist hier veröffentlicht .



Einführung



Neidisch auf den Erfolg von JavaScript-Programmierern trafen sich Python-Verschwörer im Geheimen, um die Zukunft von Python in dieser apokalyptischen Welt zu diskutieren. JavaScript ist überall und verschlingt Pythons Clearing. Mit Node.js bewaffnet , ist JavaScript in das Gebiet von Python eingedrungen und hat seine dominierende Rolle als beliebte serverseitige Sprache verloren, in der es zuvor mit Ruby konkurrierte ( erinnern Sie sich an diese Tage ?). Dann ist es Zeit, einen Streifzug durch das Herz von JavaScript zu unternehmen: den Browser.



Vergiss deine Geschichte nicht (und erinnere dich an die Zukunft)



Dieses Dilemma war nicht auf die oben genannten Verschwörer beschränkt. Es gab einen anderen Umhang- und Dolchritter , den Autor von Transcrypt . Er beschloss, einen Compiler für Python zu schreiben, der Code direkt in JavaScript kompiliert. Als guter Giftmischer hinterließ er keine Spur von Python. Es sah vielversprechend aus.



Andere zogen es vor, den Geschichtsunterricht zu nutzen. Einfach mit der ganzen Familie einwandern. Zumindest dachten die Schöpfer von Pyodide so . Sie wollten eine Enklave auf der JavaScript-Seite mit einem vollständigen Python-Interpreter erstellen, der Python-Code ausführen konnte. Dementsprechend könnte dort jeder Python-Code ausgeführt werden. , einschließlich des größten Teils seines Data-Science-Stacks, bei dem Bindungen an die C-Sprache bestehen (z. B. Numpy, Pandas).



Es sieht auch sehr vielversprechend aus. Erste faule Tests des Autors von Pyodide zeigten jedoch, dass die Seite zunächst etwas langsam geladen wurde.



Dann taten die Verschwörer genau im Geiste guter Verschwörer: Sie erstellten einen anderen Compiler, um Python in JavaScript zu konvertieren, diesmal jedoch beim Laden der Seite in JavaScript (nicht wie Transcrypt, das den Code im Voraus in JavaScript kompiliert). So wurde die Brython-Bruderschaft gegründet. Eine Schlange, die sie alle regiert.



Hallo Welt



Schreiben wir die traditionelle 'Hallo Welt'.



Und hier ist der Brython-Soldat (ich spreche über den Compiler).



<script type="text/javascript"
       src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js">
</script>
    
<body onload="brython()">
...
</body>
      
      





In dem body



oben gezeigten Tag schreiben wir den Code in Brython:



<script type="text/python">
from browser import document

document <= "Hello World"
</script>

      
      





Wir fügen dem Element einfach Hello World hinzu document



. Hmm. Sehr leicht.



In vollem Umfang - unten.



<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/brython@3.8.8/brython.min.js">
    </script>
</head>

<body onload="brython()">

<script type="text/python">
from browser import document

document <= "Hello World"
</script>
</body>
</html>
      
      





In diesem Fall wird auf der Seite einfach die Begrüßung „Hallo Welt“ angezeigt.



Taschenrechner



Schreiben wir einen Taschenrechner in Brython. Sein ganzer Code ist hier veröffentlicht .







Ja, Sie haben es erraten, wir brauchen einen Tisch. Machen wir das.



from browser import document, html
calc = html.TABLE()

      
      





Fügen wir nur die erste Zeile hinzu. Das heißt, wir zeigen das Feld für Zahlen (nennen wir es result



) und die C-Taste an.



calc <= html.TR(html.TH(html.DIV("0", id="result"), colspan=3) +
                html.TD("C"))
      
      





Ja, ich bin mir bei dieser Syntax auch nicht sicher <=



. Aber urteilen Sie selbst, eine so coole Bibliothek, also stimme ich dem zu.



Fügen wir nun die Tastatur hinzu



lines = ["789/", "456*", "123-", "0.=+"]
calc <= (html.TR(html.TD(x) for x in line) for line in lines)
      
      





Zum Schluss hinzufügen calc



zu document



.



document <= calc
      
      





So weit so gut. Wie bringen wir das alles zum Laufen? Zuerst müssen Sie einen Verweis auf das Ergebniselement abrufen, um es beim Drücken der Tasten zu bearbeiten.



result = document["result"] #       id
      
      





Als nächstes müssen wir result



jedes Mal aktualisieren, wenn ein Element auf der Tastatur gedrückt wird. Dazu erstellen wir einen Event-Handler. Vertrauen wir den Brython-Entwicklern und stellen fest, dass dieser Code funktioniert. Achten Sie auf Manipulationen, result



je nachdem, welche Taste Sie gedrückt haben.



def action(event):
    """  "click"     ."""
    # ,  ,   "target" 
    #  event 
    element = event.target
    # ,   ,    "text" 
    value = element.text
    if value not in "=C":
        #    
        if result.text in ["0", "error"]:
            result.text = value
        else:
            result.text = result.text + value
    elif value == "C":
        # 
        result.text = "0"
    elif value == "=":
        #      
        try:
            result.text = eval(result.text)
        except:
            result.text = "error"
      
      





Binden Sie abschließend den obigen Ereignishandler an ein Ereignis click



auf allen Schaltflächen.



for button in document.select("td"):
    button.bind("click", action)
      
      





Sie sehen, wie einfach es war. Aber im Ernst, Brython scheint mir ein Meisterwerk der Technik und vielleicht das beste Beispiel für meine Liebe zur Python-Sprache zu sein. Bitte unterstützen Sie die Entwickler und geben Sie ihnen ein Sternchen im Github- Repository !



All Articles