How can you bring true functional programming into the web world AND transpile down to JavaScript so you can run it anywhere? No, it's not a pipe dream - it's Elm. Elm describes itself as a direct competitor to React, but it’s so much more – it’s a language as well as a set of tools for building scalable web applications in a concise, maintainable way. In this session, Spencer will explore the Elm programming language and how its functional roots will help you create web apps that scale. Attendees will learn about creating Elm components using the model-update-view pattern, how to use commands to perform HTTP requests, and how subscriptions can help create event-based reactive applications.

1. Functional Web
Programming using Elm
Spencer Schneidenbach
@schneidenbach
schneids.net

8. Common element?

9. JavaScript

10. this

11. https://
www.christosmonogios.
com/2016/08/15/The-
This-Keyword-In-
JavaScript-Must-Know-
JavaScript-Features-
Every-Programmer-
Should-Learn-To-
Master-The-Language/
http://odetocode.com/
blogs/scott/archive/
2016/09/01/the-
troubles-with-
javascript-arrow-
functions.aspx
https://
derickbailey.com/
2016/08/22/
undefined-is-not-
a-function/
http://
www.bitnative.co
m/2016/08/18/
react-binding-
patterns-this-
keyword/
http://
www.javascripthive.info/
javascript/context-this/

12. var customer = repo.getCustomer(id);
var orders = customer.getOrders();

13. var customer = repo.getCustomer(id);
var orders = customer.getHorDoeuvres();

14. var customer = repo.getCustomer(id);
var orders = customer.getOrderes();

16. JavaScript Isn’t Bad.

17. JavaScript Is Weird.

19. Elm “just works.”

20. Not like a Mac “just
works”

21. That’s pretty vague

22. So let’s dig in

23. Four things

24. One: handling null

25. null

26. –Tony Hoare
“I call it my billion-dollar mistake. It was the
invention of the null reference in 1965.”

27. null/undefined

28. What about in Elm?

29. type alias Order = {
name: String,
date: Date,
amount: Float
}

30. type alias Order = {
name: String,
date: Date,
amount: Float
}
myOrder: Order

32. myOrder : Order
myOrder = {
--no name
date = today,
amount = 123.45 }

34. myOrder : Order
myOrder = {
name = null,
date = today,
amount = 123.45
}

36. So where is null?

37. Easy: there IS no null

38. Easy: there IS no null
(loud applause and
cheering)

39. type Maybe a = Just a | Nothing

40. getAmount : Maybe Int -> String
getAmount maybeInt =
case maybeInt of
Just i -> "You have: " ++ toString i
Nothing -> "You don't have any!"

41. type Maybe a = Just a | Nothing

42. type ContactType =
Email String
| Phone Int
| Twitter String
| Address MailingAddress

43. type ContactType =
Email String
| Phone Int
| Twitter String
| Address MailingAddress
contactPerson : ContactType -> String
contactPerson contact =
case contact of
Email email -> email
Phone phoneNumber -> "Phone: " ++ toString phoneNumber
Twitter twitterHandle -> "Twitter: " ++ twitterHandle

45. type ContactType =
Email String
| Phone Int
| Twitter String
| Address MailingAddress
contactPerson : ContactType -> String
contactPerson contact =
case contact of
Email email -> email
Phone phoneNumber -> "Phone: " ++ toString phoneNumber
Twitter twitterHandle -> "Twitter: " ++ twitterHandle
Address myAddress -> "No one sends mail anymore"

46. No void

47. Two: immutability

48. Let’s set the stage

50. Feature request:
Order amounts that are negative
should have a red name

52. Feature request:
Salespeople who are not active
should not be displayed

58. What about Elm?

59. No mutation.
Can’t modify existing
objects.

60. Instead, you create
copies

61. myOrder : Order
myOrder = {
name = "Lumber",
contact = Email "sas.projects@me.com",
amount = 123.45 }

62. myOrder : Order
myOrder = {
name = "Lumber",
contact = Email "sas.projects@me.com",
amount = 123.45 }
myOrder.contact = Phone 5551234

64. myOrder : Order
myOrder = {
name = "Lumber",
contact = Email "sas.projects@me.com",
amount = 123.45 }
myOrder = {
name = "Lumber",
contact = Phone 5551234,
amount = 123.45 }

66. myOrder : Order
myOrder = {
name = "Lumber",
contact = Email "sas.projects@me.com",
amount = 123.45 }
myNewOrder : Order
myNewOrder = { myOrder | contact = Phone 5551234 }

67. Three: error handling

70. Guess what?

71. There are
NO RUNTIME ERRORS
in Elm

73. type Maybe a = Just a | Nothing

75. function getInputCount() {
var input = $(".count").val();
return parseInt(input);
}

76. function getInputCount() {
var input = $(".count").val(); //bgggs
return parseInt(input); //NaN
}

77. type Result error value
= Err error
| Ok value

78. String.toInt : String -> Result String Int

79. multiplyStrings : String -> String -> Maybe Int
multiplyStrings str1 str2 =
let
intStringOne = String.toInt str1
intStringTwo = String.toInt str2
in
case (intStringOne, intStringTwo) of
(Ok int, Ok int2) -> Just (int * int2)
(_, _) -> Nothing

80. No try/catch blocks

82. Elm makes you handle
errors.

83. Four: The Elm Architecture

85. function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}

86. function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
let store = createStore(counter)
store.dispatch({ type: 'INCREMENT' })

87. function employeeStore(state = [], action) {
switch (action.type) {
case 'ADD':
return [...state, action.employee]
default:
return state
}
}
let store = createStore(employeeStore)
store.dispatch({
type: 'ADD',
employee: { firstName: 'Spencer' }
})

88. function employeeStore(state = [], action) {
switch (action.type) {
case 'ADD':
state.push(action.employee);
return state;
default:
return state
}
}
let store = createStore(employeeStore)
store.dispatch({
type: 'ADD',
employee: { firstName: 'Spencer' }
})

89. function employeeStore(state = [], action) {
switch (action.type) {
case 'ADD':
return state.push(action.employee);
default:
return state
}
}
let store = createStore(employeeStore)
store.dispatch({
type: 'ADD',
employee: { firstName: 'Spencer' }
})

90. Array.push -> number

92. Model
Update
View

93. -- MODEL
type alias Model = Int
model : Model
model = 0

94. -- UPDATE
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1

95. -- UPDATE
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1

97. -- UPDATE
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1

98. -- VIEW
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (toString model) ]
, button [ onClick Increment ] [ text "+" ]
]

99. 1. null handling
2. immutability
3. error handling
4. The Elm Architecture

101. Thank you!
@schneidenbach
schneids.net