Skip to content

Instantly share code, notes, and snippets.

@jdudek jdudek/
Last active Nov 24, 2015

What would you like to do?
Introduction to Elm @ React.js Meetup, Wrocław, 2015-11-24
The Elm Architecture
Jan Dudek
React.js Meetup
What is Elm?
* purely functional language
* FP for humans
* compiles to JavaScript
* static typing
* functional reactive programming
* The Elm Architecture
Purely functional language
* all data is immutable
* no side effects inside pure functions
* communication with outside world:
FP for humans
* Not like Haskell…
“A monad is just a monoid in the category of endofunctors”
“A catamorphism deconstructs a data structure with an F-algebra for its underlying functor”
Compiles to JavaScript
…but with its own runtime
Static typing
* if your code compiles, it’s very likely to work correctly on the 1st run
* (almost) no runtime exceptions
Static typing: examples
Static typing: benefits
* types like Maybe force us to *always* handle failure
* no way to interact with outside world without using special types
* never see:
Cannot read property 'foo' of undefined
'foo' is not a function
* don’t worry about making typos and other silly mistakes anymore
* refactor with confidence – compiler will find the errors
Functional reactive programming
* signals
for example: mouse position, last pressed key, results of HTTP requests
* the application is also a signal: signal of Html values
* all external input can be modelled as signals
The Elm Architecture
* model – state of the app
* view – pure mapping from model to html
* update – change model when an action happens
The Elm Architecture: composability
* compose components by composing their model, view & update
Example: time-travelling debugger
The Elm Architecture: effects
* all side effects have to be modelled explicitly
* instead of
update : Action -> Model -> Model
we have
update : Action -> Model -> (Model, Effects)
* in other words, all side effects have to be performed *explicitly*
Why should I learn Elm?
* it’s fun
* it’s mind-bending
* it *forces* you to use best practices
* the Elm Architecture is the main inspiration for Redux (a Flux implementation)
Thank you!
numbers : List Int
numbers = [1, 2, 3]
plus : Int -> Int -> Int
plus x y = x + y
-- e.g. `plus 2 3` returns `5`
plus2 : Int -> Int
plus2 = plus 2
-- plus2 3 => 5
type Bool = True | False
type Maybe a = Nothing | Just a
head : List a -> Maybe a
head list =
case list of
[] -> Nothing
(x :: xs) -> Just x
someFun xs =
case head xs of
Just x ->
Nothing ->
type Result a b = Ok a | Error b
-- for example:
parseInt : String -> Result Int ParseError
type alias ParseError = String
-- records
type alias Point = { x : Int, y : Iny }
point = { x = 3, y = 4 }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.