For frontend devs, I am going to present a programming pattern that makes creating interactive browser based user interfaces much simpler than any existing JavaScript framework. I will show how Elm programming language can force us to follow the right path, which is great for working in teams. For backend devs, I am going to show why it is not wise to use the same patterns (and languages) for backends and present how Elixir provides different set of abstractions which helps with scaling. I also briefly touch on Phoenix Framework principles which have couple similarities to the Elm way.

1. Elixir and Elm – the perfect couple
Tomasz Kowal

2. 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?

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

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

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

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

7. I hate language comparisons
The Blub paradox

8. Power continuum

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

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

12. - interactive frontend
- available backend

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

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

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

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

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

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

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

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

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

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

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

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

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

27. Signals
tHTML
HTML’
HTML’’

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

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

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

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

32. Single data structure holds entire application
state.

33. Backend programming

34. Backend programming

35. Backend programming

36. Backend programming - netsplit

37. Actors
msg
actor actor’
(queue msg)
t

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

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

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

41. 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

42. Elixir
def function(arg1, arg2) do
val = receive msg of
{:msg, msg} -> msg
end
val + arg1 + arg2
end

43. CAP

45. 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

46. conn |> endpoint |> router |> pipelines |>
controller
conn |> controller |> common_services |> action

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

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

50. 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/

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

52. Things to remember #2
For interactive web applications check out both
Elixir and Elm

53. Things to remember #3
If you like this talk, follow me on Twitter
@snajper47