Taking my previous post on Elm Architecture under consideration, I’ve generated the following diagram:

Let me explain further…

The elm architecture is explained in the Elm guide, but I’m going to try and break it down in a way in which I understand it so that hopefully anyone reading here can benefit from another perspective.

The guide tells us that an Elm application has the architectural pattern of Model-Update-View but, what does this mean? I see it like this:

I had an html table of categorized items, and I wanted to give each category it’s own Color automatically. So I thought I’d hash the category ID String into an HTML Hexidecimal Color. A search will find this stack overflow post, but I was using elm and thought it would be a fun task to translate this function into a funcitonal style. Here’s how that went:

I’ve really been enjoying my recent experience with the front end (functional) programming language called Elm for the following reasons:

• The Elm Architecture is great for single page apps (SPAs) as the rendered view will update automatically depending on the data model which gets manipulated when events are triggered.

• Immutable variables and Strong typing produces reliable and readable code, although slightly trickier to write (at first).

• The compiler is extremely smart and helpful (and a bit strict), often telling you exactly what went wrong and where to find it. Compiled Elm apps have slogan of “No Runtime Errors” since the Strict Typing allows the compiler to ensure there will not be any.

• It is compiled into javascript and easy to embed into any existing page/project.

Here is my guide to getting started (with vim as my IDE):