Banyan (live site; GitHub) is my first[1] Elm program. I wrote it partly to learn Elm, but also to scratch a personal itch: I wanted to understand my Dropbox usage well enough to drop to the free tier.
Banyan is built on the shoulders of elm-dropbox and Semantic UI, and is hosted as a static site on Netlify. It uses Highcharts, under the Creative Commons (CC) Attribution-NonCommercial license for personal use and demonstrations, to draw the treemap[2].
I’m be grateful for feedback on the UI (please check the issue list first), and on code style and organization.
My experience learning and using Elm has mostly been very pleasant, in large part due to the language design and architecture of course, but also the tooling: fantastic compiler error messages, elm-test, elm-format with VS Code integration. What with using Highcharts, I outgrew Elm Reactor pretty quickly, but poi.js was there for me when I needed more npm and webpack integration. And although I ended up learning mostly from experimentation and from looking around at repos, I was reassured by the fact that the documentation looked solid and the community looked great. I’m coming to Elm with an amateurish knowledge of Haskell and only some React exposure, but I’ve been writing reactive web apps for a long time, so the basic Elm architecture was familiar.
Challenges included wrapping my head around encoders (easy) and decoders (hard); figuring out whether and which CSS/UI framework to use (I made several false starts); learning how to use a forked package (so that I could use my changes to elm-dropbox while I was still preparing PRs and then waiting for their acceptance); finding the intersection between the record update and pattern matching syntax that I expected to work and what actually did; and finding and evaluating visualization libraries. A deeper challenge was figuring out best practices for structuring a larger application. The structure started to get away from me a couple of times, and I had to wrangle it back through ad-hoc refactoring: I think Elm lends itself to beautiful code, but my Elm code is not currently beautiful.
I don’t think there’s much in this list that people don’t know about, and that isn’t likely to happen as time and community size allow. I’m listing these partly in case it’s useful; and partly to assuage my guilt over not (through current lack of time) actually synthesizing any of it into guides, that would make it easier for the next person.
[1] Well, second. My “hello world” program is here.
[2] Someday I’d like to change the visualization from a treemap to a sunburst diagram, and from a commercial JavaScript library to open-source Elm code, but I ran out of time for what was originally supposed to be a one-weekend project.