authored by Luca Mugnaini

1. Luca Mugnaini
Functional Programming
and Elm

2. Functional Programming

3. Originated from lambda calculus developed in
the 1930s by Alonzo Church
What is Functional Programming?
Programming with
mathematical functions*
*It doesn’t mean you need to know math

4. • Do this, then do that
• Any effect (Unsafe)
• Commands (statements)
• Control Flow
• Name of a location
Imperative
• No notion of sequence
• Limited effect (Safe)
• Expressions
• Data Flow
• Name of a value
vs. Functional

5. f : a à World à (World, b)
If there are no side-effects, how can
we change the state of the world?
f... takes in the state of the
world and returns a new
world, thus remaining pure
No Side-effects
update : Msg à Model à ( Model, Cmd Msg )
https://channel9.msdn.com/Shows/Going+Deep/Erik-Meijer-Functional-Programming

6. Functional-flavored
• Lisp 1958 (Scheme, Clojure,
Racket)
• ML ”Lisp with types” =>
Ocaml (F#, Scala, Reason)
• Erlang (Elixir)
• Javascript, Java 8, Kotlin,
Perl, Python, PHP, etc.
Functional-first, Pure
• Haskell (Elm)

7. Nirvana
“Haskell is useless”
Simon Peyton Jones
Honesty/Dishonesty
Erik Meijer
https://www.youtube.com/watch?v=iSmkqocn0oQ&t=22s
https://www.youtube.com/watch?v=z0N1aZ6SnBk&t=533
https://www.infoq.com/presentations/Taming-Effect-Simon-Peyton-Jones

8. Web Development

9. Web Development Fatigue3
Javascript fatigue +
CSS fatigue +
Framework/Npm fatigue =
Web
Development
Fatigue

10. What if I told you
Front-end can be done
without Javascript, HTML, CSS?

11. Elm

12. ● Pure Functional Language
● Compiles to Javascript
● Statically typed + inferred
● Support Immutability and Currying
● Virtual DOM
What is Elm?

13. ● Designed by Evan Czaplicki
● April 2012: Version 0.1
● August 2018: Latest version 0.19
● Stable (21 months since 0.18)
● Community in elmlang.slack.com
History

14. ● No loops (“i = i + 1” doesn’t compile)
● No “null” and no “undefined”
● No “return”, everything is an expression
● “if” always need “else”
● No “this”, no callbacks, no closures, no hoisting
● No automatic type conversion
● JSON decoder/encoder instead of stringify/parse
Differences with Javascript

15. Javascript Elm
npm / yarn Built in
React / Angular / Vue
Flux / Redux / MobX
Built in
Built in
Immutable.js
Typescript / Flow
Built in
Built in

16. Without HTML, CSS: elm-ui
row [ padding 10, spacing 7 ]
[ el [] none
, el [] none
, el [] none
]
spacing : Distance between children
padding : Parent Padding

17. [ centerX
, centerY
]
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform:
translate(-50%, -50%);
}
CSS elm-ui
No more CSS tricks

18. 10
nice
things
about
Elm

19. Nice thing #1
Helpful, friendly errors

20. Nice thing #2
No runtime exceptions

21. Nice thing #3
Performance

22. Nice thing #4
Enforced Semantic

23. Nice thing #5
Time-travelling debugger

24. Nice thing #6
Type inference

25. Nice thing #7
elm-format

26. Nice thing #8
Demystify FP concepts
Functors
Monads Category Theory
Algebraic Data Type

27. The Elm Architecture is a simple pattern for
architecting webapps. It is made of thee parts
Nice thing #9
The Elm Architecture (TEA)
Model the state of your application
View a way to view your state as HTML
Update a way to update your state

28. 28
Cartoon cute unicorns vectors design by loutpany from https://freedesignfile.com

29. Safe AreaUnsafe Area
Elm Runtime
DOM
MsgModel
Model
Model
Html
Model
New!
Effects
http requests,
ports Cmd
EventEvent!
New!
New!
Cmd
DOM
Html
EventEvent!
update
view

30. [1,2] + [3,4] = ?

31. [1,2] + [3,4] = ?
Error [1,2,3,4]
[4,6] “1,23,4”
A B
C D

32. "1,23,4"
Javascript Elm
-- TYPE MISMATCH ---------------------
I cannot do addition with lists:
[1,2] + [3,4]
^^^^^
The left side of (+) is a list of type:
List number
But (+) only works with Int and Float
values.
Hint: Switch to the (++) operator to
append lists!
[1,2] + [3,4] = ?

33. What can go wrong with
automatic type conversion?
https://itnext.io/things-that-can-go-wrong-without-a-strictly-typed-language-d91d418a53a1

35. “If you want user input to be automatically typecast as a
number, you can add the number modifier to your v-
model managed inputs”
<input type="number" v-model="product.quantity">
<input type="number" v-model.number="product.quantity">

36. totalProducts() {
return this.products.reduce((sum, product) => {
return sum + product.quantity
}, 0)
}
totalProducts() {
return this.products.reduce((sum, product) => {
if (typeof product.quantity === "number") {
return sum + product.quantity;
} else {
return sum;
}
}, 0)
}

37. <button @click="product.quantity += 1">
<button @click="product.quantity = Number(product.quantity) + 1">

38. Now it works but...

39. type alias Product =
{ id : Int
, quantity : Int
, name : String
}
changeQuantity : Product -> String -> Product
changeQuantity product newQuantity =
{ product
| quantity =
Maybe.withDefault product.quantity
(String.toInt newQuantity)
}
“If the user typed a valid number, replace the old number with the
new one, otherwise keep the old number”

40. Typos <input v-model.number="product.quanity">
t
Elm
Fail silently
Input fields are
empty but buttons
work.
-- TYPE MISMATCH --------------------
The 2nd argument to `map` is not what I
expect:
84| products
^^^^^^^^
This `products` value is a:
List Product
But `map` needs the 2nd argument to be:
List { a | id : Int, name : String, quanity
: Int, quantity : Int }
Hint: Seems like a record field typo. Maybe
quanity should be quantity?
Vue

41. C de

42. module Main exposing (main)
import Html exposing (..)
import Html.Attributes exposing (..)
main =
div []
[ button [id "counter"] [ text "+1" ]
, div [] [ text <| String.fromInt 0 ]
, button [] [ text ”-1" ]
]
<div id="counter">
<button>+1</button>
<div>0</div>
<button>-1</button>
</div>

43. -- MODEL
type alias Model =
{ count : Int }
init : Model
init =
{ count = 0 }

44. -- UPDATE
type Msg
= Increment
| Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
{ model | count = model.count + 1 }
Decrement ->
{ model | count = model.count - 1 }

45. -- VIEW
view : Model -> Html Msg
view model =
layout [] <|
column []
[ button []
{ onPress = Just Increment
, label = text "+1"
}
, el [] <|
text (String.fromInt model.count)
, button []
{ onPress = Just Decrement
, label = text "-1"
}
]

46. main : Program () Model Msg
main =
Browser.sandbox
{ init = init
, view = view
, update = update
}

47. Examples

48. ellie-app.comhttps://ellie-app.com/4ddCRdyx4Rta1

49. www.nsb.no

50. unsoundscapes.itch.io/cubik

51. malax.github.io/elmboy

52. ● The ideas of Functional Programming are
becoming mainstream (for a reason)
● Learning Elm will make you a better [Javascript,
React, Angular, Vue, etc.] developer
● Writing pure code is an enjoyable experience
that make front-end development fun again!