Pudgy is a component library for flask that allows one to build and compose components in python that are automatically sent to the client and instantiated.

I use pudgy for building quick apps in python - with pudgy, its easy to build a website and incrementally add more features to it. Components are placed into templates and their required javascript and CSS is automatically sent to the client and instantiated.

What makes pudgy awesome is that you can start by building your website using templates and traditional server rendering techniques and as more functionality is added, you can easily refactor the useful portions into components and re-use them elsewhere.

Pudgy is based on my experience in page delivery and building server/client side components. It’s goal is to be easy to construct interactive pages on the server that have rich functionality on the client.

Features

  • components features are added by inheriting from pudgy classes
  • automatic CSS scoping for components using Sass
  • transparent component marshalling between server and client
  • multi-plexed assets: no need for webpack, it’s all dynamic and on-demand
  • easy RPC for client <-> server communication
  • component inheritance
  • React and Backbone views are supported
  • BigPipe style delivery

Simple component example

import pudgy

class DemoComponent(pudgy.MustacheComponent, pudgy.SassComponent,
    pudgy.BackboneComponent, pudgy.ClientBridge):
    pass

class DemoPage(pudgy.ServerBridge, pudgy.FlaskPage,
    pudgy.BackboneComponent):
    pass

@app.route("/")
def hello():
    component = DemoComponent()
    component.context.update(
        title="foobar",
        about="about this component"
    )

    dp = DemoPage(
        template="example.html",
        component=component,
    )

    dp.call("SetComponent", component)

    return dp.render()

This example instantiates a DemoComponent, adds some data to it, renders into DemoPage’s template and then hands it to the client. The hand-off is transparent: in python, you can make a call that takes a component and that component is automatically re-instantiated on the client and usable there.

Notice that a component gets its behavior by inheriting from various pudgy classes. To use a component that renders itself with Mustache templates, we inherit MustacheComponent. For jinja templates, we inherit from a JinjaComponent. To use Backbone, we inherit from Backbone. Pudgy uses the base classes to add CSS, templating and Javascript to any component. ServerBridge components are automatically given RPC commands, making it easy to write a full app without writing any XHR calls by hand at all.

Status

I have used pudgy for multiple projects and it is available as free software, but I do not put time into convincing others to use it or writing docs - I think that it is not a good way to spend my time currently. Every developer has their own opinions on how things should work and I think they are all reasonably valid.