raku HTML::Functional

This is a reproduction of the talk I gave today at the awesome London Perl & Raku Workshop. I met a couple of cool rakuteers and enjoyed the relaxed congregation of perl and raku folk. Seems like the anger has subsided not least thanks to the name change from perl6 to raku. Thanks to all the sponsors, organisers and attendees.

Elm Roots

The more observant members of the raku community will notice that I released a new raku module HTML::Functional a couple of weeks back.

The general idea for this came from the Software Unscripted podcast created by Richard Feldman … one of the dev team on the Elm language – A delightful language
for reliable web applications.

Elm is a functional language that streamlines the development of websites by making the code simpler, more composable, more expressive and more maintainable than raw HTML. I want this for raku!

Actually I want to code my HTML on the server side with raku whereas Elm compiles to JavaScript and runs in the browser. BUT I do like the Elm code style.

Elm Example

Here’s the HTML from the Elm example…

[the code examples in this post may be found in https://github.com/librasteve/raku-HTML-Functional … they are presented as images here for the syntax highlighting… zoom Cmd+ your browser to get a better view]

And here it is in Elm…

This functional code style is cleaner and more expressive than classic HTML tags. Elm avoids the need to repeat tags at start and end of a block and eliminates visually noisy angle brackets.

HTML::Functional

And now for the raku…

To get this module simply go zef install HTML::Functional and then use HTML::Functional; in your header.

This is even cleaner than the Elm and employs a lot of raku functional features implicitly:

• HTML tags are implemented as raku functions: div, h1, p and so on
• parens () are optional in raku function calls
• HTML tag attributes are passed as raku named arguments
• HTML tag inners (e.g. the Str in h1) are passed as raku positional arguments
• the raku Pair syntax is used for each attribute i.e. :name<value>
• multiple @inners are passed as a literal Array [] – div contains h1 and p
• the raku parser looks at functions from the inside out, so strong is evaluated before p, before div and so on
• semicolon ; is used as the Array literal separator to suppress nesting of tags

Normally the items in a raku literal Array are comma , separated. Raku precedence considers that div [h1 x, p y]; is equivalent to div( h1(x, p(y) ) ); … so the p tag is embedded within the h1 tag unless parens are used to clarify. But replace the comma , with a semi colon ; and predisposition to nest is reversed. So div [h1 x; p y]; is equivalent to div( h1(x), p(y) ). Boy that Larry Wall was smart!

The raku example also shows the power of the raku Q lang at work:

• double quotes "" interpolate their contents
• curlies denote an embedded code block "{fn x}"
• tilde ~ is for Str concatenation
• the heredoc form q:to/END/; can be used for verbatim text blocks

Demo Video

To see this in action, view the demo video:

The video showcases IntelliJ IDEA Universal IDE with the latest comma-plugin2.0 courtesy of @ab5stract.

Conclusions

HTML::Functional does this:

• write web pages in Raku with “Elm-like” style
• exports HTML tag names as raku subs
• applies HTML tag attrs as raku attrs
• HTML::Escape for tag text

The clean HTML code it delivers is in tension with modern event driven web frameworks such as React. As we have seen in other posts, HTML::Functional is even more maintainable if used in conjunction with HTMX.

And let’s end with a quote (sadly I did not record the originator)…

I think i just expressed my thought in a wrong way, haha. I am a functional freak, and the first thing i did was check out Raku’s functional patterns. I was amazed. Raku can be extremely functional, but in my opinion language can be called functional when there’s no other way other than functional for the most part. Raku has great functional support, but the language doesn’t force you into anything, you can do basically anything! A sandbox language, and i am loving it.

anon

Comments and feedback welcome!

~librasteve