Getting to know Elm: the functional frontend
language
Anne van den Berg & Bas Knopper
12-6-2018
Slide 2
Slide 2 text
Who are we?
Anne van den Berg
Dutch (¼ Polish)
JCore
Full-stack Developer
Sports
Travel
#share
Bas Knopper
Dutch
JCore
Full-stack Developer
AI
Running
#share
acvdb bknopper
@BWknopper
Slide 3
Slide 3 text
Agenda
1. What is Elm?
2. Elm basics
3. Hello World
4. Demo
5. Developer Practicalities
6. Comparison with Angular
7. Community
8. Lessons learned
Slide 4
Slide 4 text
What is Elm?
Slide 5
Slide 5 text
not with Elm
Slide 6
Slide 6 text
not with Elm
Slide 7
Slide 7 text
Facts
Slide 8
Slide 8 text
Facts
Evan Czaplicki
2012
Pleasure
Accessibility
Idea → reality
Safety
Open source
Haskell
Slide 9
Slide 9 text
v 0.18
npm install -g elm
& more
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Background
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Language Characteristics
Slide 17
Slide 17 text
Functional language
no side effects
Slide 18
Slide 18 text
Pure functions vs impure functions
(in JavaScript)
Slide 19
Slide 19 text
Immutable
Slide 20
Slide 20 text
Don’t mutate previous values...
Slide 21
Slide 21 text
Don’t mutate previous values...
Slide 22
Slide 22 text
Typed
Slide 23
Slide 23 text
No runtime exceptions
compile time though...
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Compiles to JavaScript, HTML
and CSS
Slide 28
Slide 28 text
Semantic Versioning
Slide 29
Slide 29 text
Fast
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Elm basics
Slide 32
Slide 32 text
Elm basics
● think in functions
○ consider every edge case
○ void functions don’t exist
● operator (++, -, *) = function
● if-else = function
● constant = function without argument
● HTML & CSS are in functions
● EVERYTHING = function
Slide 33
Slide 33 text
Function syntax
● function definition → not necessary
: ->
● `=` to denote function body
=
● function call:
Slide 34
Slide 34 text
Function with multiple arguments
function definition
function itself
function call
Slide 35
Slide 35 text
What does this look like in JavaScript?
Slide 36
Slide 36 text
Currying
translating function with
multiple arguments into
function with one argument
Slide 37
Slide 37 text
… more about functions
● pipe functions: |> or <|
Slide 38
Slide 38 text
… more about functions
● anonymous functions (lambda expressions): \
Slide 39
Slide 39 text
union type
Slide 40
Slide 40 text
type alias
● alias for something
● ‘records’
Slide 41
Slide 41 text
tuple
● to return multiple values
Slide 42
Slide 42 text
type Maybe
● for optional values
Slide 43
Slide 43 text
HTML in Elm
● HTML package
○ functions
○ Elements (div, p, h1, …)
○ Attributes (class, style, …)
○ Events (onClick, onMouseDown, …)
● Don’t forget to import them
Slide 44
Slide 44 text
HTML in Elm
● div with input and button
● two pair of brackets (lists): div [] []
Slide 45
Slide 45 text
Hello World
Slide 46
Slide 46 text
Hello World
● main function
○ model
○ update
○ view
Slide 47
Slide 47 text
Demo
Slide 48
Slide 48 text
Counter demo
● Demo from official Elm tutorial (recommended)
Slide 49
Slide 49 text
Developer practicalities
Slide 50
Slide 50 text
Development Environment
● Install Elm
○ elm-reactor → live server with debugger
○ elm-make → build
○ elm-repl → read eval print loop
○ elm-package → package manager
● Install other tools
○ elm-format
○ elm-lint
○ elm-live
○ elm-test
● Install editor + plugins
Slide 51
Slide 51 text
Build
● Use code bundler for:
○ loading external CSS
○ minifying
○ prettifying
○ ...
● For example Webpack & yarn:
Slide 52
Slide 52 text
Testing
● elm test init
● elm test --watch
Slide 53
Slide 53 text
Testing
Slide 54
Slide 54 text
Testing
Slide 55
Slide 55 text
Testing
Slide 56
Slide 56 text
elm test --watch
Slide 57
Slide 57 text
Standard modules for app development
● Routing
○ elm-lang/navigation
● Http calls
○ elm-lang/http
○ typed http calls
Slide 58
Slide 58 text
Project structure
● determined by your data-structure
Slide 59
Slide 59 text
Comparison with Angular
Slide 60
Slide 60 text
Comparison with AngularJS (1)
Elm AngularJS
Typed + -
Speed + -
Errors ++ -
Clean code ++ -
Learning curve - +
Community - +
Community
Slack channel
elmlang.herokuapp.com
/r/elm
Twitter @elmlang
@czaplic
#elmlang
Discourse
Meetup group (Warsaw)
Stackoverflow (not too big)
Elm conference (July, 5-6th 2018, France)
http://2018.elmeurope.org/
Slide 64
Slide 64 text
Companies
Slide 65
Slide 65 text
Lessons learned
Slide 66
Slide 66 text
Lessons learned
● Steeper learning curve
○ Thought we knew functional programming
○ Keep practicing
● Small community (but very helpful)
● Accept its formatting