I was fortunate to book a seat to the Elm Tutorial at the CodeMesh conference in London with Elm author Evan Czaplicki at the very last minute. Fortunate because there was space left but also because if I hadn’t left it to the last responsible moment then I would likely have booked a flight in from Amsterdam instead of the train through the channel tunnel. As it happened, thick fog had grounded most planes at Schiphol on Monday morning so the only downside to the train was that I was forced to purchase a seat in first class.
I have never been quite as excited about a programming language as I am about Elm. It’s been only two weeks since I first set eyes on it, yet I am completely and utterly sold. The last time I had a comparable experience was when Ruby with Rails convinced me, by their elegance and fitness for purpose, that I should in fact learn to program and make a career out of it.
As part of our adoption of Elm in production, Gizra devs are learning and practicing their Elm skills.
After they are done going over the existing videos/tutorials, we let them get their hands dirty. elm-hedley was created just for that - to simulate a simple yet typical web app with login, RESTful, etc.
Here's the existing app. As you see each event appears as a clickable link.
The challenge is to add a counter next to each event label that increments when clicked. When you refresh the page (F5) it shouldn't remember the previous clicks and should start back at 0.
In short, it should look like this (notice the bottom left list):
Go ahead, fork the repo and try for yourself. And don't peek below, as it has the answer!
To ensure I have an editor I’m familiar with and to get me started a little, I figured I’d create an Elm language plugin
for Light Table. However lately I’ve been a little busy helping out getting https://github.com/LightTable/LightTable version 0.8
released. Last weekend we got an 0.8 alpha out. I needed some of the features from Electron. So now with Light Table using
Electron under the hoods I could finally complete an intial plugin release. It’s rough, but it’s an ok start I suppose !
You can find the plugin repo on github https://github.com/rundis/elm-light
Tweet Series: Algae Pythagoras Tree Cantor Dust Koch Curve Sierpinski Triangle Dragon Curve Fractal Plant (this) Last time out we implemented the Dragon Curve example from the L-System wikipedia page. Now, we’re finally at the end of our journey, let’s see how we can implement the Fractal Plant example in Elm. Example 7 :
Tweet Series: Algae Pythagoras Tree Cantor Dust Koch Curve Sierpinski Triangle Dragon Curve (this) Fractal Plant Last time out we implemented the Sierpinski Triangle example from the L-System wikipedia page. Now, let’s continue our journey and see how we can implement the (rather impressive sounding) Dragon Curve example in Elm. Example 6 : Dragon
In my last post I was giving a high level overview of why we were looking at Elm in Gizra. Since that post, we've almost completed the demo app, and we've changed our status from "Looking at Elm" to "Choosing Elm".
The reason? In short - I believe it will save us money.
(Oh, and it's fun)
Tweet Series: Algae Pythagoras Tree Cantor Dust Koch Curve Sierpinski Triangle (this) Dragon Curve Fractal Plant Last time out we implemented the Koch Curve example from the L-System wikipedia page. Now, let’s continue our journey and see how we can implement the Sierpinski Triangle example in Elm. Example 5 : Sierpinski Triangle First, let’s
Tweet Series: Algae Pythagoras Tree Cantor Dust Koch Curve (this) Sierpinski Triangle Dragon Curve Fractal Plant Last time out we implemented the Cantor Dust example from the L-System wikipedia page. Now, let’s continue our journey and see how we can implement the Koch Curve example in Elm. Example 4 : Koch Curve Once again,
Tweet Series: Algae Pythagoras Tree Cantor Dust (this) Koch Curve Sierpinski Triangle Dragon Curve Fractal Plant Last time out we implemented the Pythagoras Tree example from the L-System wikipedia page. Now, let’s continue our journey and see how we can implement the Cantor Dust example in Elm. Example 3 : Cantor Dust First, let’s define
Part of my job is to get my hands dirty with technologies I stumble upon. I've decided to have a go at React. Well, one thing led to the other and it seems I went down the client side rabbit hole. I'd like to share with you my path - watch out though, it's a slippery slope.
"Hello World" in Elm
It all started with this Thinking Flux video which explains the problems Facebook faced in its front-end and the new application architecture they are now using.
Since the Flux concept was out, different libraries were written implementing it, but in my view it seems that Redux is the winner in terms of simplicity, popularity, docs and community. I really recommend going over it - at least the intro and basics. You might be tempted to actually learn a bit of React (tutorial) to follow the examples more easily.
Then I saw Redux was crediting Elm for some of its inspiration, so I decided to give it a quick look. I was immediately blown away by Elm. The syntax is weird (unless you know Haskell), it has a crazy learning curve, but a lot of it makes so much sense.
The following recording is a presentation I first gave internally for Gizra devs, then as a BoF in DrupalCon Barcelona, and finally recorded to share it with everyone.
My goal is to get more people excited about Elm so the community and contributions grows. I feel it is now very much like Drupal about 10 years ago - a small community, far from being mainstream, but with a lot of potential.
Maybe if we'll draw from Drupal's experience in building and cultivating a community we'll be able to bring this awesome tool closer to the mainstream.
In this post we'll get syntax highlighting working and meet all the elm binaries.
We start this article from where we left in How to setup your local development environment for Elm from source, with a newly installed Elm environment we want to take for a spin.
A relatively concise guide to getting an easily upgradable Elm environment running on Mac.
At the end of this guide you'll have an environment that:
can build from source
is upgradable using only the command line
can keep multiple versions of Elm around
The easiest way to try out Elm
Elm is a functional reactive language that compiles to something a web browser can understand. It forces a JS programmer to readjust their thinking, as there are no mutable variables and types are strong. All interaction is modeled through "signals", which are essentially streams of values changing over time. This is why Elm makes a perfect fit for learning FRP. In case you are the least bit curious, please take a look at the article I wrote: Learning FP the hard way: Experiences on the Elm language
Hats off to the Futurice Spice Program for making this learning experience possible!
Cover image: Chinese Elm, 1988-2007 on WikiMedia Commons