Skulpt: Python en el navegador web

Viendo un curso de Introduction to Interactive Programming in Python que está siguiendo Marga en el que está programando algunos videojuegos como el Pong. En la página web de Coursera me ha llamado la atención de que todo el código escrito en Python se ejecuta y lo hace en el navegador web. Viendo la firma de la página, veo que se basan en algo llamado Skulpt, ¿Qué será…?

Skulpt es un traductor de lenguaje Python a JavaScript. Parece que la plataforma que ha llegado a ser JavaScript ha madurado lo suficiente para acoger en su haber lenguajes traducibles directamente a este y que se ejecuten en el entorno del navegador web. El hecho de poder escribir código Python y que sea interpretado directamente por el navegador abre posibilidades a programadores que se sienten más cómodos con otros lenguajes como CoffeeScript y no tener que aventurarse a programar en JavaScript.

Como soy bastante práctico, he querido hacer algunas pruebas tomando los ejemplos que vienen en la página web y montándolos yo mismo para ver su funcionamiento.

Montando Skulpt

El compilador de skulpt se encuentra en la propia librería javascript de skulpt. El código Python se carga en el navegador y es compilado para ejecutarse como código javascript. Por lo tanto solo necesitamos una página HTML. Agregamos las cabeceras para las librerías.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> 
<script src="http://www.skulpt.org/static/skulpt.min.js" type="text/javascript"></script> 
<script src="http://www.skulpt.org/static/skulpt-stdlib.js" type="text/javascript"></script> 

He puesto enlaces a sitios donde residen las librerías ahora mismo, pero lo ideal sería bajar estas librerías y que residan en el mismo sitio que la página web.

El código para que un código Python se pueda ejecutar sería algo como lo siguiente:

function runit() { 
    var prog = 'print "Hello World"'; 
    Sk.canvas = "mycanvas";
    Sk.configure({
      output: function(msg) {
        $("#myoutput").html($("#myoutput").html() + msg);
      }, 

      read: function(file) {
        if (Sk.builtinFiles === undefined || 
            Sk.builtinFiles["files"][file] === undefined)
          throw "File not found: '" + file + "'";
        return Sk.builtinFiles["files"][file];
      }
    });
    eval(Sk.importMainWithBody("<stdin>",false,prog)); 
} 

$(document).ready(function() {
    runit();
});

Este es el código de ejemplo presente en la página web de skulpt aunque modificado para que sea más compacto. Además el código no es escrito en un textarea sino que se ha insertado en la variable prog dentro de la función runit.

En el código javascript podemos ver dos funciones que se deben definir. La función output indica al sistema dónde y cómo deben de imprimirse los valores para la salida estándar o stdout. La función read se encarga de buscar ficheros de librería para cuando se emplea un import en Python. Las librerías estándar se encuentran en builtinFiles y no es necesario cargar estos ficheros, solo indicarlos en caso de encontrarlos dentro de la estructura de datos.

El cuerpo de la página web deberá de ser algo así para que el código funcione correctamente:

<body>
    <pre id="myoutput"></pre>
    <canvas id="mycanvas"></canvas>
</body>

Probando

La demo que se ha probado muestra el uso de skulpt con una librería llamada turtle que se emplea como la famosa tortuga presente en los lenguajes Logo. Podemos decirle a la tortuga que avance, que gire, que cambie de color, que se teletransporte, etc. Esta es una muestra de la gran cantidad de librerías integradas dentro del proyecto. A nivel de lenguaje podríamos probar cualquier cosa, el nivel de implementación es muy alto. A través del código de Python podemos incluso modificar el DOM del navegador. Aquí algunas pruebas propuestas en su página web:

Un ejemplo más elaborado del uso de la tortuga:

import turtle

t = turtle.Turtle()

for c in ['red', 'green', 'yellow', 'blue']:
    t.color(c)
    t.forward(75)
    t.left(90)

Un ejemplo con listas de comprensión:

print [x*x for x in range(20) if x % 2 == 0]

Un ejemplo de manipulación del DOM:

import document

pre = document.getElementById('edoutput')
pre.innerHTML = '''
<h1> Skulpt can also access DOM! </h1>
''' 

Las posibilidades son muy altas y el hecho de poder cambiar el uso de javascript por python muy llamativas.

Puedes hacer algunas pruebas aquí.

Conclusiones

A diferencia de otros sistemas como CoffeeScript, Skulpt no se ve como un reemplazo a la escritura de código javascript, al menos al 100%, ya que requiere de una compilación en el navegador para su uso. Quizás con una versión disponible de Skulpt como script ya sea de node.js o cualquier otro sistema de javascript, podría ayudar a integrar este sistema para su uso en entornos de trabajo como Django o Flask, haciendo posible una programación a nivel tanto de cliente como de servidor en Python, ¿utópico? ¿Qué opinas?