Brython: remplacer JavaScript par Python sur le frontend

Bonjour, Habr!



À la grande satisfaction de notre lectorat, notre travail continue de mettre à jour les livres Python . Mais la recherche se poursuit dans ce sens - et aujourd'hui nous aimerions citer Brython - Python pour les navigateurs. L'article est court, un peu ludique et détective, nous avons essayé de garder le style de l'auteur.



Cet article fournit une introduction rapide à l'utilisation de Brython , une implémentation Python pour le développement frontal (navigateur).



L'ensemble du projet est posté ici .



introduction



Envieux du succès des programmeurs JavaScript, les conspirateurs de python se sont réunis en secret pour discuter de l'avenir de Python dans ce monde apocalyptique. JavaScript est partout, dévorant la compensation de Python. Armé de Node.js , JavaScript a envahi le territoire de Python et il a perdu son rôle dominant en tant que langage serveur bien-aimé où il rivalisait auparavant avec Ruby ( vous vous souvenez de ces jours ?). Ensuite, il est temps de faire une incursion au cœur du territoire JavaScript: le navigateur.



N'oubliez pas votre histoire (et souvenez-vous du futur)



Ce dilemme ne se limitait pas aux conspirateurs susmentionnés. Il y avait un autre chevalier à la cape et au poignard, l'auteur de Transcrypt . Il a décidé d'écrire un compilateur pour Python qui compile le code directement en JavaScript. En bon empoisonneur, il n'a laissé aucune trace de Python derrière lui. Cela avait l'air prometteur.



D'autres ont préféré profiter des leçons d'histoire. Immigrez simplement avec toute la famille. Du moins, c'est ainsi que pensaient les créateurs de Pyodide . Ils allaient créer une enclave côté JavaScript avec un interpréteur Python complet capable d'exécuter du code Python. En conséquence, n'importe quel code Python pourrait y être exécuté. , y compris la plupart de sa pile de science des données, où il existe des liaisons avec le langage C (par exemple, Numpy, Pandas).



Cela semble également très prometteur. Mais les premiers tests paresseux effectués par l'auteur de Pyodide ont montré que la page se chargeait un peu lentement au début.



Ensuite, les conspirateurs ont fait exactement dans l'esprit des bons conspirateurs: ils ont créé un compilateur différent pour convertir Python en JavaScript, mais cette fois, compilez en JavaScript au chargement de la page (pas comme Transcrypt, qui compile le code en JavaScript à l'avance). La Fraternité Brython est ainsi formée. Un serpent pour les gouverner tous.



Bonjour le monde







Écrivons le traditionnel «Hello World» Et voici le soldat Brython (je parle du compilateur).



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





Dans la balise body



ci-dessus, nous écrivons le code en Brython:



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

document <= "Hello World"
</script>

      
      





Nous ajoutons simplement Hello World à l'élément document



. Hmm. Très facile.



En entier - ci-dessous.



<!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>
      
      





Dans ce cas, la page affichera simplement le message d'accueil «Hello World».



Calculatrice



Écrivons une calculatrice en Brython. Tout son code est affiché ici .







Oui, vous l'avez deviné, nous avons besoin d'une table. Faisons le.



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

      
      





Ajoutons seulement la première ligne. Autrement dit, nous afficherons le champ des nombres (appelons-le result



) et la touche C.



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





Oui, je ne suis pas trop sûr de cette syntaxe avec l'un ou l'autre <=



. Mais, jugez par vous-même, une bibliothèque tellement cool, alors je suis d'accord.



Ajoutons maintenant le clavier



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





Enfin, ajoutez calc



à document



.



document <= calc
      
      





Donc, jusqu'ici tout va bien. Comment faire fonctionner tout cela? Tout d'abord, vous devez saisir la référence à l'élément de résultat pour le manipuler lorsque les touches sont enfoncées.



result = document["result"] #       id
      
      





Ensuite, nous devons mettre à jour result



chaque fois qu'un élément du clavier est enfoncé. Pour cela, créons un gestionnaire d'événements. Faisons confiance aux développeurs Brython pour trouver que ce code fonctionne. Faites attention à la manipulation en result



fonction du bouton sur lequel vous avez appuyé.



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"
      
      





Enfin, liez le gestionnaire d'événements ci-dessus à un événement click



sur tous les boutons.



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





Vous voyez comme c'était simple. Mais sérieusement, Brython me semble être un chef-d'œuvre d'ingénierie et peut-être la meilleure illustration de mon amour pour le langage Python. Veuillez soutenir les développeurs et leur donner un astérisque dans le référentiel Github!



All Articles