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.
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' }
})
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
96.
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 "+" ]
]
