Learn about Elm, the powerful front-end functional programming language, and how it can be used to build HTML.

1. Rethinking
FrontEnd
Development
With Elm
Brian Hogan

2. Aboutme
» I build web things.
» I teach people.
» I make music.
» I write books.

3. Elm is a functional programming lnaguage like
Haskell, but more friendly, and aimed at front-end
web development.
We use Elm to make our user interface and give it
behavior.

4. Example
module Hello where
import Html exposing(p, text)
import Html.Attributes exposing(style)
elementStyle =
style
[ ("color", "red")
, ("font-size", "2em")
]
main =
p [elementStyle] [text "Hello World"]

5. Elm compilestoJavaScript
Yes. We just wrote a bunch of code that gets injected
into an HTML page.
Feel gross yet?

6. That'swhatReactdoestoo.
var HelloMessage = React.createClass({
render: function () {
return <h1>Hello {this.props.message}!</h1>;
}
});
React.render(<HelloMessage message="World" />, document.body);

7. Okay,WhyElm?
» Same concepts as React
» Pure functions
» Immutable State
» Static Typing

8. Main
Every Elm app calls a main function when we run it.
main =
-- something goes here
We indent the definitions of functions.

9. Functions
hello =
"Hello there"
Call it as
hello

10. Arguments
Functions can have arguments
square number =
number * number
Call it as
square 2
They have explicit returns.

11. MultipleArguments
Multiple arguments use spaces:
add number1 number2 =
number1 + number2
Call it as
add 1 2

12. Typeannotations
We can enforce data types for our functions so Elm
can help us out.
The annotation is simply a flow of types, with the
last being the return type.
functionName: TypeOfArg1-> TypeOfArg2 -> TypeOfArg3 -> ReturnType
Example:
add: Float -> Float -> Float
add number1 number2 =
number1 + number2

13. Htmlfunctions
elm-html module exposes many functions for building
up virtual DOM nodes.
The main function can render HTML if the HTML module
is included.
import Html exposing(p, text)
main =
p [] [text "Hello World"]

14. pandtext
p [] [text "Hello World"]
p and text are two functions from elm-html
p takes two lists
» a list of attributes (can be empty)
» a list of child elements
text takes a string of text to display.

15. HTMLfunctionsare uniform.
Each takes attributes and elements. So we can nest
them like HTML.
div [class "foo", id "bar" ] [
h1 [] [text "Hello"],
p [] [text "World"]
]
There's a function for every element. Just be sure to
expose what you use.

16. Composability
main =
view
view: Html
view =
div [] [
p [
text "Hello ",
em "world"
]
]

17. Resuability
main =
div [] [
view "Hello",
view "Goodbye"
]
view: String -> Html
view word =
div [] [
p [
text (word ++ " "),
em "world"
]
]

18. ElmArchitecture
View
Function that fires when model changes. Transofms a
model into the UI that people see.
Model
State of the app. No behavior. Just the state.
Update
Function that fires when state changes. Always
returns a new model.

19. Signalsand Mailboxes
Signals
Signals route messages around the application.
Pressing a button is a signal. We can send data along
signals.
Mailboxes
Mailboxes receive signals and send signals. A mailbox
has an address and a signal to respond to.

20. Basic Flow
» Model is initialied
» View is displayed with model
» Events send Signals to Mailboxes
» Mailboxes trigger updates
» New model is created
» New view is rendered

21. Elm StartApp.Simple
Simple pattern we use to hide much of the details.
Like Flux, without all the code.

22. Example
type Action = Increment | Decrement
main =
StartApp.start { model = model, view = view, update = update }
model = 0
view address model =
div []
[ button [ onClick address Decrement ] [ text "-" ]
, div [] [ text (toString model) ]
, button [ onClick address Increment ] [ text "+" ]
]
update action model =
case action of
Increment -> model + 1
Decrement -> model - 1

23. Calculator
Compound Interest Calculator
“Write a program to compute the value of an
investment compounded over time. The program should
ask for the starting amount, the number of years to
invest, the interest rate, and the number of periods
per year to compound.”

24. Whatyou need
» Node.js http://nodejs.org
$ npm install -g elm
» The elm package for Node
» Your favorite text editor

25. Workingwith HTML
Elm's virtual DOM support is separate:
$ elm package install evancz/elm-html
Make browser reload when we save
$ npm install -g elm-live

26. Projectsetup
Create folder and file to work in
$ mkdir calculator && cd calculator
$ touch calculator.elm
Init the project
$ elm package install
Install HTML and StartApp
$ elm package install evancz/elm-html
$ elm package install evancz/start-app

27. Demo
» Create the basic app
» Build the form
» Perform calculations

28. Issues
1.Tons of code to do simple
thins
2.Integration with external
services is complex.
3.Must re-learn a lot of
things about web
development
4.Small community

29. Benefits
1.Small community
2.Benefits of React with a
clear opinionated approach
3.Fantastic error messages
4.Types ensure data integrity
and flow

30. Write code
» Elm website: http://elm-
lang.org/
» Try Elm http://elm-
lang.org/try
» Package system: http://
package.elm-lang.org/
» Documentation http://elm-
lang.org/docs

31. Whereto go next?
Book: http://pragprog.com/
titles/bhwb
Twitter: @bphogan
Material: http://bphogan.com/
presentations/elm2016/
Thankyou!