Building highly dynamic UI's with Elm

Show & Tell
1

Hi folks!!

Recent Django convert here! :wave:

My work recently moved to Django from an Node + Elm SPA combo. We are using data science pipelines pretty heavily and python just has all the heavy hitters, so it made sense to use.

We have gone all in on Django server rendered templates, so we needed a way to write/reuse Elm programs, declare them in Django templates as tags and have them hydrate on the client. Ideally with 0 lines of handwritten Javascript glue code.

So I created djelm . It let’s you pretty seamlessly write, compile, manage and render Elm programs from within a Django project.

It’s still pretty young but well beyond the first version I built.

How we are using it
All static UI is server rendered and for anything dynamic we either use htmx or Elm.

We found that some types of dynamic UI just doesn’t perform well with constant round trips to the server (htmx), so Elm is used in these cases. Not only this, but we had already written some fancy Elm UI’s and wanted to avoid creating a htmx version.

We declare Elm programs in templates as tags, and even use htmx to render html that includes Elm program tags which then just hydrate on the page.

We also render custom form field widgets with Elm using some of the Elm package libraries.

All in all it has been great fun to build, and there are so many ways it can work with Django that I will be exploring.

If you have wanted to try writing dynamic UI’s in a pure, strongly typed functional programming language, Elm is a really great experience, and Djelm makes it pretty easy to get started.

Here is a video of step by step guide for a super basic setup with a fresh Django project.
Watch in on YouTube

Thanks for reading!

1 Like
2

Hi @Confidenceman02 welcome aboard.

Looks like a cool package. The decoder generation is a nice feature. I will have to have a play :partying_face:.

Since you’re active in Elm, any insight as to potential updates? Last release was 0.19.1 right? (I’ve been away from Elm, so out of touch totally)

3

Howdy @carltongibson,

Thanks for checking it out, and would love to hear any feedback you have.

I have to admit I don’t think I can go back to manually writing decoders! :smile:

In regards to Elm updates, I’m not aware of anything concrete but there are whispers here and there. Unfortunately Elm doesn’t have a roadmap that we can rely on to know what’s coming up, but the language from a community perspective is alive and well!

There’s a video of Evan compiling Elm to a SQL driver not long ago and so it got everyone excited! There’s movement, but it’s very stealthy!

There’s also a new Elm compiler fork called Zokka which I’m looking at pretty closely. Has some cool features like allowing you to use zipped Elm packages outside of the Elm packages registry, and you can replace core modules with custom ones. Looks pretty neat!

1 Like