An introduction to #Elixir & #Elm, two of my favorite languages for building web apps.

1. The future
of web
development
with
&
Cezar Hălmăgean
Software Development Consultant
I help Ruby on Rails teams
ship high-quality code faster
Owner @ Mix & Go SRL
mixandgo.com

2. A quick survey
Source: Stack Overflow Developer Survey Results 2016

3. A quick survey
Source: Stack Overflow Developer Survey Results 2016

4. But why!?
Source: elmprogramming.com
Elixir

5. The problem with object-oriented
languages is they’ve got all this implicit
environment that they carry around with
them.You wanted a banana but what you
got was a gorilla holding the banana and
the entire jungle.
~ Joe Armstrong (author of Erlang)

6. Functional
Programming

7. Functional Programming
It makes concurrency possible
No deadlocks, no race condi/ons
Tes4ng is easy
No mocks
Debugging
Much easier when you don’t have global state
Makes code understandable
Less moving parts

8. Avoids shared state
Makes variable history irrelevant
It's declara4ve (not impera4ve)
Logic is expressed without explicitly describing the flow control
Favors immutability
Doesn't change history
Avoids side effects
A state change observable outside the called func/on
Functional Programming

10. Elixir

11. What is Elixir?
Func4onal programming language
José Valim (rails core, devise, simple form)
Ruby like syntax
Rails like web framework (Phoenix)
Dynamically typed (+ typespecs)
It's an alterna/ve language for the Erlang VM
Erlang VM (BEAM)
Tested in produc/on for the past 30 years

12. What is Erlang?
General-purpose development plaIorm
Language, VM, framework (OTP) & tools
Runs in the telecom industry
Created and maintained by Ericsson
Easy to scale horizontally
Open Telecom PlaRorm (OTP)
High availability
Nine nines (31.536ms / year). People can die if it goes down.

13. What is Erlang good at?
Concurrency
Context switching between Erlang processes is cheap
Distribu4on
Code executes on different machines
Fault tolerance
It recovers from errors, processes are isolated
Scalability
Scaling horizontally (by adding hardware) without any code changes

14. Erlang VM Concurrency
BEAM
(runs in a single OS thread)
Process
Scheduler
CPUCPU
Process
Scheduler

15. Web server vs. Erlang
Source: Elixir in Action

16. Example Elixir code
def hello do
"result"
end

17. Example Elixir code
String.reverse("hello")

18. Example Elixir code
fn(x) -> x * x end

19. Example Elixir code
defmodule Example do
end

20. {:ok, value} = {:ok, 2}
PaOern matching
= the match operator
Mul4 clause func4ons
Func/ons with the same name, but different arguments
def hello("joe"), do: "Hey Joe"
def hello("jim"), do: "Hey Jim"
def hello({:name, val}), do: "Hey #{val}"
def hello(_), do: "Hey there!"
FP Concepts in Elixir

21. FP Concepts in Elixir
inc = fn(arg) -> arg + 1 end
First class func4ons
Func/ons are values
add(multiply(5, 3), 1)
5
|> multiply(3)
|> add(1)
def perform(number) do
number
|> multiply(3)
|> add(1)
end
Composi4on
Combine func/ons by applying a func/on to the output of another func/on

22. Enum.map([1, 2, 3], fn(n) -> n * 3 end)
# => [3, 6, 9]
add = fn(x) ->
fn(y) -> x + y end
end
add_one = add.(1)
add_one.(2) # => 3
Higher order func4ons
Func/ons that accept and/or return func/ons (func/ons as data)
FP Concepts in Elixir

23. # Pure
def inc(x), do: x + 1
# Impure
def dec(x), do: System.system_time - x
Pure func4ons
Given the same inputs, always returns the same output, and have no side-effects
Referen4al transparency
The defini/on can be replaced with it's value
FP Concepts in Elixir

24. Elixir for developers
Syntax similar to Ruby
It’s easy to get started
Teaches you a new way of thinking
If you're used to OOP
Easy to test
No mutable state, data in -> data out
Code quality
Compile /me checks, tes/ng, doctests

25. When to choose Elixir
Low latency
Soa real /me
High reliability
You really need the system to be up all the /me
You want to use Erlang
And you hate the syntax
Highly distributed systems
Systems that run on mul/ple CPUs/machines

26. When NOT to choose Elixir
Parallelism
Not designed for parallelism, but for fault tolerance and high availability
Learning curve
FP, OTP, BEAM, Phoenix
Speed (number crunching)
C/C++ are befer at CPU intensive computa/ons
Ecosystem
36.000 repos (Elixir) vs. 1.500.000 repos (Ruby) vs. 5.000.000 JS

27. Elixir for business
Responsive
Regardless of how many clients are connected
Lower maintenance/growth costs
Easier to grow, less regression bugs
Highly available
99,9999999% (31.536ms / year)
Never crashes
Errors do not bring the whole system down

28. Elm

29. What is Elm?
Func4onal programming language
For building front-end web applica/ons
No run4me excep4ons
The killer feature
Reac4ve by design
FRP isn't opt-in, it is baked right in the language
Automa4cally enforced seman4c versioning
No user will ever get a breaking API change

30. The Elm architecture

31. The Elm language
Immutable values
No history changes
Type inference
Helps the compiler analyze the code
Strong sta4c types
Finding errors fast with readable compiler messages
Type annota4ons
Documenta/on, simplified debugging

32. The Elm language
PaOern matching
Makes it easy to extract data from a data structure
Great debugger
Inspect the history of your program
Automa4c code formaWng
Removes arguments about code style
Pure func4ons
Easy to reuse, and compose func/ons

33. Elm popularity
Metric 03/2018 05/2019 Diff
GitHub repos 10557 13830 31 %
GitHub users 823 1074 30 %
Updated in the last week 309 252 -18 %
Updated in the last month 759 639 -16 %
Repos with >100 stars 75 111 48 %
Packages in the index 1301 1695 30 %
Package authors 569 724 27 %
Subscribers on r/elm 6145 7730 26 %
Users on Elm Discourse 653 1672 156 %

34. Example Elm code
123 : Int
12.3 : Float

35. Example Elm code
"abcd" : String
'abcd' : Char
"""
multiline string
multiline string
"""

36. Example Elm code
["a", "b", "c"]
[1, 2, 3]

37. Example Elm code
steve = { name = "Jobs", age = 56 }
steve.name
steve.age

38. Example Elm code
type UserStatus = Regular | Visitor

39. Example Elm code
type alias Point = { x: Float, y: Float }

40. Example Elm code
square n = n^2
sum a b = a + b

41. Example Elm code
isEven : Int -> Bool
isEven n = remainderBy 2 n == 0
isOdd : Int -> Bool
isOdd n = (not << isEven) n
isOdd = not << isEven

42. A simple Elm app
type alias Model = String
type Msg = ClickedButton
update : Msg -> Model -> Model
update msg model =
case msg of
ClickedButton -> "YEY!"
https://ellie-app.com/5xRHcKVXPVBa1

43. A simple Elm app
view : Model -> Html Msg
view model =
div []
[ button [ onClick ClickedButton ]
[ text "Click Me!" ]
, div [] [ text model ]
]
https://ellie-app.com/5xRHcKVXPVBa1

44. Programming paradigms and languages
are tools, not religions.Try them out, gain
experience, extend your toolbox, then
choose the right tool for the job.

45. Cezar Hălmăgean
mixandgo.com
&
The future of web development with