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

Made with Slides.com