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
A quick survey
Source: Stack Overflow Developer Survey Results 2016
A quick survey
Source: Stack Overflow Developer Survey Results 2016
But why!?
Source: elmprogramming.com
Elixir
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)
Functional
Programming
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
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
Elixir
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
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.
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
Erlang VM Concurrency
BEAM
(runs in a single OS thread)
Process
Scheduler
CPUCPU
Process
Scheduler
Web server vs. Erlang
Source: Elixir in Action
Example Elixir code
def hello do
"result"
end
Example Elixir code
String.reverse("hello")
Example Elixir code
fn(x) -> x * x end
Example Elixir code
defmodule Example do
end
{: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
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
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
# 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
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
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
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
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
Elm
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
The Elm architecture
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
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
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 %
Example Elm code
123 : Int
12.3 : Float
Example Elm code
"abcd" : String
'abcd' : Char
"""
multiline string
multiline string
"""
Example Elm code
["a", "b", "c"]
[1, 2, 3]
Example Elm code
steve = { name = "Jobs", age = 56 }
steve.name
steve.age
Example Elm code
type UserStatus = Regular | Visitor
Example Elm code
type alias Point = { x: Float, y: Float }
Example Elm code
square n = n^2
sum a b = a + b
Example Elm code
isEven : Int -> Bool
isEven n = remainderBy 2 n == 0
isOdd : Int -> Bool
isOdd n = (not << isEven) n
isOdd = not << isEven
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
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
Programming paradigms and languages
are tools, not religions.Try them out, gain
experience, extend your toolbox, then
choose the right tool for the job.
Cezar Hălmăgean
mixandgo.com
&
The future of web development with

Elixir and elm

  • 1.
    The future of web development with & CezarHă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.
  • 5.
    The problem withobject-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.
  • 7.
    Functional Programming It makesconcurrency 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 Makesvariable 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.
  • 11.
    What is Elixir? Func4onalprogramming 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-purposedevelopment 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 Erlanggood 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 (runsin a single OS thread) Process Scheduler CPUCPU Process Scheduler
  • 15.
    Web server vs.Erlang Source: Elixir in Action
  • 16.
    Example Elixir code defhello do "result" end
  • 17.
  • 18.
  • 19.
  • 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 inElixir 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 Syntaxsimilar 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 chooseElixir 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 tochoose 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 Regardlessof 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.
  • 29.
    What is Elm? Func4onalprogramming 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.
  • 31.
    The Elm language Immutablevalues 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 PaOernmatching 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/201805/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 typeUserStatus = Regular | Visitor
  • 39.
    Example Elm code typealias Point = { x: Float, y: Float }
  • 40.
    Example Elm code squaren = 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 Elmapp 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 Elmapp view : Model -> Html Msg view model = div [] [ button [ onClick ClickedButton ] [ text "Click Me!" ] , div [] [ text model ] ] https://ellie-app.com/5xRHcKVXPVBa1
  • 44.
    Programming paradigms andlanguages are tools, not religions.Try them out, gain experience, extend your toolbox, then choose the right tool for the job.
  • 45.