creating tuneslides

Adventures of writing a photo slideshow editor in Elm

by Daniel Bachler

@danyx23 on twitter

Let's dive right in

demo

A little bit of history

Spring 2015

• Researched modern web frameworks: React, Cycle, Elm
• Thought Elm was too weird :)
• Went with React + Redux + Immutable JS

Autumn 2015

• Prototype in React working, but JS was a pain, especially for refactoring. Thought about adding Typescript.
• Decided to rewrite in Elm in late November

Goals

• Create an SPA style editor and separate viewer
• Editor should feel close to a native desktop video editor (lots of Drag and Drop, keyboard shortcuts, trimming tools, ...)
• User auth via OAuth
• Upload of assets to S3
• Simple REST api to manage slideshows etc

Pain points with JS prototype

• Refactoring is dangerous (hard to be sure that you really changed all uses), so you avoid it
• Typos can crash the application
• The syntax is cluttered (esp. with Immutable.JS)
• You need to write a lot of tests for boring properties

conclusion of working with js

In my opinion, overall development speed in non-trivial JS apps is low

After the initial cycle, refactorings, writing and adapting tests and debugging kill any development speed advantage you might initially have (compared to a statically typed  language)

rewriting in elm

• When using React with Redux (and ImmtableJS), switching to Elm is a very straightforward transition
• I was using ES2015 and transpiling with Babel, so was compiling already anyhow
• Added type safety, non-nullability etc were all fantastic
• But: If you need functionality that is not included in the Elm libraries (FileReader, Audio API) you get slowed down significantly

Pain points in Elm

• Significant parts of modern browser APIs not yet wrapped (e.g. Audio API, Files/Blobs, Filereader, local storage) - have to work around with custom "native modules" or native JS that is triggered via ports
• Writing Json Encoders/Decoders by hand has a steep learning curve at first and is then tedious (Compiler could automate this but doesn't)
• Drag and Drop felt nicer with the React abstractions

conclusion

• Elm is a great language + ecosystem
• Using modern browser APIs that are not yet wrapped is a bit cumbersome (will hopefully change with the upcoming 0.17)
• Development speed is pretty constant (no slowdown later on in the project as in JS)
• Killer feature: Elm enables Rapid Prototyping with production quality code at every step

Thank you!

by Daniel Bachler / @danyx23