Elm in Production: Developer Reflections After 34k Lines of Code

This is a common UI pattern that is a bit difficult to achieve in Elm. Something like render props from the React world or <em>transclusion</em> if you have escaped from the angular world.

Render props for Elm

Our <a href="https://www.mmhaskell.com/haskell-web" target="_blank">Haskell Web Series</a> covers a lot of cool libraries you can use when making a web app. But one thing we haven’t covered yet on this blog is using Haskell for front-end web development. There are many libraries and frameworks out there. <a href="https://www.yesodweb.com/" target="_blank">Yesod</a> and <a href="http://snapframework.com/" target="_blank">Snap</a> come to mind. Another option is <a href="https://github.com/reflex-frp/reflex" target="_blank">Reflex FRP</a> which uses GHCJS under the hood.

Elm: More Functional Frontend!

This is a post about what I worked on this month, why I was motivated to work on it, and the lessons that I learned. As the title says, the project is a clone of <a href="https://www.typeform.com/" target="_blank">Typeform</a>, which is a web application for building and sharing nice looking questionnaires. Here is a <a href="https://dstreet26.github.io/elm-phoenix-typeform-clone/" target="_blank">demo</a>. Here is the <a href="https://github.com/dstreet26/elm-phoenix-typeform-clone" target="_blank">source</a>. Also here is a gif:

Creating a clone of Typeform with Elm and Tachyons

Two years ago, I was asked by a company I was working for to learn <a href="http://elm-lang.org/" target="_blank">Elm</a> — a functional front-end programming language. I found the syntax strange and the functional programming paradigm difficult. We ended up moving to other front-end frameworks and eventually all but forgot about Elm.

Elm Reflections

Most language tutorials start with language features: here are numbers, here are strings, in a way ever so slightly different from other languages. Not this one. I’m hunting the big game.

Elm Semantics for JavaScript Developers

Disclosure — I don’t have all the answers to the problems I am posing here — as ever, there is more than one way!

The importance of state ownership in Elm

In this part of the article we’re going to write our own library using <a href="http://github.com/wende/elmchemy" target="_blank">Elmchemy</a>.&nbsp;<br>If you haven’t read <a href="https://medium.com/@krzysztof.wende/elmchemy-write-type-safe-elixir-code-with-elms-syntax-part-1-introduction-8968b76d721d" target="_blank">part one</a> yet, it’s strongly advised. It covers the basics of starting a new and <a href="https://hackernoon.com/tagged/integrating" target="_blank">integrating</a> an existing project with <a href="https://hackernoon.com/tagged/elmchemy" target="_blank">Elmchemy</a> compiler.

Elmchemy — Write type-safe Elixir code with Elm’s syntax — part 2 — Our own RPG character module

Good friend of mine said I should learn Elm.

Should I Learn Elm If I Am a JavaScript Developer?

A while ago <a href="https://www.thoughtworks.com/radar" target="_blank">ThoughtWorks</a> released an <a href="https://github.com/thoughtworks/build-your-own-radar" target="_blank">open source repository</a> for anyone to host their own personal <a href="https://hackernoon.com/tagged/technology" target="_blank">technology</a> radar.

Rewriting the ThoughtWorks Tech Radar in Elm

We all love Elixir. It’s expressive, it’s extremely readable and - first and foremost - It runs on BEAM — an incredible virtual machine that turns concurrency into something as natural and expected as NullPointerExceptions in Java 7.

Elchemy - Write type-safe Elixir code with Elm's syntax - part 1 - Introduction

On iterating and decoding sum types in Elm

Seems I haven’t posted anything for a while, <a href="http://shamansir.github.io/blog/" target="_blank">since Sep 2014</a> to be precise—even though I had nice <a href="http://shamansir.github.io/rpd/" target="_blank">topics</a> to discuss. So here’s a new try to get back to you with writing nerdy texts. Especially, considering the fact it gets more popular and fancy every day.

Modern Binary Reverse-Engineering with node.js, for Elm

Lots of things are very nice in Elm but occasionally you find a gap. For me, currency formatting was such a gap. It’s non-trivial enough to be annoying if you need to deal with different locales and different currencies. Javascript has a perfect api for this in the form of the <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString" target="_blank">toLocaleString </a>function.

Creating an Elm Native module for currency formatting

In <a href="https://hackernoon.com/tagged/javascript" target="_blank">Javascript</a> there are a handful of ways to deal with situations that don’t follow the happy path.

Error Handling in Elm

<a href="https://hackernoon.com/tagged/elm" target="_blank">Elm</a> ports is one of the main ways to interact with <a href="https://hackernoon.com/tagged/javascript" target="_blank">JavaScript</a>. However I feel like I need to tell you that if you can get away with it, you should just use flags. Flags pass in some initial value to Elm to start with and is the easiest way no doubt. However if you want more back and forth communication ports is the way.

