Elixir and elm - the perfect couple

Elixir and Elm – the perfect couple
Tomasz Kowal

What is this talk about?
● Programming web applications
● Patterns applicable not only in Elm and Elixir
– single source of truth
– one directional flows
● How programming languages shape programs?
● Why is it a good idea to use more than one
programming language in your app?

Why new programming languages?
● functional vs imperative
● languages are defined by what is easy to do
● but sometimes even more by what is HARD
++++++++[>++++[>++>+++>++
+>+<<<<-]>+>+>->>+[<]<-]>>.>---.+++++++..++
+.>>.<-.<.+++.------.--------.>>+.>++.

Erlang – made for fault tolerance
● Easy concurrency
● Easy distribution
● Easy debugging
● Easy messaging
● Impossible sharing memory
● Impossible reassigning variables
● Relatively hard string manipulation

Elixir – made for web
● Metaprogramming
● Strings done well
● Inherits all good and bad sides of Erlang

Elm – made for browser
● Static typing
● Almost no runtime exceptions
● Very easy to follow programming model

I hate language comparisons
The Blub paradox

Elixir and elm - the perfect couple

"it is, all other things being equal, a mistake to
program in anything but the most powerful
[programming language]”
- Paul Graham

"it is, all other things being equal, a mistake to
program in anything but the most suitable
language for the problem domain”
- Tomasz Kowal

- interactive frontend
- available backend

Objective measure
„number of things, you need to keep in mind to
understand given code fragment”
„programmers memory consumption”
PMC

Functional languge
def function(arg1, arg2) do
value = some_computations(arg1)
another_value = some_computations(arg2)
value + another_value
end

Functional languge
value = some_computations(arg1)
another_value = some_computations(arg2)
value + another_value
end
PMC = 4

OO Language
def method(arg1, arg2) do
value = some_computation(arg1 + property1)
property2 = some_computation(arg2)
value + property2
end

OO Language
property1
property2
def method(arg1, arg2) do
value = some_computation(arg1 + property1)
property2 = some_computation(arg2)
value + property2
end

Building frontend
"modifying document object model by reacting to
events from user and server"

Frontend programming
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});

Everything that is syntactically legal that the
compiler will accept will eventually wind up in your
codebase.
- John Carmack

Signals
tHTML
HTML’
HTML’’

Signals
tHTML
HTML’
HTML’’
User input
Server event
User input’

Signals
tHTML
HTML’
HTML’’
User input
Server event
User input’
model
model’
model
model’’
update

Signals
tHTML
HTML’
HTML’’
User input
Server event
User input’
model
model’
model
model’’
update view

Signals
tHTML
HTML’
HTML’’
User input
Server event
User input’
model
model’
model
model’’
update view
Pure functions!

Single data structure holds entire application
state.

Backend programming - netsplit

Actors
msg
actor actor’
(queue msg)
t

Actors
msg
msg’
actor actor’
process msg’
(queue msg)
other msg process other msg
t

Actors
msg
msg’
actor
other msg’
actor’
process msg’
process msg
(queue msg)
other msg process other msg
t
(/dev/null)

Actors
msg
msg’
msg’’
actor
other msg’
actor’
process msg’
process msg
(queue msg)
other msg
(/dev/null)
process other msg
t
(/dev/null)

Actors
msg
msg’
msg’’
actor
other msg’
actor’
process msg’
process msg
(queue msg)
other msg
(/dev/null)
process other msg
t
(/dev/null)
Is actor alive/reachable?
Notify on death
Kill from outside
Kill and restart group of actors

Elixir
val = receive msg of
{:msg, msg} -> msg
end
val + arg1 + arg2
end

Conn
Enpoint.call(conn, opts) → conn
Router.call(conn, opts) → conn
Router.browser(conn, opts) → conn
MyController.index(conn, params) → conn
Auth.authenticate(conn, repo) → conn

- Single data structure (source of truth)
- flow in one direction

Connecting Phoenix and Elm
● Phoenix Channels
● Phoenix asset pipeline
● Elm ports
● Elm signals

Resources
Elm lang homepage: http://elm-lang.org/
Elm architecture https://github.com/evancz/elm-architecture-tutorial
Different FRP model https://www.youtube.com/watch?v=Agu6jipKfYw
Time traveling debugger http://debug.elm-lang.org/
Elixir lang homepage: http://elixir-lang.org/
Phoenix framework: http://www.phoenixframework.org/
Programming Phoenix:
https://pragprog.com/book/phoenix/programming-phoenix
Elixir + Elm tutorial http://www.cultivatehq.com/posts/phoenix-elm-1/
Elm + Elixir keynote https://www.youtube.com/watch?v=XJ9ckqCMiKk
My blog: http://tkowal.wordpress.com/

Things to remember #1
Different programming languages solve different
problems.

For interactive web applications check out both
Elixir and Elm

If you like this talk, follow me on Twitter
@snajper47

Elixir and elm - the perfect couple

More Related Content

Viewers also liked (12)

Similar to Elixir and elm - the perfect couple (20)

Recently uploaded (20)

Elixir and elm - the perfect couple