This talk was given at GeeCON (http://2016.geecon.org/) in May 2016. The talk was recorded, but the video is not online as of yet.
**I have added relevant notes overlaid on the slides so you can get the all the information by reading the slides.**
Works at Futurice
Nowadays a frontend expert
Used to do WordPress and Rails
Coded in about 16 languages :)
How I came about Elm?
- Had heard about it and looked at the website
- May last year, had a month between projects, decided to learn FP
- Made a space invaders type game in Elm, liked it
Biggest news site in
Arranging the articles on
frontpage is editorial
Editorial tool to manage
Resounding success, in use right now (24/7)
- Elm in the real world / How Elm made our work better
- #1 on HN -> published on HackerBits Magazine
- Training at Wunderdog
- I’m now probably the only professional Elm trainer in Finland :D
- Elm meetup in Helsinki, Elmsinki
LEAN DEVELOPMENT == CONSTANT REFACTORING
- Actually it’s just constant refactoring
- You have some features done
- You gain new insights
- Do you adapt the feature or scrap it and make a new from scratch?
- Elm made it really easy for us to keep rebuilding the features
- And stay confident the whole app won’t simply crash in some situations
What frontend used to be
Server-side HTML + jQuery
When we were using jQuery
- Simple page with input and and updating title
- Setup event listener for input
- Change the title in place
DONE! Super simple!
Server-side HTML + jQuery
But as soon as multiple things are happening at the same time
- Instant complexity
- Race conditions, overridden changes, etc.
- State was in the DOM, which made things very hard to keep track of
- But still, the possibilities of AJAX and Single Page Apps were too much to pass by
This brought a tidal wave of libraries and frameworks
- All trying to solve the same problem:
How to make building complex apps reasonable
Just the UI
Fast-forward a few years:
- React brought a nice abstraction to these problems
- Functional style
- Easily composable view components
- If you check React’s web page, they state React is “Just the UI” - or the “V” in MVC.
So what about the other parts of the puzzle?
- Redux is the status quo answer. They call it a “predictable state container”
- in short: a single state tree which is updated in a controlled way
- How does that work?
- In Redux, every time the app state is changed, the single big blob of state (or Model)
is what gets updated
- Leads to the fact that each view can be a direct result of the current application state
What does a single update look like then? Updates atomic:
- World frozen upon action/message -> model updates based on the action/message -
> new model -> new view
- AKA. “game loop”
Sometimes we forget the User, but in this graph she fits in nicely
- User can see the view and interact with it
- Her interaction causes an Action in the app
- App produces a new view as output
I thought this talk was
supposed to be about Elm!?
You might be wondering why I haven’t really talked about Elm yet...
- Well, what I showed you in the previous slide is in fact called The Elm Architecture.
- Redux has taken influence from Elm in its patterns.
- Let’s take a look at the differences
- “1JS”, no versions, can only grow
- Originally for scripting
- Later OOP
- Later FP flavors -> React
- Libs for everything (lodash, Immutable.js, RxJS, …)
Elm is Elm
- Designed for apps
- Latest updates have removed confusing parts
- to make the language even easier to learn, and use
- Solid practices built in
- No way to stray
- Elm feels like it has all the necessary parts
- Not just a collection of libraries, but a cohesive whole
Functional Programming at its worst?
Functional Programming at its best
● Small functions that
○ Take parameters
○ Return a response
● Super easy to test
● Nice to refactor
Is your function pure?
- A pure function has no effect on the
world outside it
- It doesn’t have a state of its own
- nor does it need to access any state
How do you know a function is pure in JS?
Is your function pure?
Trick question, you don’t really.
- First one was pure
- Second… not so pure (Real world: e.g.
- Third subtly not pure: mutates the
original user object, maybe
In Elm all functions are pure
- In Elm, all functions are pure
- You can rely on the fact
- (To have an effect on the outside world, you need to return the commands to be
performed, from the function.)
Currying and Partial Application
- One really nice part of functional programming is something called “currying”
- Or rather, the nice part is using partial application.
- Strange names, but a simple concept.
- Sorry, can’t live-code on a PDF slide
Functional Reactive Programming
FRP: how to make your functional web app actually do something
- Small fns that take parameters and return a response and don’t do anything else
- We don’t set anyone’s state, we subscribe to changes and can react
- With Elm, it’s not necessary to dive head-first into the wondrous world of signals
- We can do quite a lot with just simple functions
Newest version of Elm, 0.17
- Just this week (on Tuesday)
- No signals anymore - one less things to learn
- Replaced by a simpler way of declaring subscriptions and commands
That don’t get in the way
- Super dynamic typing
- Great for hacking
- Awful for big projects
TypeScript / Flow
- Static types for JS
- Require quite a bit of setup
- Strong static types
- Awesome for big projects
- Type inference
- Write code - compiler gets the types
- Write type annotations - compiler
checks against them
- Also, state of the art error messages
Elm has guarantees
- Not another “JS in disguise” language (own semantics, no need to know JS)
- No null, no undefined
- In short, Elm doesn’t let you do something that might fail without handling the failure
- I think this merits a slide every time
- With Elm, you get zero runtime exceptions in production.
By Bewareircd - Own work, Public Domain, https://commons.wikimedia.org/w/index.php?
- Standard Elm Architecture components are always the same
- Assume we have a message component
- Can be used as the top level / root component
- Can be included in a message list component just as well,
- which can be included in a messaging app that also has a user choosing
-> All components can be developed in isolation!
- This is part of the language design
- Build Elm and catch errors ahead of time
- Package manager that enforces SemVer
- Development server with automatic rebuilding
- Automatic code beautification
“Go and learn Elm. Seriously.
It is the simplest language I have
ever tried, and the team has put a
crazy lot of effort into making the
developer experience as nice as