PuePy is an attempt to create a frontend framework using PyScript. PuePy is partially inspired by Vue. It runs entirely in your browser, though server-side rendering is likely feasible. PuePy aims to support two runtime environments: PyScript Pyodide or PyScript Micropython. The Micropython option foregoes some features found in the CPython, but offers a far, far smaller runtime, making it a better option for websites. Line-of-business or scientific webapp developers may prefer the CPython version, which is heavier but more functional.
😎 To see an example of a demo built with PuePy, see ExpenseLemur.com and the Expense Lemur Github Rep.
Here's an example:
from puepy import Page, Application, t
app = Application()
@app.page()
class Hello(Page):
def initial(self):
return dict(name="")
def populate(self):
with t.div(classes=["container", "mx-auto", "p-4"]):
t.h1("Welcome to PyScript", classes=["text-xl", "pb-4"])
if self.state["name"]:
t.p(f"Why hello there, {self.state['name']}")
else:
t.p("Why don't you tell me your name?")
t.input(placeholder="Enter your name", bind="name")
t.button("Continue", classes="btn btn-lg", on_click=self.on_button_click)
def on_button_click(self, event):
print("Button clicked") # This logs to console
app.mount("#app")A few things to note:
- The
.statedictionary, which is populated byinitial(), is reactive. As it changes, populate is called as necessary and the page is redrawn. - Events are simply and Python, but use JavaScript events under the hood (including custom events)
- You layout your page with context managers.
You can define reusable components with PuePy, which also use slots (similar to Vue, Web Components, etc). Here's a simple Card component:
from puepy import Component, Prop, t
# This registers the component
@t.component()
class Card(Component):
default_role = "card"
props = ["help_text", Prop("show_buttons", "whether to show buttons", bool, False)]
def populate(self):
with t.div(classes="card-header"):
self.insert_slot("card-header")
with t.div(classes="card-body"):
self.insert_slot()
if self.show_buttons:
with t.div(classes="card-footer"):
t.button("Button 1")
t.button("Button 2")Using the component is simple:
@app.page("/my-page")
class MyPage(Page):
def populate(self):
with t.card(show_buttons=True) as card:
with card.slot("card-header"):
t("Show header here")
with card.slot():
t("This is the card body")A few things to note:
- PuePy is not fully documented yet
- I haven't figured out exactly what is permanent and what isn't
- You can examine, in git, the
/examplesdirectory and view them withpython3 ./serve_examples.py
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent