An elm-ui introduction

Jouderian Nobre Junior — Fri, 19 Jun 2020 11:20:59 +0000

Once upon a time, the brave developers were used to use HTML and CSS to build their cool websites. The same idea was brought to Elm, they created a package called elm/html and this package mimics the HTML into functions. Some comparison:

HTML

<div class="fancy-div">Hello new world!</div>

Elm

div [ class "fancy-div" ] [ text "Hello new world" ]

And it works right? I mean, you can build your UI in the same mindset as you were used to do, and you can still use the old and ~~friendly~~ CSS to make it pretty.

There is just one problem with this comfortable plan, it's called HTML + CSS 💩. HTML is not exactly meaningful and CSS can be a mess. Of course, you can improve this using good CSS conventions and naming, but you will still have some div, span and p all over the place.

Trying to avoid that problem a nice guy called Matthew Griffith created a new way to build UIs in Elm, and that package is called elm-ui.

I could try to explain what that package does, but I will only quote the Github description :D.

What if you never had to write CSS again?

So, what I'm trying to say here is that we can do Elm and not use HTML + CSS 💃.

DEV Community: Jouderian Nobre Junior

An elm-ui introduction

HTML

Elm

Let's code