I’m happy to announce the 1.0.0 release of Elm-UI.

So, what’s new?

Elm-UI is now more stable and more approachable then ever.

Elm-UI is now just an Elm package

The development environment has been moved to elm-dev-env

All external dependencies have been removed (e.g. Sass, Open Sans, IonIcons)

All styles have been converted to pure Elm

Components can be used standalone

Tests added for each component with elm-spec

Go to elm-ui.info and try it out. Or you can checkout the examples or the code of the website.

Improving access — Removal of external dependencies

Previously, the main problem for Elm-UI was that many people were interested in it, but it wasn’t very accessible because:

It bundled dependencies like Open Sans and IonIcons which made the production build unnecessarily large

and which made the production build unnecessarily large Node and the CLI (elm-ui) were required to use the library

Components could not be used standalone because the styles for all of them needed to be imported, even for only one

As a fix to this, all styles have been converted to pure Elm. So I've been experimenting and have opted to create a simple module to handle this, mainly because I didn't have much experience with available packages like rtfeldman/elm-css and mdgriffith/style-elements, and I also wanted something simple and Sass like. Moving the styles from Sass was straightforward, it was almost a one to one conversion.

Open Sans and IonIcons were not a necessity and could be removed without many issues. The font stack is now the same as Bootstrap is using and the icons that were used in the components are moved to Elm code using the elm-lang/svg package.

By removing all of the external dependencies and migrating the stylesheets to pure Elm made Elm-UI just an other Elm package (what you can install with elm-github-install, because it still has some Native code (320 lines) and a few effect modules).

Development environment

Elm-UI had a command line interface to make it easy for people to make web applications in Elm using Elm-UI. This caused a lot of confusion for people when installing and trying to use the library. Also it made it harder to develop the library because it meant that it needed to support two separate feature sets.

To resolve this, that part of Elm-UI was moved to elm-dev-env.

API changes

There are a few major changes that happened to the components to make them more consistent:

Attributes are now used instead of classes in components

Fixed race condition when using HTML input and textarea elements

elements The subscribe function in components now renamed to onChange to better reflect their function

function in components now renamed to to better reflect their function Components that had an address and ViewModel arguments for the views are now only takes ViewModel which contains the address

and arguments for the views are now only takes which contains the Components now take an empty tuple () instead of value arguments and have DSLs to set their attributes:

Ui.Textarea.init "value" "placeholder" -- becomes Ui.Textarea.init ()

|> Ui.Textarea.defaultValue "value"

|> Ui.Textarea.placeholder "placeholer"

Testing, testing

Elm-UI was not really well tested. This was because there was no testing framework that would have allowed to test components at all (we know there is elm-test but it’s a unit testing framework).

The testing stack included Selenium and Nightwatch.js and it was written in JavaScript. The few tests (~10) it had, ran for a few minutes and failed more often than not for unknown reasons (timeouts suspected).

A goal for this release was to create tests for most components. To do that I created elm-spec which was inspired by RSpec, Jest and Cucumber. It allowed me to test components and full applications in the command line as well as in the browser with consistent results.

Currently there are ~180 test cases for the components and the plan is to add more and to cover more behavior.

elm-spec will be covered in a future post in more detail….watch this space.

Go and see for yourself

Interested in finding out more about Elm-UI? Go to elm-ui.info and try it out!

You can read the full changelog here: https://github.com/gdotdesign/elm-ui/releases/tag/1.0.0 or checkout the examples or the code of the website.

Drop by and let me know how you get on.