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
Creating tuneslides in Elm
By Daniel Bachler
Creating tuneslides in Elm
- 1,769