Most Elm projects I work on in a professional setting make use of a wonderful library, created by Richard Feldman, called
elm-css. This library gives you statically typed CSS which can live alongside you view functions, making it easy to see the connections between HTML elements and CSS styling.
Recently, I came across a performance problem in one of our applications, triggered by the amount of work
elm-css had to perform every time there was a change in state. While I did manage to fix the problem using a
Html.Lazy function, I walked away with a hope that
elm-css could be made faster so that there wasn’t a problem to begin with.
In this article, we’ll take a look at how
elm-css works, and how I found a way to nearly double its performance.
The workings of elm-css
Let’s start off with a simple example. Below you’ll see the source code of a very simple
elm-css based application:
module Main exposing (main)
import Html exposing (Html)
import Html.Styled.Attributes exposing (css)
main : Html msg
view : Html.Styled.Html msg
[ Css.backgroundColor <| Css.rgb 0 0 0 ]
Join the pack! Join 8000+ others registered users, and get chat, make groups, post updates and make friends around the world!