First weeks in Elm

Elm has gained some serious attention in the Elixir community. At Erlang Factory SF 2016, Chris McCord shared his Phoenix talk with Elm’s creator, Evan Czaplicki. In the talk, Evan explains his inspiration to simplify front-end programming, and reminds the audience of how complicated it is to center an image inside a box.

Elm is now five years old, but can it make centering an image any better? How well can Elm replace HTML, CSS and JavaScript? I decided to find out, and the following are my first impressions of Elm.

Can Elm replace JavaScript?

One thing is for certain: Elm can replace JavaScript. Or, at least some of it. As a general rule of thumb, if it’s built with jQuery (or even React), you can build it with Elm.

Is Elm more productive than jQuery? Well that depends. You would first need to take a serious look at the Elm ecosystem and the complexity of your application. What jQuery libraries do you expect to be using? Some of our favorites are Slick (for responsive carousels) and Select2 (for searchable drop-downs). While ports of some of the more popular libraries are beginning to pop up, not all of our favorites are available in Elm yet.

Now, let’s step past sprinklings of jQuery: can Elm keep up with React and Redux? To be honest, I need more experience to say, but take the following thoughts into consideration. The Elm Architecture is similar to Redux, with Redux actually borrowing ideas from Elm. The functional paradigm and static typing of Elm are awesome. The language forces you to consider and program for all scenarios, making your application more robust. Use Elm and never get another, “undefined is not a function,” error!

Can Elm replace HTML and CSS?

Technically, yes, Elm can replace HTML and CSS, but what does that look like? Consider the following Ajax powered contact form in Elm:

Markup in Elm doesn’t look much different than actual HTML. You may be thinking, “Okay, that’s great. I know HTML, I can do Elm.”

CSS is the same story; have a look:

But is it good that Elm’s version of HTML and CSS look so similar to actual HTML and CSS? I thought Elm was supposed to make it easy to center an image? Why do we still have to Google “css vertical horizontal center” to get the job done? We still need to understand the limitations of HTML and CSS in order to build a front-end in Elm. Elm doesn’t give us anything new here.

Furthermore, I write a lot of Slim and Sass, barely touching traditional HTML and never writing traditional CSS. So far, I haven’t seen anything in Elm that provides the productivity boost that’s currently available in the Sass ecosystem. With Sass comes powerful tools, such as thoughtbot’s Bourbon and Neat. These tools give us cross-browser mix-ins and semantic grids to handle complex responsive layouts.

(To learn more about how we architect our front-ends around Bourbon and Neat, check out our Phoenix Base starter application. We use Phoenix Base to begin all of our new Elixir Phoenix applications. Read more, here.)

So where does Elm shine?

Elm shines as a replacement for JavaScript. You can definitely replace jQuery with Elm. If you are willing, you can even replace your React with Elm. React is pushing to have functional stateless components, which Elm already has (see the new PureComponent in React 15.3.0).

Elm doesn’t have the same number of helpful libraries, but Elm can interface with JavaScript. So, if we can’t find time to port our favorite JavaScript libraries to Elm, we can still use the JavaScript version of the library. Elm also has its own package manager that comes with enforced versioning and hopefully no pictures of Guy Fieri, like those found in Babel’s NPM package.

For HTML, I would still use Elm over Slim. Both Elm and Slim give you the power to add and remove elements and attributes functionally. Elm gives you its rendering engine and the optimizations that come with it. The downside is that you have to write opening and closing brackets, but a properly configured text editor can help with this.

CSS on the other hand is not quite there yet for the majority of the work we do. Currently, I’d recommend writing Sass and then include the compiled CSS into your Elm project with an HTML <link> tag. This will let you leverage the power of Sass and its ecosystem. If you need to edit styles with Elm then do so, but make sure you document and comment your code accordingly.

Have questions? Comments? I’m codeithuman on twitter. Or visit us at Infinite Red.