Shipping a Production Web App in Elm

Presentate

Shipping a
Production Web App
in Elm

@rtfeldman

I just want my code
to stop breaking all the time.
github.com/rtfeldman/dreamwriter

Initial Architecture:

GIMOJ

GIMOJ

Giant Imperative Mess Of JQuery

Simple Made Easy

Rich Hickey

Simple is an objective notion.

— Rich Hickey

Simple

less interleaving of concepts

Easy

nearer to your current skill set

familiarity
grows over time

...but complexity is forever

Simpler Code

is more

maintainable

Stateless Functions

minimize interleaving

functional style

in an imperative language

React.js

...and Flux!
Discipline is

hard

Invariants are

Easy

over 200 languages

compile to JavaScript

deal-breakers

slow compiled JS
poor interop with JS libraries
unlikely to develop a community

js, but less painful

Dart
TypeScript
CoffeeScript

easily talks to js

Elm
PureScript
ClojureScript

coffeescript

clojurescript

purescript

clojurescript

flourishing community
trivial JS interop
side effects and mutation allowed

PureScript

100% immutability, type inference
JS interop: just add type signature
functions cannot have side effects*

Rewrite in PureScript

JS INTEROP: PORTS

Elm/JS relationship is like client/server

Only raw data allowed in and out

Pub/sub communication system

Elm

100% immutability, type inference
JS interop preserves invariants
functions have no side effects

REWRITE IN ELM!

Original Architecture:

GIMOJ

Goal Architecture:

PURELY Functional Elm

Intermediate Architecture:

Functional-STYLE
Coffeescript

(React + Flux)

Anticipate invariants

Use stateless functions wherever possible.

div [class "sidebar"] [
  div [class "sidebar-header"] [
    input [placeholder "search notes",
      onInput searchNotes targetValue] [],

    span [id "new-note-button",
      onClick newNote ()] []
  ],
  div [class "sidebar-body"] [sidebarBody],
  sidebarFooter
]

CoffeeScript/React/Flux Rearchitect

github.com/rtfeldman/dreamwriter-coffee/tree/strangeloop

Elm Rewrite

github.com/rtfeldman/dreamwriter/tree/strangeloop

So how was it?

Ridiculous Performance

Semantic versioning Guaranteed

For every single package.
Automatically enforced.
Yes, really.

Language Usability

-- TYPE MISMATCH ----------------------------------------- 

Not all elements of this list are the same type of value.

I noticed the mismatch in element #4, but go through
and make sure every element is the same type of value.

42| 
43|   [10,9,8,"7"]
44|           ^^^

To be more specific, as I infer all the types, I am seeing a conflict between this type:

Refactoring is THE MOST FUN THING

No Runtime Exceptions

Of all the languages I’ve ever used,

Elm is the simplest.

Elm

stateless functions
immutable data

no mess.

Would I like to ship another web app
in elm?

Liked this talk? Share it!

  •   / 55

Published on , Last updated:

Share this presentation