How Elm Ports Work, With a Picture (just one)

<a href="https://hackernoon.com/tagged/learning" target="_blank">Learning</a> a new <a href="https://hackernoon.com/tagged/programming" target="_blank">programming</a> language seems to follow the same steps every time: install, Hello World, arithmetic, a few cool features, and then you’re own your own. While the guides may offer a few buzzwords at the very beginning of your journey, it’s not easy to see the forest for the trees and realize what this new language does that makes it unique, worth knowing, and worth using.

What does it mean to use Elm?

This is a follow up post to <a href="https://medium.com/@julianjelfs_61852/replacing-the-angular-1-router-with-elm-d71753e74e32#.2fd4y8xip" target="_blank">part one</a>.

Replacing the angular 1 router with Elm — Part 2

If you are trying to migrate away from angular 1 (and you aren’t interested in angular 2) it seems that you have two options: you can either try to replace individual components and eat angular from the inside out, or you can try to eat it from the outside in by replacing the router first.

Replacing the angular 1 router with Elm — Part 1

When I started becoming more of an intermediate <a href="https://hackernoon.com/tagged/elm" target="_blank">Elm</a> programmer I thirsted for more practical and production-like examples of Elm. There aren’t many out there.

A Sufficiently Complex Elm Application

It all started when <a href="https://medium.com/@cscalfani" data-anchor-type="2" data-user-id="85310ec460ee" data-action-value="85310ec460ee" data-action="show-user-card" data-action-type="hover" target="_blank">Charles Scalfani</a> published a <a href="https://medium.com/@cscalfani/so-you-want-to-be-a-functional-programmer-part-1-1f15e387e536?source=linkShare-9f208b75494b-1478909872" target="_blank">series of articles about functional programming</a>. After completing his little series, I really wanted to try out <a href="http://elm-lang.org" target="_blank">Elm</a>, which he referred to a lot in these articles.

I tried Elm, but I don’t get the hype around it.

I am always dissatisfied with the state of front end development. I did a fairly deep dive into ClojureScript and found it nice initially but ultimately lacking in some key areas. I’ve also done my stint in JQuery and Angular land (and tried for a few hours trying to get Ember to even work, but decided that it was enough that it was so nasty in the beginning). Those are clearly much worse than ClojureScript + reagent.

A small dive into, and rejection of, Elm

I started playing with Elm around January 1, 2016. This was largely brought about by <a href="https://www.youtube.com/watch?v=X25xOhntr6s" target="_blank">this keynote</a> by <a href="http://twitter.com/jessitron" target="_blank">Jessica Kerr</a> at 2015’s ElixirConf. It took me a few more months to actually dig in, finally being reminded of my resolution when I saw some video by <a href="http://twitter.com/rtfeldman" target="_blank">Richard Feldman</a> (I think?) and decided to take the plunge.

Why Elm is Going to Change the World

I have been playing with Elm for a few months now and have gotten to the point where I am starting to feel like I kn0w my way around the language and how to get things done. This has been a very nice feeling. However, one thing that was gnawing at me this whole time was how a component and an overall application should be sized and set up. While this might seem like a trivial detail, and is something that is easily overlooked, I have found this small detail can have profound impacts on the outcome of a project maintained by one or a few people over a long period or built and maintained by a larger team in a short period.

Some thoughts on Elm Development

elm is an all in one data tool for food & drink brands. By using elm, brands can automate their sales data so that they can spend more time focused on revenue growth. Our data solution works with all major retailers in the UK and with e-commerce platforms such as Shopify and Amazon.

ELM

getelm.co

1,001 - 5,000 emps

Since 2020

Worth 72.4B

elm's stories on HackerNoon

Elm in Production: Developer Reflections After 34k Lines of Code

Render props for Elm

Elm: More Functional Frontend!

Creating a clone of Typeform with Elm and Tachyons

Elm Reflections

Elm Semantics for JavaScript Developers

The importance of state ownership in Elm

Elmchemy — Write type-safe Elixir code with Elm’s syntax — part 2 — Our own RPG character module

Should I Learn Elm If I Am a JavaScript Developer?

Rewriting the ThoughtWorks Tech Radar in Elm

Elchemy - Write type-safe Elixir code with Elm's syntax - part 1 - Introduction

On iterating and decoding sum types in Elm

Modern Binary Reverse-Engineering with node.js, for Elm

Creating an Elm Native module for currency formatting

Error Handling in Elm

How Elm Ports Work, With a Picture (just one)

What does it mean to use Elm?

Replacing the angular 1 router with Elm — Part 2

Replacing the angular 1 router with Elm — Part 1

A Sufficiently Complex Elm Application

I tried Elm, but I don’t get the hype around it.

A small dive into, and rejection of, Elm

Why Elm is Going to Change the World

Some thoughts on Elm Development

Representing this company? Click here to claim and customize this page!

Reviews About elm

elm WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps