Ludic Framework

Igor Davydenko
Pykonik#71

Have anyone of you know about?

The Problem

React

  • I mean…

  • Vue is a problem as well

  • Svelte is a problem

  • S

  • P

  • A

  • is a problem

SPA

  • Not every website and web application is a Single Page Application

  • Your personal website

  • Your blog

  • Landing for your pet project

  • Landing for your software company

  • Page for the conference

  • …

MPA

  • Multi Page Application doesn’t solve every problem with SPA

  • It doesn’t fix JS fatigue

  • You still need to npm install

  • Still need to npm build

  • …

But

  • React / Web Components are quite cool

  • Visualization logic in Components, not templates

  • Visualization logic hierarchy

  • …

  • What if I am able to use Components in Python?

  • I mean Type-Guided Components in Python?

Meet, Ludic

from typing import override

from ssg.components import PageComponent
from ssg_pages import layouts
from ssg_pages.landing import components


class LandingPage(PageComponent):
    @override
    def render(self) -> layouts.PageLayout:
        return layouts.PageLayout(
            components.LandingHero(),
            components.LandingCareer(),
            components.LandingPersonal(),
            components.LandingContacts(),
        )

OK, OK, a bit slower

from ludic.catalog.layouts import Box
from ludic.catalog.typography import Link
from ludic.web import LudicApp

app = LudicApp()

@app.get("/")
async def index() -> Box:
    """Homepage endpoint greeting visitors."""
    return Box(
        f"Welcome to {Link("Ludic", to="/")}!",
    )

Ludic Link Component

class LinkAttrs(Attrs):
    to: str

class Link(Component[str, LinkAttrs]):
    """Custom styled Link component."""

    @override
    def render(self) -> a:
        return a(
            *self.children,
            href=self.attrs["to"],
            style={"color": self.theme.colors.primary},
        )

Ludic Page Example

from ludic.catalog.headers import H1
from ludic.catalog.typography import Code, Paragraph
from ludic.html import b

from .pages import Page

def index() -> Page:
    return Page(
        H1("HTML Page in Pure Python"),
        Paragraph(
            f"A sample on how to use {b("Ludic")} to build"
            f"static {Code("HTML")} page in pure Python."
        ),
    )

Links by Category Attributes

class LinksByCategoryAttrs(NoAttrs):
    links: Required[list[LinkData]]
    is_last: Required[bool]

Links by Category Component

class LinksByCategory(Component[NoChildren, LinksByCategoryAttrs]):
    @override
    def render(self) -> lhtml.div:
        return lhtml.div(
            *(
                lhtml.div(
                    lhtml.h3(lhtml.a(link_data["title"], href=link_data["url"]), classes=["h4"]),
                    lhtml.p(link_data["description"]),
                    classes=["col-12", "col-lg-6", "my-3"],
                )
                for link_data in self.attrs["links"]
            ),
            classes=(
                ["align-items-center", "row"]
                + (["mb-5"] if self.attrs["is_last"] else [])
            ),
        )

And more

Use Ludic Framework for great good!

I am Igor Davydenko

Web-site:

igordavydenko.com

Built with Ludic ☺️

GitHub:

@playpauseandstop

Slides

Made with sphinx-revealjs

https://igordavydenko.com/slides/pykonik-71.html