Posted by Alex Korban on Mon, 09/17/2018 - 03:00

[Note: I wrote this post from the point of view of an Elm developer, however aside from a few Elm related notes, it's really just an introduction to custom elements and Shadow DOM. There isn't any Elm code in this post - it's all JavaScript.]

Quite often, you may need to integrate a complex JavaScript UI component into your Elm application, like a rich text editor, or a calendar, or an image editor, or some kind of visualisation. Such components usually have a lot of state, so you might be con...

Posted by Alex Korban on Wed, 09/12/2018 - 03:00

In Practical Elm, I discuss at length how to convert a complex JSON string containing nested objects, arrays and recursion into Elm values.

But what about the opposite conversion, from Elm values to a JSON string? We often need to make requests to a server which include data in JSON format. For example, you might be working with a database like MongoDB or CouchDB, and you might need to get a JSON document from it, modify it in some way, and then send it back to the server.

In JavaScript, conv...

Posted by Alex Korban on Fri, 09/07/2018 - 03:00

Do you need to deal with some kind of structured data which is not in JSON format and too complex for regular expressions? Or perhaps you have to validate some kind of complex user input? Or maybe you need to report to users what exactly is wrong with the data?
One of the packages in the Elm core library which can help you with such tasks is elm/parser.
First of all, if you're not familiar with parsing, what is it? A parser allows us to take a string as input and to convert it into Elm values a...

Posted by Alex Korban on Tue, 09/04/2018 - 03:00

I'd like to give you a couple of updates on Elm 0.19 in this post.

But first, an announcement about my book, Practical Elm for a Busy Developer: I'm going to publish the final release on 18 September.

If nothing else, this will force me to finish the last round of proofreading and tweaks!

I would have liked to finish the book earlier, but I also wanted to make it maximally useful to you, so it took a bit longer. I ended up adding extra content, and the latest draft is over 200 pages. I've ad...

Posted by Alex Korban on Wed, 08/22/2018 - 03:00

This morning, my Twitter timeline was abuzz with exciting news: Elm 0.19 has been released!

The official announcement focused on the big ticket items: impressive reductions in the size of the generated JavaScript and no less impressive improvements in compilation speed. Those are very good things, but I wanted to provide a more comprehensive list (including some stuff that didn't make it into the release notes either).


Language changes

Nothing major has been added but a few things h...

Posted by Gizra on Thu, 08/09/2018 - 08:00

Ryan, Amitai, and Adam talk about Elm, using it in practice, and how
it both helps and informs our work on projects. In particular, the explicitness
of Elm has impacts from conception, to development, to project management.
Ryan’s comment about the “shape” of Elm code gives us the title, and he makes
a Canadian cultural contribution with the intro song.

Continue reading…

Posted by Alex Korban on Tue, 07/31/2018 - 03:00

Learning a niche language like Elm involves a lot of head scratching over sparse documentation, posting to forums and hoping to get at least one response, looking at other people's undocumented code on GitHub to solve your problems, and generally a lot of stabs in the dark. Right? Well, I'm happy to say that at least for Elm, it's no longer true.
The official introduction to Elm is a useful overview of the language, but what's available beyond that? In 2018, the answer is "quite a lot", as it t...

Posted by Alex Korban on Fri, 07/27/2018 - 03:00

Have you found it painful to split up your application into modules/pages and to setup the messaging structure correctly? It can be tricky to figure out how to handle Cmds and Msgs across files. And it's still not easy to find examples of how to architect larger apps (and even if you find a large code base, it will be tricky to trace what exactly is going on).

But it doesn't have to be mysterious! What you need is the principles to guide your choices about organising code and splitting it up i...

Posted by Brian Hicks on Wed, 07/18/2018 - 22:11

This year at Elm Europe I gave a talk called “Let’s Make Nice Packages!”

It’s about research.

No, wait, come back!

Continue Reading

Posted by Alex Korban on Tue, 07/10/2018 - 03:00

Json.Decode.Pipeline is a popular package for building JSON decoders. It allows you to build decoders using the forward function application operator (|>) to chain field decoders in a convenient, DSL-like way. For example, we could have a decoder like this:

type alias Node =
{ nodeType : String
, relationName : String
, plans : Plans
, schema : String
, startupCost : Float
, totalCost : Float

decodeNode : Decode.Decoder Node
decodeNode =
decode Node

Posted by Alex Korban on Tue, 07/10/2018 - 03:00

I’m working on an intermediate level Elm book called Practical Elm for a Busy Developer. I wanted to post a quick note about it for people who are not on my mailing list, since I've just added a huge new section and the book is 70-80% complete now.

I chose not to include the basics (Elm syntax, the Elm architecture etc.) in the book because I think they are adequately covered by other sources. Instead, it will guide you through the practical tasks of creating applications with Elm: building UI...

Posted by Alex Korban on Fri, 06/22/2018 - 03:00

Suppose you have some JSON that describes map markers:

"name": "Rixos The Palm Dubai",
"lat": 25.1212,
"lon": 55.1535

Using Json.Decode, the decoder for this JSON looks like this:

decodeMarker : Json.Decode.Decoder Marker
decodeMarker =
Json.Decode.map3 Marker
(field "name" Json.Decode.string)
(field "lat" Json.Decode.float)
(field "lon" Json.Decode.float)

If your JSON acquires another field (say, marker color), you need to add one more field decoder ((...

Posted by Alex Korban on Thu, 06/14/2018 - 03:00

This post is adapted from my book, [Practical Elm for Busy Developers.]

As your Elm code base grows, you will want to start taking advantage of modules to split the code into manageable smaller parts.

In Elm, files and modules have a one-to-one correspondence. If you want to break out a piece of code into a separate file, you have to organise it as a module in that file.

The general approach I would suggest is to start your project with a single file (Main.elm), and keep adding to it until y...

Posted by Gizra on Tue, 05/22/2018 - 08:00

This is going to be a simple exercise to create a decoupled site using Drupal 8 as the backend and an Elm app in the frontend. I pursue two goals with this:

  • Evaluate how easy it will be to use Drupal 8 to create a restful backend.
  • Show a little bit how to set up a simple project with Elm.

We will implement a very simple functionality. On the backend, just a feed of blog posts with no authentication. On the frontend, we will have a list of blog posts and a page to visualize each post.

Our first step will be the backend.

Continue reading…

Posted by Alex Korban on Mon, 05/07/2018 - 03:00

New release is out today. Now it allows you to:

Create subsections with their own posts
Create Index.elm pages which turn into index pages, both at the root level and at subsection level. For example, Pages/Index.elm becomes the page at / in contrast to Pages/Projects.elm which becomes /projects. At subsection level, Pages/Elm/Index.elm becomes the page at /elm, while Pages/Elm/Projects.elm becomes /elm/projects.
Use the postprocessing copy step to give pages aliases (eg /projects can be made ...