I saw this tweet on my time­line the other day..

image

which reminded me again to look at Elm and I’ve spend the last week or so get­ting myself immersed with this won­der­ful lit­tle lan­guage built around the idea of func­tional reac­tive pro­gram­ming.

My first impres­sions of Elm so far have been very pos­i­tive, there are some gen­uinely inter­est­ing things here, such as its Record and Sig­nal types and its inter­ac­tive debug­ger which is heav­ily influ­enced by Bret Victor’s work.

 

The Basics

Syn­tac­ti­cally, Elm looks like many func­tional lan­guage (and Python) out there – no curly brack­ets, white­space mat­ters, etc. – which is per­haps unsur­pris­ing as there’s seems to be a strong Haskell influ­ence here.

 

Tuples

Tuples are enclosed in paren­the­ses and sep­a­rated by comma (,) – e.g. ( 4, “3” ) is a tuple of the inte­ger 4 and the string “3”.

You can also use the helper func­tions (,) („) („,) … etc. to con­struct tuples with the required num­ber of items.

image

 

Records

At first glance Elm’s record type looks very sim­i­lar to F#’s record type:

  • both are light­weight labelled data structure
  • both sup­port pat­tern matching
  • fields are immutable (but F# sup­ports optional mutability)
  • both sup­port copy-and-update seman­tics to cre­ate a new record based on an exist­ing record
  • both sup­port poly­mor­phic func­tions (though in F# it’s more idiomatic to use mem­bers instead)

How­ever, upon closer inspec­tion you find some inter­est­ing addi­tions with Elm, most notably:

  • exten­si­bil­ity – besides the copy-and-update seman­tic, you can also add and remove fields at the same time
  • records uses struc­tural typ­ing – a func­tion can accept records of any kind so long they have the required fields (e.g. whoAreYou { name } = … takes any record that has a name field)
  • record type aliases can be com­posed together

 

Have a look at my last post to see a more detailed run-down of the sim­i­lar­i­ties and dif­fer­ences between records in F# and Elm.

 

Alge­braic Data Structure

Elm sup­ports alge­braic data struc­tures (i.e. F# dis­crim­i­nated unions), there are a num­ber of built-in alge­braic types such as the Maybe type. You can also define your own alge­braic types using the data keyword.

image

 

F# Pipes

It’s also nice to see F#’s pipes make an appear­ance in Elm and that Elm’s cre­ators are recep­tive to adopt­ing F#’s func­tional com­po­si­tion oper­a­tors « and » too, if adopted I really think they can make code that com­poses func­tions more read­able and intuitive.

image

 

Pat­tern Matching

Elm sup­ports the case..of syn­tax (another exam­ple of its Haskell her­itage) for pat­tern match­ing against vari­ables as you can see from the snip­pet above.

Elm doesn’t have when guards in its pat­tern match­ing syn­tax yet, but you can work around this by using the multi-way if expres­sions for now, which actu­ally reads like pat­tern match clauses rather than the tra­di­tional if-elif-elif-else.

image

Elm also sup­ports pat­tern match­ing against tuples, records and lists, etc. in much the same way as you’ve seen in F# or Haskell, for instance, you can pat­tern match against a record using the { fieldName1, fieldName2, … } syntax:

image

 

Anony­mous Functions

Elm uses the same syn­tax as Haskell to define anony­mous functions.

image

 

Cur­ry­ing

As you’d expect, Elm sup­ports currying.

image

The stan­dard library also has two helper func­tions – curry and uncurry – to help you change how argu­ments are passed to a func­tion, which comes in handy sometimes.

  • curry : ( ( a, b ) –> c ) –> a –> b –> c
  • uncurry : ( a –> b –> c ) –> ( a, b ) –> c

 

let..in syn­tax

Like many other func­tional lan­guages (Haskell, F#, etc.), in Elm the last expres­sion of a func­tion pro­vides its return value and whilst F# has moved away from the let..in syn­tax from its own OCaml roots, Elm still uses the let..in syntax.

You can spec­ify mul­ti­ple vari­ables within one let clause, e.g.

image

And you can also define inner func­tions in the same way too:

image

 

JS Interop

Interop with Javascript is pro­vided via ports, which I haven’t played around with much, but you can read all about it here.

 

The Good stuff

In Elm, much of what you do revolves around Sig­nals (which is Elm’s equiv­a­lent of Rx’s observ­ables) and the lan­guage (along with its stan­dard libraries) gives you a very dif­fer­ent way of think­ing about GUI devel­op­ment to the tra­di­tional DOM based approaches. If you are famil­iar with Rx (or RxJs, the Javascript port of the Rx API) or func­tional reac­tive pro­gram­ming* in gen­eral then you should feel right at home here.

Elm’s stan­dard library comes with a num­ber of built-in sig­nals – mouse posi­tions, clicks, win­dow dimen­sions, timer events, etc. From these built-in sig­nals you can then com­pose and map over them, the built-in Sig­nal library pro­vides quite a num­ber of func­tions to make life easy there.

 

Lift func­tions

You can use the lift func­tions (lift, lift2, lift3, … lift8) to apply a nor­mal func­tion over sig­nals. In Rx you’d do this with Observable.Select, but the way you can com­bine sig­nals together using the short­hand oper­a­tors <~ and ~ is really quite elegant.

For instance, you can pass the sig­nals of your mouse posi­tion and the coor­di­nate of your clicks into a func­tion like this:

And here is what the code above generates:

Pretty sim­ple, huh?

 

Merging/combining sig­nals

You can use the merge, merges or com­bine func­tions from the Sig­nal stan­dard library to con­cate­nate mul­ti­ple sig­nals of the same type into one uni­fied sig­nal. This is equiv­a­lent to Rx’s Observable.Concat operation.

This comes handy when you have mul­ti­ple sources of inputs of the same kind, or when you use alge­braic data type to help unify input sig­nals of dif­fer­ent kinds.

Take the Mis­sile Com­mand game below for instance, the game loop fol­lows the sim­ple pat­tern of: action –> state tran­si­tion –> redraw updated state. How­ever, there are three dif­fer­ent kinds of input that would trig­ger state transition:

  1. frames – to draw the game at 50 FRS means every 20ms we need to move the mis­sile along a cer­tain dis­tance along its path as dic­tated by its speed
  2. player actions – when the player clicks on the screen we should launch a new mis­sile towards the coor­di­nate where the user clicked
  3. enemy mis­siles – every x sec­onds we need to launch a ran­dom num­ber of enemy missiles

Each type of input has a dif­fer­ent set of para­me­ters asso­ci­ated with them, uni­fied by a sin­gle alge­braic data type.

Sig­nals rep­re­sent­ing each of these input types can then be merged together with the merge func­tion and passed into the main game tran­si­tion logic.

 

In addi­tion, the Sig­nal library also pro­vides a set of use­ful func­tions for com­pos­ing sig­nals, includ­ing foldp, count, keepIf, dropIf, keep­When, and sam­pleOn. Again, all of these can be mapped directly to Rx exten­sion methods.

In fact, all the capa­bil­i­ties of work­ing with sig­nals I have seen in Elm can be found in Rx and by exten­sion, in C#, F#, Java, Javascript and Dart thanks to the wide­spread reach of the Rx API and the effort by the devel­oper com­mu­nity to adopt it.

How­ever, because Rx exist as a library in those lan­guages, it doesn’t force you to fun­da­men­tally change the way you view UI devel­op­ment because you always have a way out when­ever things get uncom­fort­able (which should be often, if you’re chal­leng­ing your­self to go out­side your com­fort zone). In Elm, how­ever, there’s no other way, so you have to think ‘reac­tive’ all the way through. From a prac­ti­cal point of view this might sound restric­tive, but there’s really no bet­ter way to learn the func­tional reac­tive par­a­digm than to fully immerse and com­mit your­self to it.

 

The Debug­ger

If you have been fol­low­ing Bret Vic­tor’s work in recent years (which amongst oth­ers have inspired projects such as Light­Table, Khan academy’s UI design as well as Elm’s online debug­ger), you might have had to repeat­edly scrape pieces of your brain from the walls thanks to Bret’s super awe­some demos.

I rec­om­mend giv­ing this page a good read to see how it works and how Elm makes it possible.

Here’s a short demo video to show its time-travelling capa­bil­i­ties in action.

 

The Not So Good stuff

  • The lan­guage is still very young so expect lots of break­ing changes and bro­ken exam­ples from around the inter­net as it evolves. Per­son­ally, I think this is a good thing, it’s bet­ter for the lan­guage to learn and evolve away from its early mis­takes than to for­ever live with the sins of its youth.
  • IDE tool­ing is lack­ing. Whilst the online edi­tor and debug­ger can pro­vide hints (i.e. func­tion sig­na­tures and a link to the online doc for the func­tion, see below) for func­tions and types from the stan­dard libraries, they don’t work on user-defined func­tions and types. You can also just use any text edi­tor such as Notepad++ or Sub­lime Text that gives you syn­tax high­light­ing (Haskell high­light­ing usu­ally works pretty well) but I usu­ally look for much more sup­port from my devel­op­ment envi­ron­ment and see­ing Bret Victor’s work only raises my expec­ta­tions and Elm’s online debug­ger is a decent first step.

image

  • If you’re devel­op­ing with the online debug­ger then be sure to save your changes reg­u­larly, to a source con­trolled file prefer­ably. As the debug­ger exe­cutes your code it col­lects events along the way, which is how it enables this awe­some time-travelling capa­bil­ity to go back in time to see the effect of your changes as you make them. With the Auto-Update option turned on you get to see your changes reflected right away which is really nice, the down­side being that if it has col­lected a fair num­ber of events it can hang/crash the browser and you lose your unsaved changes along the way. Hope­fully that’s a painful les­son you won’t have to learn the hard way.
  • There are a fair amount of guided tuto­ri­als for the basic things, but once you start to get into the intermediate/advanced top­ics you’re mostly left to work out how to do things based on avail­able exam­ples that are barely com­mented and those auto-generated docs for libraries really don’t do the read­ers jus­tice. This is com­mon for new lan­guages, I have had the same expe­ri­ence with Dart too despite Dart being much more mature and have a big­ger com­mu­nity around it (and not to men­tion hav­ing a com­pany like Google behind it).

 

Mis­sile Command

Finally, to aid my learn­ing process, I put together a sim­ple imple­men­ta­tion of “Mis­sile Com­mand” which was fun to do and helped give me a sense of direc­tion when try­ing to fig­ure out what I can and can­not do in Elm.

I have writ­ten this in a way that’s per­haps more ver­bose than the offi­cial exam­ples, with lots of type anno­ta­tions to make up for the lack of sup­port from the online editor/debugger. Even so, the source code came in at less than 250 lines, which is really encour­ag­ing, imag­ine the level of pro­duc­tiv­ity a more com­pe­tent Elm devel­oper is able to achieve!

The source code is avail­able on Github here, you can copy the con­tent of main.elm into the Elm online edi­tor to try it out.

 

 

* on the topic of reac­tive pro­gram­ming, I came across this talk by Erik Mei­jer, the father of Rx, titled Dual­ity and the end of Reac­tive and it’s well worth a watch. With­out going into too much detail and rob­bing you of the joy of mak­ing your own dis­cov­er­ies and con­clu­sions from it, my key take­away from the talk came from Erik’s clos­ing remark:

Reac­tive is Dead, long live com­pos­ing side effects.

Now, I don’t think Erik is telling us to stop using Rx or the reac­tive par­a­digm that he has done so much to pop­u­lar­ize, but to shift our focus from the act of doing them (com­pos­ing signals/observables and then writ­ing code that reacts to them) to the why – which is to help us ratio­nal­ize side effects and com­pose them, and mak­ing the implicit rela­tion­ships between side effects explicit.

 

Related Read­ing

Erik Mei­jer – dual­ity and the end of reac­tive <- (must watch)

Elm’s time-travelling debugger

Elm’s sig­nals

Elm’s exten­si­ble records

Aca­d­e­mic paper – Exten­si­ble records with scoped labels

Mis­sile Com­mand (demo)

Mis­sile Com­mand (source code)

Con­trast­ing F# and Elm’s record types

F# – record types vs classes

Dart – emu­lat­ing alge­braic data type

Udi Dahan – Mak­ing roles explicit

Bret Vic­tor – Invent­ing on Principle

Bret Vic­tor – Stop Draw­ing Dead Fish

Bret Vic­tor – Media for Think­ing the Unthinkable

Share