Skip to main content

JustPy Overview

JustPy: A Powerful Python Library for Building Web Applications

JustPy is a Python library that allows you to build web applications using only Python code. It is designed to be simple and intuitive, making it accessible to developers of all skill levels. JustPy follows a declarative programming paradigm, where you define the structure and behavior of your application using Python functions and classes.

Introduction​

In traditional web development, you typically need to work with multiple technologies like HTML, CSS, and JavaScript. JustPy simplifies this process by providing a Pythonic way to create web applications. With JustPy, you can focus on writing Python code and let the library handle the rest.

History​

JustPy was created by Martin Reurings in 2020. It was inspired by the simplicity and ease of use of the React JavaScript library. Martin wanted to bring a similar experience to Python developers, allowing them to build web applications using their existing Python knowledge.

Features​

1. Reactive Programming​

One of the core features of JustPy is reactive programming. Reactive programming allows you to create dynamic web applications by automatically updating the user interface whenever the underlying data changes. This is achieved through the use of reactive components in JustPy.

Here's an example that demonstrates reactive programming in JustPy:

import justpy as jp

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

    button = jp.Button(text='Click me', a=wp, classes='m-2 p-1 bg-blue-500 text-white')
    output = jp.Div(text='0', a=wp, classes='text-xl')

    @button.click
    def increment(event):
        count.value += 1
        output.text = str(count.value)

    return wp

jp.justpy(count)

In this example, we define a count function that returns a JustPy web page. Inside the function, we create a count variable using the jp.Data class, which represents a reactive value. We then create a button and a div element, and use the @button.click decorator to define a callback function that increments the count value and updates the text of the div element.

When you run this code, you'll see a web page with a button and a div element showing the count value. Every time you click the button, the count value will increase and the div element will be updated automatically.

2. Component-Based Architecture​

JustPy follows a component-based architecture, similar to frameworks like React and Vue.js. Components are reusable building blocks that encapsulate a piece of the user interface and its associated logic.

Here's an example that demonstrates component-based architecture in JustPy:

import justpy as jp

class Counter(jp.Div):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.count = jp.Data(0)
        self.button = jp.Button(text='Click me', a=self, classes='m-2 p-1 bg-blue-500 text-white')
        self.output = jp.Div(a=self, classes='text-xl')

    @jp.justpy
    def increment(self, msg):
        self.count.value += 1
        self.output.text = str(self.count.value)

def app():
    wp = jp.WebPage()
    counter = Counter(a=wp)
    return wp

jp.justpy(app)

In this example, we define a Counter class that extends the jp.Div component. Inside the Counter class, we define the structure and behavior of the counter component. We use the jp.Data class to create a reactive count variable, and define a button and a div element as children of the counter component.

When you run this code, you'll see a web page with a counter component. Every time you click the button, the count value will increase and the div element will be updated automatically.

3. Integrated Plotting​

JustPy integrates seamlessly with the popular Plotly library, allowing you to create interactive plots and charts in your web applications.

Here's an example that demonstrates integrated plotting in JustPy:

import justpy as jp
import pandas as pd

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

jp.justpy(plot)

In this example, we define a plot function that returns a JustPy web page. Inside the function, we create a dataframe using the Pandas library, and pass it to the jp.plot function along with the plot type and the x and y columns. The jp.plot function returns a JustPy plot component that is added to the web page.

When you run this code, you'll see a web page with a scatter plot showing the data points defined in the dataframe.

Examples​

Now that we have discussed the features of JustPy, let's explore a few more examples to see how it can be used to build web applications.

Example 1: To-Do List​

import justpy as jp

class TodoList(jp.Div):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.input = jp.Input(placeholder='Add a task', a=self, classes='m-2 p-1')
        self.button = jp.Button(text='Add', a=self, classes='m-2 p-1 bg-blue-500 text-white')
        self.list = jp.Ul(a=self, classes='list-disc list-inside')

    @jp.justpy
    def add_task(self, msg):
        task = self.input.value
        self.input.value = ''
        jp.Li(text=task, a=self.list)

def app():
    wp = jp.WebPage()
    todo_list = TodoList(a=wp)
    return wp

jp.justpy(app)

In this example, we create a TodoList component that allows users to add tasks to a to-do list. The component consists of an input field, a button, and an unordered list. When the button is clicked, a new list item is created with the task text entered in the input field.

Example 2: Real-Time Chat Application​

import justpy as jp

class ChatApp(jp.Div):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.messages = jp.Div(a=self, classes='h-64 overflow-auto')
        self.input = jp.Input(placeholder='Type a message...', a=self, classes='m-2 p-1')
        self.button = jp.Button(text='Send', a=self, classes='m-2 p-1 bg-blue-500 text-white')

    @jp.justpy
    def send_message(self, msg):
        message = self.input.value
        self.input.value = ''
        jp.P(text=message, a=self.messages)

def app():
    wp = jp.WebPage()
    chat_app = ChatApp(a=wp)
    return wp

jp.justpy(app)

In this example, we create a ChatApp component that allows users to send messages in real-time. The component consists of a div element to display the messages, an input field to type messages, and a button to send messages. When the button is clicked, a new paragraph element is created with the message text entered in the input field.

For more information, you can visit the official JustPy documentation at justpy.io.