ReactPy now powers Tethys Platform for building applications in pure Python by leveraging any declarative ReactJS library

[shawncrawley]

Attention, everyone! I've been waiting for literally over a year now to officially share the awesome news that a project called Tethys Platform has now officially released a version, 4.4.2, on PyPi and Conda that fully incorporates ReactPy in a very simple, yet powerful, app development framework. Tethys Platform itself was built on Django and its primary goal is to empower web app development for the geoscience community and others that use Python heavily for their science, but are not web developers. ReactPy has certainly helped to that end, as Tethys Platform web applications can now be developed using a single Python file, nothing more! Not only that, but in a one-liner you can essentially import any fully (or almost fully) declarative ReactJS package and use it immediately. You can also nest any components from any packages within each other however you'd like!

Tethys Platform is not just a web application development framework, but a whole self-hosted user and app management portal. Getting started with trying it out for your own development - even just in a "playground" setting is as easy as 1, 2, 3:

python -m venv /path/to/new/environment
source /path/to/new/environment/bin/activate
pip install tethys-platform
tethys quickstart

This will create and start your own localhost Tethys Platform Portal at localhost:8000, where you can log in with admin:pass and then generate a boilerplate app via the GUI that you can then develop further, or import one from an existing zipfile or git clone URL.

I developed an app myself called the "Component Playground" which is the equivalent to a JSFiddle wherein you can play around with developing quickly. The code for this app is available here. Here's an example screenshot of the app in action, showing code on the left and the rendered preview on the right.

Here's a close-up of the code, followed below by a close-up of the preview:

Note the lib.register command that essentially does the equivalent of import react-grid-layout@1.5.3 as rgl so it can then be used immediately via lib.rgl.

# This relies on a bugfix
import math
import random
from tethysapp.component_playground.app import App


def generate_layout(lib):
    layout = []
    for i in range(25):
        y = math.ceil(random.random() * 4) + 1
        layout.append(
            lib.Props(
                x=round(random.random() * 5) * 2,
                y=math.floor(i / 6) * y,
                w=2,
                h=y,
                i=str(i),
                static=random.random() < 0.05,
            )
        )
    return layout


@App.page
def reactive_grid_layout(lib):
    layout, set_layout = lib.hooks.use_state(generate_layout(lib))
    lib.register(
        "react-grid-layout@1.5.3",
        "rgl",
        default_export="RGL",
        styles=[
            "https://esm.sh/react-resizable@3.0.5/css/styles.css",
            "https://esm.sh/react-grid-layout@1.5.3/css/styles.css",
        ],
    )

    return lib.tethys.Display(
        lib.html.style(
            """
        .my-container {
            outline: 2px solid black;
        }
        """
        ),
        lib.bs.Button(onClick=lambda _: set_layout(generate_layout(lib)))(
            "Generate New Layout"
        ),
        lib.rgl.RGL(
            layout=layout,
            cols=12,
            rowHeight=30,
            width=800,
        )(
            *[
                lib.html.div(
                    key=f"{i}",
                    className="my-container " + ("static" if l.static else ""),
                )(
                    lib.html.span(
                        className="text",
                        title="This item is static and cannot be removed or resized.",
                    )(f"{i} - Static")
                    if l.static
                    else lib.html.span(className="text")(f"{i} - Move, or resize me.")
                )
                for i, l in enumerate(layout)
            ]
        ),
    )

This example was largely taken from the official react-grid-layout page here.

Here are some resources for getting started:
https://docs.tethysplatform.org/en/stable/#quick-start
https://docs.tethysplatform.org/en/stable/tutorials/component_app_basics.html
https://docs.tethysplatform.org/en/stable/tethys_sdk/components.html
https://docs.tethysplatform.org/en/stable/recipes.html#component-apps
https://github.com/shawncrawley/tethysapp-component_playground

Let me know if I can help or answer any questions about any of this. Would love to get some feedback and continue to build on it - and on ReactPy itself of course. Thank you!