Raku::Journey

This is the 11th of the HARC Stack essays. Previous <=

HARC Stack combines HTMX with raku Air, Red and Cro to supply a fresh approach to web development.

While the perennial Todo example is not one of those listed on the HTMX examples, we are now ready to pull that together.

Gonna show the Red version here – it’s marginally longer (4 lines) than the non-Red option but illustrates how easy it is to lob in a database backing store.

Todo

Here’s the finished article in HARC Stack:

Recap

Much of this code should be familiar to our regular readers:

• model Todo does Component::Red[:C:R:U:D] { ... } brings in the Red ORM and sets up the full monty of Create, Read, Update and Delete routes.
• has ... is column attributes are database table columns , is serial is an auto generated unique $.id for each Todo instance
• method HTML { ... } uses Air::Functional style to make HTML tags in the context of general raku code such as the $!checked ?? del $!text !! $!text if-then-else triadic operator
• $.^save, $.^create and $.^all are meta methods setup by Red
• the sub SITE { ... } function builds our webpage – again in the functional style

Please rewind back in the posts if any of this seems unfamiliar…!

Focus

This time I want to focus on this piece of code, which we have glossed over in previous editions.

role HxTodo {
    method hx-create(--> Hash()) {
        :hx-post("todo"),
        :hx-target<table>,
        :hx-swap<beforeend>,
    }
    method hx-delete(--> Hash()) {
        :hx-delete("todo/$.id"),
        :hx-confirm('Are you sure?'),
        :hx-target('closest tr'),
        :hx-swap<delete>,
    }
    method hx-toggle(--> Hash()) {
        :hx-get("todo/$.id/toggle"),
        :hx-target<closest tr>,
        :hx-swap<outerHTML>,
    }
}

This role is composed into model Todo by the line:

also does HxTodo;

The three methods let us define our own “packaged” HTMX attributes via the raku Pair syntax :hx-post("todo") and so on. This is a convenient, local abstraction that helps to streamline our final website code, e.g.:

form |Todo.hx-create, [ ... ]

Complexity

I am a massive fan of the Carson Gross school of Locality of Behaviour (LOB). The way I see it is that coders are constantly fighting complexity. Conservation of complexity dictates that complexity can neither be created nor destroyed, it can be just moved around.

LOB is a reaction to extreme application of Separation of Concerns (such as purist MVC designs). I think that over-localisation (Tailwind anyone?) also has its weaknesses.

The fact is that different problems need a different levels of LOB – and that can evolve over time as codebases become more standardised.

Finally, in Raku, we have a friendly and simple way to use role composition in our code (C++ – no thanks!). So this is an example of a small, local tidying up of code.

Ultimately, you the coder should be able to decide where to make these trade-offs. Every case is unique.

The key to this is to have a language toolkit that provides elegant mechanisms that facilitate code movement at both small and large scales so that we can shift the complexity to the right place.

You know it when you see it. Elegant code wins. The intent is clear. Maintenance is then a breeze.

Technicalities

An eagle eyed reader will have noticed a couple of Raku technicalities used to tune this:

• Return type coercion --> Hash() … the parens coerce the return value of the method – which is a List of Pairs into a Hash . Raku routines can only return one thing so in this case we want a Hash.
• We then apply the Hash like this form |Todo.hx-create, [...] Here we use the | prefix operator to employ a Raku Slip – this flattens the Hash back to a List of Pairs where we need it.

Todo, The Movie

Next Time on this Channel

Keep watching this channel if it feels good. Next time a bit of Searching. Even better, follow the Getting Started and try it out for yourself.

As usual, comments and feedback welcome. We are a friendly bunch over on the raku IRC chat and Discord.

~librasteve