Saltar al contenido principal

JustPy: Una poderosa biblioteca de Python para construir aplicaciones web

JustPy es una biblioteca de Python que te permite construir aplicaciones web utilizando solo código Python. Está diseñada para ser simple e intuitiva, lo que la hace accesible para desarrolladores de todos los niveles de habilidad. JustPy sigue un paradigma de programación declarativa, donde defines la estructura y el comportamiento de tu aplicación utilizando funciones y clases de Python.

Introducción​

En el desarrollo web tradicional, normalmente necesitas trabajar con múltiples tecnologías como HTML, CSS y JavaScript. JustPy simplifica este proceso al proporcionar una forma "pythonica" de crear aplicaciones web. Con JustPy, puedes centrarte en escribir código Python y permitir que la biblioteca se encargue del resto.

Historia​

JustPy fue creado por Martin Reurings en 2020. Fue inspirado por la simplicidad y facilidad de uso de la biblioteca de JavaScript React. Martin quería brindar una experiencia similar a los desarrolladores de Python, permitiéndoles construir aplicaciones web utilizando su conocimiento existente de Python.

Características​

1. Programación Reactiva​

Una de las características principales de JustPy es la programación reactiva. La programación reactiva te permite crear aplicaciones web dinámicas actualizando automáticamente la interfaz de usuario cada vez que los datos subyacentes cambian. Esto se logra mediante el uso de componentes reactivos en JustPy.

Aquí tienes un ejemplo que demuestra la programación reactiva en JustPy:

import justpy as jp

def contar(app):
    wp = jp.WebPage()
    contador = jp.Data(0)

    boton = jp.Button(text='Haz clic', a=wp, classes='m-2 p-1 bg-blue-500 text-white')
    resultado = jp.Div(text='0', a=wp, classes='text-xl')

    @boton.click
    def incrementar(evento):
        contador.value += 1
        resultado.text = str(contador.value)

    return wp

jp.justpy(contar)

En este ejemplo, definimos una función contar que devuelve una página web JustPy. Dentro de la función, creamos una variable contador utilizando la clase jp.Data, que representa un valor reactivo. Luego creamos un botón y un elemento div, y utilizamos el decorador @boton.click para definir una función de devolución de llamada que incrementa el valor del contador y actualiza el texto del elemento div.

Cuando ejecutes este código, verás una página web con un botón y un elemento div que muestra el valor del contador. Cada vez que hagas clic en el botón, el valor del contador aumentará y el elemento div se actualizará automáticamente.

2. Arquitectura Basada en Componentes​

JustPy sigue una arquitectura basada en componentes, similar a frameworks como React y Vue.js. Los componentes son bloques de construcción reutilizables que encapsulan una parte de la interfaz de usuario y su lógica asociada.

Aquí tienes un ejemplo que demuestra la arquitectura basada en componentes en JustPy:

import justpy as jp

class Contador(jp.Div):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.contador = jp.Data(0)
        self.boton = jp.Button(text='Haz clic', a=self, classes='m-2 p-1 bg-blue-500 text-white')
        self.resultado = jp.Div(a=self, classes='text-xl')

    @jp.justpy
    def incrementar(self, msg):
        self.contador.value += 1
        self.resultado.text = str(self.contador.value)

def app():
    wp = jp.WebPage()
    contador = Contador(a=wp)
    return wp

jp.justpy(app)

En este ejemplo, definimos una clase Contador que extiende el componente jp.Div. Dentro de la clase Contador, definimos la estructura y el comportamiento del componente contador. Utilizamos la clase jp.Data para crear una variable reactiva contador y definimos un botón y un elemento div como hijos del componente contador.

Cuando ejecutes este código, verás una página web con un componente contador. Cada vez que hagas clic en el botón, el valor del contador aumentará y el elemento div se actualizará automáticamente.

3. Gráficos Integrados​

JustPy se integra perfectamente con la popular biblioteca Plotly, lo que te permite crear gráficos interactivos en tus aplicaciones web.

Aquí tienes un ejemplo que demuestra la creación de gráficos integrados en JustPy:

import justpy as jp
import pandas as pd

def grafico(app):
    wp = jp.WebPage()
    datos = pd.DataFrame({'x': [1, 2, 3, 4, 5], 'y': [2, 4, 6, 8, 10]})
    figura = jp.plot(datos, kind='scatter', x='x', y='y', a=wp)
    return wp

jp.justpy(grafico)

En este ejemplo, definimos una función grafico que devuelve una página web JustPy. Dentro de la función, creamos un dataframe utilizando la biblioteca Pandas y lo pasamos a la función jp.plot junto con el tipo de gráfico y las columnas x e y. La función jp.plot devuelve un componente de gráfico JustPy que se agrega a la página web.

Cuando ejecutes este código, verás una página web con un gráfico de dispersión que muestra los puntos de datos definidos en el dataframe.

Ejemplos

Ahora que hemos discutido las características de JustPy, exploremos algunos ejemplos más para ver cómo se puede utilizar para construir aplicaciones web.

Ejemplo 1: Lista de tareas pendientes

import justpy as jp

class ListaTareas(jp.Div):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.entrada = jp.Input(placeholder='Agregar una tarea', a=self, classes='m-2 p-1')
        self.boton = jp.Button(text='Agregar', a=self, classes='m-2 p-1 bg-blue-500 text-white')
        self.lista = jp.Ul(a=self, classes='list-disc list-inside')

    @jp.justpy
    def agregar_tarea(self, msg):
        tarea = self.entrada.value
        self.entrada.value = ''
        jp.Li(text=tarea, a=self.lista)

def app():
    wp = jp.WebPage()
    lista_tareas = ListaTareas(a=wp)
    return wp

jp.justpy(app)

En este ejemplo, creamos un componente ListaTareas que permite a los usuarios agregar tareas a una lista de tareas pendientes. El componente consta de un campo de entrada, un botón y una lista desordenada. Cuando se hace clic en el botón, se crea un nuevo elemento de lista con el texto de la tarea ingresada en el campo de entrada.

Ejemplo 2: Aplicación de chat en tiempo real

import justpy as jp

class AplicacionChat(jp.Div):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.mensajes = jp.Div(a=self, classes='h-64 overflow-auto')
        self.entrada = jp.Input(placeholder='Escribe un mensaje...', a=self, classes='m-2 p-1')
        self.boton = jp.Button(text='Enviar', a=self, classes='m-2 p-1 bg-blue-500 text-white')

    @jp.justpy
    def enviar_mensaje(self, msg):
        mensaje = self.entrada.value
        self.entrada.value = ''
        jp.P(text=mensaje, a=self.mensajes)

def app():
    wp = jp.WebPage()
    aplicacion_chat = AplicacionChat(a=wp)
    return wp

jp.justpy(app)

En este ejemplo, creamos un componente AplicacionChat que permite a los usuarios enviar mensajes en tiempo real. El componente consta de un elemento div para mostrar los mensajes, un campo de entrada para escribir mensajes y un botón para enviar mensajes. Cuando se hace clic en el botón, se crea un nuevo elemento de párrafo con el texto del mensaje ingresado en el campo de entrada.

Para obtener más información, puedes visitar la documentación oficial de JustPy en justpy.io.