[036.5] Elm Weekly Drip #36 and Exercise: Remedy Firebase Synchronization

3D Geometry, Production Success Stories, View Maturity Upgrades, and an exercise to make our Firebase collaboration a bit nicer.

Subscribe now

We just added support for Firebase to our SVG Editor. At present, it's great for storage but pretty buggy for collaboration. For this week's exercise, we'll reduce the number of actions that cause us to synchronize our model's current state, since that will solve the most egregious issues.

Before we get to the exercise, let's check out what's happening around the community.


An Elm package for working with 2D and 3D geometry. It provides a wide variety of geometric data types such as points, vectors, polygons and coordinate frames, along with functions for transforming and combining them in many different ways.

I just learned about this package from the Elm subreddit. It provides an extremely well-thought-out framework for working with geometry in 2D and 3D. There's an in-progress guide for it that is an interesting read. Finally, and very relevant given the time we've spent on SVG, there's a package for rendering the 2D types as SVG.

[ h/t Ian Mackenzie ]

Using Elm in Production at Pivotal Tracker

Working with Elm was downright enjoyable. The tools make it so easy and frictionless to develop, and the compiler makes refactoring a cinch.

An experience report from the fine folks at Pivotal Tracker on their first foray introducing Elm into the company. The good news?

To sum it up, our manager has mandated that all new code be written in Elm.

[ h/t @pivotaltracker ]

Upgrade your Elm Views with Selectors

A strategy inspired by reactjs/reselect

A great article discussing ways to deal with views that do too much. This is a problem I struggle with and I'm interested in trying this pattern out, but haven't made the leap yet. There's also part 2 on using Html.Lazy.

[ h/t @ckoster22 ]

Easy VR with Elm and A-Frame

Bringing the declarative WebVR framework A-Frame to Elm.

A great introductory post walking through building a simple app using halfzebra/elm-aframe, which is an Elm package to make it easy to use Mozilla VR's A-Frame from Elm.

[ h/t @tilman_avid and @eduardkyvenko ]

Vanilla JavaScript inspired by Elm

Sometimes you might find yourself forced into vanilla JavaScript, but still want to write Elm-style apps. In those cases, perhaps these could be useful.


Functional reactive UI library

A library that is, in their own words, pretty much a port of Elm. From the fine folks at Mozilla. They're also playing with building an experimental Servo browser built in HTML using this library, which looks amazing.

[ h/t @mozilla ]


1kb JavaScript library for building modern UI applications.

Hyperapp looks like another nice contender for the Vanilla JavaScript UI-building world. It's unbelievably small (1kb!) and will feel very familiar to any Elmo.

[ h/t @jbucaran and @codervandal ]


We added Firebase support to our app but the collaboration is disappointing. The biggest cause for these frustrations is that we're persisting the model any time the mouse moves because we tacked on andSendShapes to MouseSvgMove. To remedy this, modify the app to only persist the shapes in the event that we're in the process of dragging a shape.

This won't solve every problem with collaboration, but it will at least minimize the amount that collaborators are stepping on one another. In order to more completely solve the problem, we'd have to make the Firebase integration a bit more complex, updating specific keys. I'm just going to solve the basic problem described above, but if you wanted a real challenge you could work through that.

See you soon!

Published on 02.07.2017