Intro to the Elm language
by Claudia Doppioslash
24 February 2015 at GeekUp Liverpool
What is cool about Elm?
Elm is a Functional Reactive Language for interactive applications.
- Functional Reactive Programming
- Time Travelling Debugger
- Hot code swapping
- Avoid NULL pointers
- Escape callback hell
- Compiles to Javascript/Html/CSS
- What is cool about Elm? -
Functional Reactive Programming
Elm is built around its FRP implementation
RP has been adapted to OOP but it was born as FRP in Haskell.
You don't need to learn Haskell to try FRP as it was intended.
Time Travelling Debugger
- What is cool about Elm? -
Based on Bret Victor's talk
which also inspired LightTable.
(At 12:00 one of the bits in question)
Hot Code Swapping
- What is cool about Elm? -
If you have tried Erlang, you know the joy of not needing to recompile the whole project just to test out a tiny change.
Avoid Null Pointers
- What is cool about Elm? -
You most likely have known the pain of having to put null guards.
No more. Union Types will spare you from that.
Escape race conditions
- What is cool about Elm? -
Single assignment makes concurrency easier.
(See Erlang)
Escape callback hell
- What is cool about Elm? -
With Signals. A signal is a value that changes over time, which updates all the values that depend on it.
Compiles to Javascript/Html/CSS
- What is cool about Elm? -
What can you make with Elm?
FRP is well suited for GUIs and games.
If you have had to wrangle with MVC and MVVM and more of those acronyms in the past you know that UI programming is hardly solved.
What can you make with Elm?
Games
What can you make with Elm?
Web Apps
How to install Elm
- Try Elm website
- Elm Platform
- From source
- How to install Elm -
Just to open elm-lang.org/try in a browser. It includes an editor and a preview, it supports hot code reloading too.
Try Elm website
- How to install Elm -
Download the installer from
elm-lang.org/Install.elm, it's available for Mac and Windows.
Elm platform
- How to install Elm -
Try your luck with Cabal.
Elm is implemented in Haskell.
From source
- How to install Elm -
- Sublime Text
- Atom
- Emacs
- Vim
Editor Support
Hello World
import Graphics.Element (..) import Text (..) main : Element main = plainText "Hello, World!"
Import modules ->
<- Import all symbols in the module
Type signature ->
<- Main function
- Hello World -
These are the 3 necessary elements of an Elm program:
- Module imports
- Type Signatures
- Main function
If you've ever tried Haskell you'll find the syntax familiar.
The type signature goes before the function.
But Elm has type inference so most of the time you'll be able to skip writing it down.
import Graphics.Element (..)
Module imports
Packages are found on:
Will import all functions in Graphics.Elements, you'll be able to use them without prefix.
import Graphics.Element as el
You'll be able to use them with prefix el.namefunction
- Hello World -
square : Int -> Int
Type signatures
Is the signature of a function that takes an Integer and returns an Integer.
add : Int -> Int -> Int
Is the signature of a function that takes two Integers and returns an Integer.
- Hello World -
Main function
The main function is the entry point of program execution, so you need one, or your code won't run.
- Hello World -
Fundamental Concepts
- Signals
- Union Types
- Pattern Matching
- Foldp
Signals
import Graphics.Element (..)
import Signal (Signal, map)
import Mouse
import Text (asText)
main : Signal Element
main =
map asText Mouse.position
[from examples]
Signals are values that change over time. They are Inputs that can be transformed, merged and filtered.
In practice it's similar to how a spreadsheet works.
Simple program which shows the mouse position.
- Fundamental Concepts -
Union Types
A union type is a way to put together many different types. Somewhat a more powerful enum.
type Action = Increment | Decrement
type Action = Increment Int | Decrement Int
Plain enumeration
Enumeration + Data
- Fundamental Concepts -
Maybe Type
type Maybe Int = Just Int | Nothing
The Maybe type allows us to avoid null checks. If there is a value it will be Just value if there isn't it will be Nothing.
- Fundamental Concepts -
Pattern Matching
It's a much more powerful switch case statement. Made to be use in combination with Union Types, it will accept any type the Union Type has attached.
type alias Model = Int
update : Action -> Model -> Model
update action model =
case action of
Increment -> model + 1
Decrement -> model - 1
type alias Model = Int
update : Action -> Model -> Model
update action model =
case action of
Increment value -> model + value
Decrement value -> model - value
Plain enumeration
Enumeration + Data
- Fundamental Concepts -
Match Maybe Type
String.toInt : String -> Maybe Int
toMonth : String -> Maybe Int
toMonth rawString =
case String.toInt rawString of
Nothing -> Nothing
Just n ->
if n > 0 && n <= 12 then Just n else Nothing
- Fundamental Concepts -
Foldp
- Fundamental Concepts -
A function that is applied on a signal in time:
foldp : (a -> b -> b) -> b -> Signal a -> Signal b
Its arguments are:
- a function which takes two args
- a default value for the output signal
- an input signal
The two args of the function are the current value of the input signal, and the past value or default value if there is no past value.
Architecture
-
Model - a full definition of the application's state
-
Update - a way to step the application state forward
-
View - a way to visualize our application state with HTML
-
Signals - the signals and inputs necessary to manage events
[example from elm-architecture]
- Architecture -
Basic Pattern
-- MODEL
type alias Model = { ... }
-- UPDATE
type Action = Reset | ...
update : Action -> Model -> Model
update action model =
case action of
Reset -> ...
...
-- VIEW
view : Model -> Html
view =
...
<- type alias
<- Union type action
<- update function
<- View update function
- Architecture -
Model
A data structure which contains our state. We skipped over Records so we'll stick to a plain Int.
type alias Model = Int
- Architecture -
Update
type Action = Increment | Decrement
update : Action -> Model -> Model
update action model =
case action of
Increment -> model + 1
Decrement -> model - 1
- A union type which enumerates the possible actions, with or without attached data.
- The function which by applying the action to the model creates the new model state.
- Architecture -
View
view : Model -> Html
view model =
div []
[ button [ onClick (Signal.send actionChannel Decrement) ] [ text "-" ]
, div [ countStyle ] [ text (toString model) ]
, button [ onClick (Signal.send actionChannel Increment) ] [ text "+" ]
]
countStyle : Attribute
countStyle =
style
[ ("font-size", "20px")
, ("font-family", "monospace")
, ("display", "inline-block")
, ("width", "50px")
, ("text-align", "center")
]
The function which applied to the model creates the new view state.
main : Signal Html
main =
Signal.map view model
model : Signal Model
model =
Signal.foldp update 0 (Signal.subscribe actionChannel)
actionChannel : Signal.Channel Action
actionChannel =
Signal.channel Increment
- Architecture -
Inputs/Signals
The main function is driven by the Signals. It is updated every time we click on the buttons we create in the view.
Elm Tools and Workflows
- Make your project
- elm-package
- elm-reactor
- elm-make
- Elm Tools and Workflow -
Elm Try website
elm-package
- Elm Tools and Workflow -
Use elm-package to install community packages:
elm-package install user/project
elm-package is sandboxed by default. All packages are installed on a per-project basis, so all your projects dependencies are independent.
[from elm web site]
You can also put the dependencies of a project in the elm-package.json file, for convenient dependency handling.
- Elm Tools and Workflow -
elm-make
Workflow:
- compile in elm-make
- open in browser
Command:
elm-make Main.elm --output=main.html
elm-reactor
Workflow:
- edit with editor
- start elm-reactor
- open browser
- Elm Tools and Workflow -
Command:
elm-reactor
In the root of your elm files.
Summary
You should now:
- Know what makes Elm interesting
- Have it installed
- Being able to architect a simple program
- Run your programs with the time travelling debugger
References
Fin.
Intro to the Elm language
By Claudia Doppioslash
Intro to the Elm language
- 4,008