Elm with existing html templates

Hi all,

I am approaching Elm. Currently, I am evaluating Elm for a specific use case.

I have an admin website to perform CRUD operations. It’s made in Elixir (Phoenix) and has small bits of javascript only where needed.

Some examples:

  • Toggling visibility of a password field
  • Toggling visibility of a sidebar
  • Toggling visibility of a user menu
  • A date picker widget

In the examples I’ve seen so far Elm takes care of the “templating” part, so my question is:

Can I write Elm logic that works with the HTML I already have?
If so, is it idiomatic or just goes against the Elm Architecture?

I love the language, but I don’t want to misuse that and make it a nightmare to work with

Thank you,
Cheers!

Your use case sounds more like you should be using CSS and HTML, and maybe a teeny tiny bit of JS.

I already have the tiny bits of JS.
I just wanted to port them in a functional and statically typed language, I went through the Elm guide and it was great. Really love the language.
OTOH, I don’t want to use it in the wrong context.

I don’t think it’d be the wrong context or even a bad idea. Just feels like too much for small UI things. E.g. the side menu could likely be done in CSS only. You could optionally add a tiny bit of JS if you’d prefer that route. This means your page loads incredibly fast.


I’d also take note that mixing Elm with JS, static HTML, etc should be thought of as working with black boxes. You can send data into Elm and you’ll get data out, and vice versa. You can’t directly query the DOM from Elm.

I believe that’s exactly what would make Elm not the ideal tool for this particular job, thanks a lot!
Don’t want to shot at a mosquito with a bazooka.

Out of curiosity: do you know any functional language (preferably with algebraic data types) that has easy access to the DOM in some clever way?

Cheers!

Hey, that’s a rails tagline! :slight_smile:

You could have a look at this language for something in between: https://rescript-lang.org/

Maybe the React/JSX support could be useful to migrate fragments of HTML and add behavior to them bit by bit. I haven’t used the language yet though, and I don’t think it interests me.

If you just wanna have fun though, I should point out that you can use converter tools such as this one: https://html-to-elm.com/

Thank you, I’ll think about that.
Another option would just use a “functional” library for javascript + a typing system (but the feeling is different I believe)

I was going to suggest this, but when there’s so little scripting needed I really like to keep it as simple as possible. Mostly meaning I try to avoid any additional build steps or dependencies.

2 Likes

This.
Also, some of the js bits are so small they are inline, and I am not ashamed of that.

This one’s interesting for small bits of logic: ///_hyperscript
But that’s OT.

Cheers!

There are tiny libraries to handle such matters, if you’re not sure about using Elm to work with or replace the existing solution. RE:DOM is one of them, but I haven’t used it.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.