Building a web app
in the ecosystem
runtime-exception-free guaranteed
Tessa Kelly
@t_kelly9
Engineer at NoRedInk
Elm
(almost)
Introduction
Who's the who
What's the what
Tessa Kelly - @t_kelly9 - NoRedInk
Following along
bit.ly/2pv7P2i
slides.com/tessak/elm-tutorial/live
Tessa Kelly - @t_kelly9 - NoRedInk
Helping teachers
teach grammar and writing
... using Elm
What have we built?
Some cool stuff.
Elm
Tools
Ecosystem
Tessa Kelly - @t_kelly9 - NoRedInk
Elm
An Introduction
Tessa Kelly - @t_kelly9 - NoRedInk
Why do people like Elm?
- Functional style
- Type safety
- The compiler
view : Model -> Html Msg
view model =
div [] [ text "Hello, world!" ]
type alias Model =
{}
model : Model
model =
{}
type Msg
= NoOp
update : Msg -> Model -> Model
update msg model =
case msg of
NoOp ->
model
Tessa Kelly - @t_kelly9 - NoRedInk
Why do people like Elm?
- Functional style
- Type safety
- The compiler
// Relying on side-effects:
var counter = 0;
function incrementCounter () {
counter++
}
// Limiting side-effects:
function incrementCounter (counter) {
return ++counter
}
Tessa Kelly - @t_kelly9 - NoRedInk
Why do people like Elm?
- Functional style
- Type safety
- The compiler
// incrementCounter : number -> number
function incrementCounter (counter) {
return ++counter
}
Tessa Kelly - @t_kelly9 - NoRedInk
Why do people like Elm?
- Functional style
- Type safety
- The compiler
// incrementCounter : number -> number
function incrementCounter (counter) {
if (typeof counter === 'number') {
return ++counter
} else {
throw "type error: called incrementCounter with non-number argument."
}
}
Tessa Kelly - @t_kelly9 - NoRedInk
Why do people like Elm?
- Functional style
- Type safety
- The compiler
// Polyfill for IE and Opera Mobile from MDN Number.isInteger entry(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger)
Number.isInteger = Number.isInteger || function(value) {
return typeof value === 'number' &&
isFinite(value) &&
Math.floor(value) === value;
};
function incrementCounter (counter) {
if (Number.isInteger(counter)) {
return ++counter
} else {
throw "type error: called incrementCounter with non-integer argument."
}
}
Tessa Kelly - @t_kelly9 - NoRedInk
Why do people like Elm?
- Functional style
- Type safety
- The compiler
incrementCounter : Int -> Int
incrementCounter counter =
counter + 1
Tessa Kelly - @t_kelly9 - NoRedInk
Let's just side by side that...
// Polyfill for IE and Opera Mobile from MDN Number.isInteger entry (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger)
Number.isInteger = Number.isInteger || function(value) {
return typeof value === 'number' &&
isFinite(value) &&
Math.floor(value) === value;
};
function incrementCounter (counter) {
if (Number.isInteger(counter)) {
return ++counter
} else {
throw "type error: called incrementCounter with non-integer argument."
}
}
incrementCounter : Int -> Int
incrementCounter counter =
counter + 1
Tessa Kelly - @t_kelly9 - NoRedInk
Why do people like Elm?
- Functional style
- Type safety
- The compiler
The argument to function incrementCounter is causing a mismatch.
Function incrementCounter is expecting the argument to be:
Int
But it is:
Float
Hint: Elm does not automatically convert between Ints and Floats.
Use toFloat and round to do specific conversions.
Tessa Kelly - @t_kelly9 - NoRedInk
Why do people like Elm?
- Functional style
- Type safety
- The compiler
-- error: TYPE MISMATCH - /Users/tessakelly/Documents/elm-piano/src/Model.elm:18:1
The definition of `init` does not match its type annotation.
The type annotation for `init` says it always returns:
Model
But the returned value (shown above) is a:
{ currentlyPlaying : AllDict.AllDict ( Octave, Note ) v Float
, debounce : Maybe a
, octave : number
, played : List b
, time : number1
}
Hint: The record fields do not match up. Maybe you made one of these typos?
debouncer <-> debounce
Tessa Kelly - @t_kelly9 - NoRedInk
Why do people like Elm?
- Functional style
- Type safety
- The compiler
ourFloat : Float
ourFloat =
1.000000
counter : Int
counter =
round ourFloat
incrementedCounter : Int
incrementedCounter =
incrementCounter counter
{- MORE SUCCINCTLY -}
incrementedCounter : Int
incrementedCounter =
incrementCounter
(round 1.000000)
Tessa Kelly - @t_kelly9 - NoRedInk
Any questions?
Tessa Kelly - @t_kelly9 - NoRedInk
Getting Started
Fingers to Keyboard
Tessa Kelly - @t_kelly9 - NoRedInk
ELm
LIve
Editor
Tessa Kelly - @t_kelly9 - NoRedInk
Hello, World
https://ellie-app.com/new
Tessa Kelly - @t_kelly9 - NoRedInk
Prairie Chicken, Lesser
An Accounting
Tessa Kelly - @t_kelly9 - NoRedInk
Adding View Arguments
https://ellie-app.com/38fqWH7K6xYa1/0
Tessa Kelly - @t_kelly9 - NoRedInk
Adding a Count Button
https://ellie-app.com/38frj3F28mYa1/0
Tessa Kelly - @t_kelly9 - NoRedInk
The Elm Architecture
Tessa Kelly - @t_kelly9 - NoRedInk
The Elm Architecture
main =
beginnerProgram
{ model = model
-- our application state and data
, update = update
-- the way that the application
-- state and data can change
, view = view -- the view!
}
Tessa Kelly - @t_kelly9 - NoRedInk
Wiring it all up!
(part 1)
https://ellie-app.com/38frCLYqNHza1/0
Tessa Kelly - @t_kelly9 - NoRedInk
Wiring it all up!
(part 2)
https://ellie-app.com/38frV3W7KLHa1/0
Tessa Kelly - @t_kelly9 - NoRedInk
Questions?
With notes: https://ellie-app.com/38fsmjLscCza1/0
Without: https://ellie-app.com/38fsNbsDtQza1/0
Tessa Kelly - @t_kelly9 - NoRedInk
Exercise Interlude
Killing Chickens
and
Conditional Logic
Tessa Kelly - @t_kelly9 - NoRedInk
Decreasing Chickens
EXERCISE
Add decrement functionality. (Sad lesser prairie chicken!)
SOLUTION
https://ellie-app.com/38ftQWKynkxa1/0
Tessa Kelly - @t_kelly9 - NoRedInk
There are: 1 chickens
Conditional Logic
formatChickenCount : Int -> String
formatChickenCount count =
if count == 1 then
"There is 1 chicken."
else
"There are " ++ toString count ++ " chickens."
Tessa Kelly - @t_kelly9 - NoRedInk
Plural Agreement
EXERCISE
Add the formatChickenCount function to the application.
SOLUTION
https://ellie-app.com/38fvtpY288xa1/0
formatChickenCount : Int -> String
formatChickenCount count =
if count == 1 then
"There is 1 chicken."
else
"There are " ++ toString count ++ " chickens."
Tessa Kelly - @t_kelly9 - NoRedInk
Negative Chickens
EXERCISE
Prevent users from decrementing more chickens than is possible.
SOLUTION
https://ellie-app.com/38fvQ3T3DN7a1/0
Tessa Kelly - @t_kelly9 - NoRedInk
Elm Reactor
Running Code Locally
Tessa Kelly - @t_kelly9 - NoRedInk
Running Code Locally
$ elm
Elm Platform 0.18.0 - a way to run all Elm tools
Usage: elm <command> [<args>]
Available commands include:
make Compile an Elm file or project into JS or HTML
package Manage packages from <http://package.elm-lang.org>
reactor Develop with compile-on-refresh and time-travel debugging
repl A REPL for running individual expressions
You can learn more about a specific command by running things like:
elm make --help
elm package --help
elm <command> --help
In all these cases we are simply running 'elm-<command>' so if you create an
executable named 'elm-foobar' you will be able to run it as 'elm foobar' as
long as it appears on your PATH.
- Checking our install
- Setting up our project
- Starting elm-reactor
Tessa Kelly - @t_kelly9 - NoRedInk
Running Code Locally
$ mkdir prairie-chicken-counter
$ cd prairie-chicken-counter
$ touch Main.elm
- Checking our install
- Setting up our project
- Starting elm-reactor
Tessa Kelly - @t_kelly9 - NoRedInk
Running Code Locally
$ elm reactor
elm-reactor 0.18.0
Listening on http://localhost:8000
- Checking our install
- Setting up our project
- Starting elm-reactor
Tessa Kelly - @t_kelly9 - NoRedInk
Add.
Save.
Refresh.
Tessa Kelly - @t_kelly9 - NoRedInk
Syntactical
A Quick Syntax Primer
Tessa Kelly - @t_kelly9 - NoRedInk
Strings
{-| Using (++) as an infix operator:
-}
exclaim : String -> String
exclaim comment =
comment ++ "!"
{-| Using (++) as a prefix operator:
-}
noSeriouslyExclaimTho : String -> String
noSeriouslyExclaimTho comment =
(++) comment "!!!!"
{- More complex operations with Strings can be explored
in the String documentation:
http://package.elm-lang.org/packages/elm-lang/core/5.1.1/String
-}
Tessa Kelly - @t_kelly9 - NoRedInk
Numbers
{-| Example of a float.
-}
float : Float
float =
99.99
{-| Example of an integer.
-}
integer : Int
integer =
round float
{- Check out the Basics docs for more:
http://package.elm-lang.org/packages/elm-lang/core/5.1.1/Basics
-}
Tessa Kelly - @t_kelly9 - NoRedInk
Lists
anEmptyList : List a
anEmptyList =
[]
aListOfStrings : List String
aListOfStrings =
[ "Just", "some", "strings!" ]
hasMyName : List String -> Bool
hasMyName nameList =
List.member "Tessa" nameList
addAnElementToTheFrontOfTheList : List String
addAnElementToTheFrontOfTheList =
"cons" :: [ "is the name of this operator" ]
{- Lists also have package documentation in the
core section of the package website.
http://package.elm-lang.org/packages/elm-lang/core/5.1.1/List
-}
Tessa Kelly - @t_kelly9 - NoRedInk
Records
someRecord =
{ whatIsIt = "Named key value pairs"
, doTheyAllNeedTheSameType = False
, howDoesThisWorkInTheTypeSystem =
"We'll look at type aliases on the next slide"
, someValue = ( 1, 2, 3 )
}
updatedRecord =
{ someRecord
| whatIsIt =
"An updated record--the old record isn't changed by this operation"
}
getSomeValue : { a | someValue : b } -> b
getSomeValue argument =
argument.someValue
getSomeValueTwo : { a | someValue : b } -> b
getSomeValueTwo argument =
.someValue argument
getSomeValueThree : { a | someValue : b } -> b
getSomeValueThree { someValue } =
someValue
Tessa Kelly - @t_kelly9 - NoRedInk
Type Aliases
{-| Type aliases are a convenience that will help the
compiler give you nice error messages.
-}
type alias RecordExample =
{ fieldName : String
, aBoolField : Bool
, somethingElse : List ( String, Bool ) -- This is a list of tuples.
}
aRecord : RecordExample
aRecord =
{ fieldName = "field value"
, aBoolField = False
, somethingElse = [ ("Hello", True) ]
}
{-| Type aliases give you an order-based constructor. -}
anotherRecord : RecordExample
anotherRecord =
RecordExample
""" fieldName values are strings, so we need to pass in a string first.
Use triple double-quotation marks for a multi-line string!
"""
True
[]
Tessa Kelly - @t_kelly9 - NoRedInk
Functions
iAmAFunction : String -> String
iAmAFunction argument =
"This is the body of the function, plus the argument: " ++ argument
iAmAFunctionWithLocalScope : Int -> Int
iAmAFunctionWithLocalScope argument =
let
iAmALocalVariable : Int
iAmALocalVariable =
7
localFunction localArgument =
9 + localArgument
in
argument + localFunction 10
{-| `\item -> item ++ "!!!"` is an anonymous function.
-}
exclaimList : List String -> List String
exclaimList =
-- Notice that we haven't explicitly named the argument to this function
List.map (\item -> item ++ "!!!")
Tessa Kelly - @t_kelly9 - NoRedInk
Special Operators: Pipe
{- `(|>)`, `(<|)`
These operators pass the result of an operation on.
Pipes make it easier to do many data transformations in
a row and can serve as a replacement for parentheses.
-}
{-| This is "Hello!!!" -}
helloWithParens : String
helloWithParens =
((++) "Hello") "!!!"
{-| This is also "Hello!!!", but notice the `|>` instead of the parens -}
helloWithPipeOperator : String
helloWithPipeOperator =
"!!!" |> (++) "Hello"
Tessa Kelly - @t_kelly9 - NoRedInk
Special Operators: Compose
{- `(>>)`, `(<<)` -- compose functions.
-}
mathItUpWithoutFunctionComposition : List Int -> List Int
mathItUpWithoutFunctionComposition =
List.map (\value -> value * 2 + 1)
{-| mathItUp [ 0, 1, 2 ] == [ 1, 3, 5 ]
-}
mathItUp : List Int -> List Int
mathItUp =
List.map ((*) 2 >> (+) 1)
Tessa Kelly - @t_kelly9 - NoRedInk
Elm ✓
Tools
Ecosystem
Tessa Kelly - @t_kelly9 - NoRedInk
Tools
A Brief Overview
Tessa Kelly - @t_kelly9 - NoRedInk
Tessa Kelly - @t_kelly9 - NoRedInk
Tools to know and love
- ellie
- elm-format
- elm-oracle
- create-elm-app
- elm-doc-test
- elm-test
- debugger
- elm-html-a11y
- elm-decode-pipeline
- Elm Search
- ... and many more!
Adding elm-format to your editor:
Tessa Kelly - @t_kelly9 - NoRedInk
https://github.com/avh4/elm-format
view : Model -> Html Msg
view model = div [class[ Container ]
] [Html.CssHelpers.style css,
viewPiano model.currentlyPlaying model.octave, label [for "input" ] [text "Play input" ], input [autofocus True , onKeyDown (Update.Debounce << Update.HandleKeyDown) , onKeyUp (Update.withNote (\note -> Update.Stop ( model.octave, note ))),
id "input"][] , br[][] , h4[] [ text "Record:" ]
, viewPlayedNotes model.played , h4[] [ text "Playing:" ]
, viewPlayingNotes model.currentlyPlaying
]
viewPiano : AllDict.AllDict ( Model.Octave, Model.Note ) a Float -> Model.Octave -> Html Msg
viewPiano currentlyPlaying selectedOctave =
div [class[Piano]] (List.repeat 7 () |> List.indexedMap (\index _ -> viewOctave currentlyPlaying selectedOctave index))
view : Model -> Html Msg
view model =
div
[ class [ Container ]
]
[ Html.CssHelpers.style css
, viewPiano model.currentlyPlaying model.octave
, label [ for "input" ] [ text "Play input" ]
, input
[ autofocus True
, onKeyDown (Update.Debounce << Update.HandleKeyDown)
, onKeyUp (Update.withNote (\note -> Update.Stop ( model.octave, note )))
, id "input"
]
[]
, br [] []
, h4 [] [ text "Record:" ]
, viewPlayedNotes model.played
, h4 [] [ text "Playing:" ]
, viewPlayingNotes model.currentlyPlaying
]
viewPiano : AllDict.AllDict ( Model.Octave, Model.Note ) a Float -> Model.Octave -> Html Msg
viewPiano currentlyPlaying selectedOctave =
div [ class [ Piano ] ] (List.repeat 7 () |> List.indexedMap (\index _ -> viewOctave currentlyPlaying selectedOctave index))
The Debugger
EXERCISE
Use the debugger on Ellie to send a character back and forth through time, and find the bug...
https://ellie-app.com/37HyTh3GFRza1/4
- We can step through the history to any point
- We can import and export histories from our application
tesk9/elm-html-a11y
Elm ✓
Tools ✓
Ecosystem
Tessa Kelly - @t_kelly9 - NoRedInk
Packages
Getting Started
Tessa Kelly - @t_kelly9 - NoRedInk
The Package Site
http://package.elm-lang.org/
Tessa Kelly - @t_kelly9 - NoRedInk
Installing Packages
(Or--back to our lesser prairie chickens!)
$ elm-package install rtfeldman/elm-css
To install rtfeldman/elm-css I would like to add the following
dependency to elm-package.json:
"rtfeldman/elm-css": "8.2.0 <= v < 9.0.0"
May I add that to elm-package.json for you? [Y/n] y
Some new packages are needed. Here is the upgrade plan.
Install:
elm-lang/core 5.1.1
elm-lang/html 2.0.0
elm-lang/virtual-dom 2.0.4
rtfeldman/elm-css 8.2.0
rtfeldman/elm-css-util 1.0.2
rtfeldman/hex 1.0.0
Do you approve of this plan? [Y/n] y
So what do we have?
- elm-stuff
- elm-package.json
{
"version": "1.0.0",
"summary": "helpful summary of your project, less than 80 characters",
"repository": "https://github.com/user/project.git",
"license": "BSD3",
"source-directories": [
"."
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "5.1.1 <= v < 6.0.0",
"elm-lang/html": "2.0.0 <= v < 3.0.0",
"rtfeldman/elm-css": "8.2.0 <= v < 9.0.0"
},
"elm-version": "0.18.0 <= v < 0.19.0"
}
Tessa Kelly - @t_kelly9 - NoRedInk
elm-package.json for elm-css
{
"version": "8.2.0",
"summary": "CSS Preprocessor for Elm",
"repository": "https://github.com/rtfeldman/elm-css.git",
"license": "BSD-3-Clause",
"source-directories": [
"src"
],
"exposed-modules": [
"Css",
"Css.Colors",
"Css.Elements",
"Css.File",
"Css.Namespace"
],
"dependencies": {
"elm-lang/core": "5.0.0 <= v < 6.0.0",
"rtfeldman/elm-css-util": "1.0.2 <= v < 2.0.0",
"rtfeldman/hex": "1.0.0 <= v < 2.0.0"
},
"elm-version": "0.18.0 <= v < 0.19.0"
}
Tessa Kelly - @t_kelly9 - NoRedInk
Using the package
import Css exposing (asPairs, color)
import Css.Colors exposing (green)
import Html.Attributes exposing (style)
import Html exposing (..)
import Html.Events exposing (onClick)
...
view : Int -> Html Msg
view count =
div [ (style << asPairs) [ color green ] ]
[ h1 [] [ text "Prairie Chicken, Lesser" ]
, h2 [] [ text "An Accounting of Hens" ]
, div []
[ text (formatChickenCount count)
]
, viewIncrementButton
, if count > 0 then
viewDecrementButton
else
text ""
]
Tessa Kelly - @t_kelly9 - NoRedInk
View customization
EXERCISE
Style the application to your specifications.
SOLUTION
No solution here--but save questions for me. :)
What's good?
Tessa Kelly - @t_kelly9 - NoRedInk
- Markdown-based documentation
- Enforced semantic versioning
- Required documentation
What's good?
Tessa Kelly - @t_kelly9 - NoRedInk
- Markdown-based documentation
- Required documentation
- Enforced semantic versioning
Let's add docs.
EXERCISE
Add doc comments to your application. See how your comments look via:
package.elm-lang.org/help/docs-preview.
SOLUTION
We'll walk through this together.
What's good?
Tessa Kelly - @t_kelly9 - NoRedInk
- Markdown-based documentation
- Required documentation
- Enforced semantic versioning
Any questions?
Tessa Kelly - @t_kelly9 - NoRedInk
Going Further
Additional Exercises
Tessa Kelly - @t_kelly9 - NoRedInk
Adding a Model
EXERCISE
Add and use a Model type alias. The Model is generally a record: make the chicken count a field on the model.
SOLUTION
https://ellie-app.com/38fvQ3T3DN7a1/1
Keeping it going...
EXERCISE
Switch from `beginnerProgram` to `program`.
SOLUTION
We'll need to make some pretty substantial changes.
https://ellie-app.com/38fvQ3T3DN7a1/2
-- HINT:
main =
program
{ init = init
, update = update
, view = view
, subscriptions =
\model -> Sub.none
}
Embedding
EXERCISE
Switch from Fullscreen to embedding here:
This enables us to use a single DOM node rather than the full screen.
SOLUTION
var node = document.getElementById("some-sweet-id")
var app = Elm.Main.embed(node)
Towards JavaScript
EXERCISE
Use `elm-make Main.elm --output=main.js` to produce your elm code (instead of elm-reactor). Use a normal .html file and script tag to load.
SOLUTION
We'll walk through this together!
Towards JavaScript
EXERCISE
Console.log a message whenever a user decrements a chicken.
(You'll need to read about Ports!)
SOLUTION
We'll walk through this together!
Going Further
Resources and Community
Tessa Kelly - @t_kelly9 - NoRedInk
Free Resources
- The Guide: https://guide.elm-lang.org/
- ElmBridge: https://elmbridge.github.io/curriculum/
- Blog posts compilation: http://www.elmweekly.nl/
Tessa Kelly - @t_kelly9 - NoRedInk
Tessa Kelly - @t_kelly9 - NoRedInk
Community
- Slack: elmlang.slack.com
- Reddit: https://www.reddit.com/r/elm/
- Google group: https://groups.google.com/forum/#!forum/elm-discuss
- ... and for everything: http://elm-lang.org/community
Breaking Things
About those runtime exceptions...
Tessa Kelly - @t_kelly9 - NoRedInk
The Debug module!
EXERCISE
Use `Debug.crash` to crash your program.
SOLUTION
main =
text "Hello, World!"
|> \_ -> Debug.crash "Goodbye, World!"
Tessa Kelly - @t_kelly9 - NoRedInk
Bad Recursion
even : Int -> Bool
even n =
case n of
0 ->
True
_ ->
odd (n - 1)
odd : Int -> Bool
odd n =
case n of
0 ->
False
_ ->
even (n - 1)
Example from joneshf/elm-tail-recursion
(Check out the package docs to learn how to avoid this!)
EXERCISE
See if you can recurse your way to an exception.
Tessa Kelly - @t_kelly9 - NoRedInk
Any questions?
Tessa Kelly - @t_kelly9 - NoRedInk
Thank you!
:tree:
Tessa Kelly - @t_kelly9 - NoRedInk
Elm Tutorial
By Tessa K
Elm Tutorial
Introduction to the Elm programming language.
- 1,318