Writing an Elm UI Framework — Part 1: Introduction
About a year ago we launched our new website and e-commerce site at Special-Elektronik using Elm as the front-end tool. Elm is a functional programming language for writing reliable web apps. Elm promises no runtime exceptions, great performance and a delightful developer experience. After working with Elm on a daily basis for almost three years I can confirm that Elm delivers on all of these promises.
The website and e-commerce site consist of two separate projects. There are many reasons as to why we chose to separate them, the main rationale being that they have different sets of technical requirements. The website mostly contains static information with limited interactivity such as text and images. On the contrary, the e-commerce site has almost no static content with tons of moving pieces all over the place. Separating them enabled the possibility of optimizing each setting independently.
Despite the sites’ technical differences, it was important to deliver a consistent user experience in terms of design. The UI framework is needed to benefit both projects and reduce duplication. The UI framework was greatly inspired by Bulma and NoRedInk UI.
Intent
Using Elm eliminates the usual problems with CSS such as global scope, unused styles and specificity wars. In its place, we get typed CSS using Elm CSS which compiles to inline styles at runtime.
This library has the same goals as Elm CSS where we focus on type-checked and correct components. Every component has its own modifiers in place of global “catch-all” kinds.
Taken from the README.md:
Let these 2 mottos guide you:
“Don’t make me think!” — Steve Krug (“Me” beeing the developer using this library, and the end user)
“Let’s go for the ambitious approach!” — Richard Feldman (“Us” being the developers working on this library)
Not just CSS
Elm can handle SVG as well as HTML so there is no reason why we cannot have icons and logos as part of the framework.
Button example
This button takes a list of modifiers such as size and color, an optional msg and the content of the button which in this case is a cart icon and some text. It roughly follows the same behavior as regular Html tags. Some “components” use other patterns like the with*-pattern (pron. with star), also known as the Builder pattern.
In future articles, I will go into more detail on all the things I have learned and the different patterns used.
