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 aHtml.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 Css

import Html exposing (Html)

import Html.Styled

import Html.Styled.Attributes exposing (css)
Featured Content Ads
add advertising here
COGNAC Metaverse
Explore World's first metaverse that is as real as our Real world.
https://cognac.knowasiak.com
							
																			
												
main : Html msg

main =

    Html.Styled.toUnstyled view
view : Html.Styled.Html msg

view =

    Html.Styled.div

        [ css

            [ Css.backgroundColor <| Css.rgb 0 0 0 ]

 












Featured Content Ads
add advertising here
Your AI Companion only on new Bing.
Join the new internet where you get what you ask, Fast and precise.
https://www.bing.com