- If you need to edit styles with Elm then do so, but make sure you document and comment your code .
- Elm has gained some serious attention in the Elixir community.
- For HTML, I would still use Elm over Slim.
Elm has gained some serious attention in the Elixir community. At Erlang Factory SF 2016, Chris McCord shared his Phoenix talk with Elm’s…
@OpenCoconut: First weeks in #Elm, good feedback by @ajrob27 🤔 💡 #reactjs #elixir #programming
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.
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?
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 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.