Elm is in no way an alternative to HTML+CSS. It is an alternative to JS as a way of doing work client side (it does in fact compile to JS).
The 'view' functions in Elm return HTML (represented using an ELM DSL for convenience) that is added to the DOM and so then rendered using some CSS provided elsewhere in the normal way.
I have a vastly different experience:
At CurrySoftware we used style-elements[1] to build a internal frontent for a client.
The whole project only contains 15 lines of HTML that sets up the elm-app. Zero CSS or other HTML.
Try it out. IMO it changes everything about frontend development.
Do you have any experience of how easy it is to add accessibility information or attributes when using style-elements? If it generates its own HTML and doesn't give you access to things like ARIA, that is a concern.
Thank you. I hadn't heard of this and it's really interesting. What are the downsides of that approach? Is style-elements as full featured as you'd want?
It is pretty much fully featured as what you would need in any typical web-app.
One crucial thing that is missing is guaranteed browser support. That is why we only used it for the clients internal frontend. But as I understand it, this will be addressed in the upcoming 5.0 release.
Also the resulting HTML is not always as optimal as I would hope.
All in all development is just so much faster and cleaner. No need to worry about layout and style. After using style-elements for a while, HTML + CSS seem like a really stupid idea to describe layout and style.
That's not much different from a React app, in terms of how much HTML needs to be involved. As low as 9 lines, if you want (basic HTML scaffold + root element).
I'd think a particularly adventurous person could do it without writing any HTML and just create the scaffolding directly in the DOM before the app is mounted, but that would be a little silly.
This is interesting, but how accessible / semantic is the markup it produces? Is it smart enough to see that I'm iterating over a list and producing an element for each item, and output <li>, for example?
