Goal
You leave here wanting to
play with Elm for an afternoon
Slide 4
Slide 4 text
What to expect
Elm language tour
Slide 5
Slide 5 text
What to expect
What is Elm?
Slide 6
Slide 6 text
What to expect
Why bother with Elm instead of Javascript?
Slide 7
Slide 7 text
What to expect
What makes Elm useful and interesting?
• Code that doesn’t crash
• A powerful type system
• Ecosystem: quality over quantity
• Care-free refactoring
• Amazing QA / debug experience
Slide 8
Slide 8 text
What is Elm?
Slide 9
Slide 9 text
What is Elm?
Elm is a language that compiles to JS
Slide 10
Slide 10 text
What is Elm?
Elm (currently) targets the browser
Slide 11
Slide 11 text
What is Elm?
Elm does not replace PHP, C#, Elixir, etc
Slide 12
Slide 12 text
What is Elm?
Elm does not (yet) replace JavaScript
Slide 13
Slide 13 text
The Elm Architecture
Slide 14
Slide 14 text
Language + Framework
Slide 15
Slide 15 text
Model
Slide 16
Slide 16 text
Update
Slide 17
Slide 17 text
View
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No side effects
Slide 20
Slide 20 text
Questions?
Slide 21
Slide 21 text
Why bother with Elm
instead of Javascript?
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Why bother with Elm instead of
Javascript?
User interfaces get complex quickly
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
No content
Slide 28
Slide 28 text
What makes Elm
useful and interesting?
Slide 29
Slide 29 text
No runtime exceptions
Slide 30
Slide 30 text
No runtime exceptions
• Hooray, no bugs! Not quite.
Slide 31
Slide 31 text
No runtime exceptions
• Hooray, no bugs! Not quite.
• Runtime exceptions are a common class of bugs
Slide 32
Slide 32 text
No runtime exceptions
• Hooray, no bugs! Not quite.
• Runtime exceptions are a common class of bugs
• “undefined is not a function”
Slide 33
Slide 33 text
No Red Ink’s testimonial
Since we began using Elm in 2015, our production Elm
code has yet to cause a single runtime exception. Our
error logs show plenty of crashes from our legacy
JavaScript code, but none from our Elm code. We've also
found our Elm-powered front-end substantially easier to
scale than our previous React code base.
Slide 34
Slide 34 text
Spot the error
Slide 35
Slide 35 text
Pattern matching
Slide 36
Slide 36 text
Error handling in types
Slide 37
Slide 37 text
Algebraic data types
Slide 38
Slide 38 text
The power of the type system
• PHP’s type system is getting better, but still basic
• C# and Java? Better yet, but not very expressive
• ML type system
Slide 39
Slide 39 text
Data modeling!!
https://youtu.be/IcgmSRJHu_8
Slide 40
Slide 40 text
Refactoring
• refactoring can be scary on
larger projects, even with tests
• First few times, I thought it
couldn’t possibly be that easy
in Elm
• Move things around, get
everything to compile, done
Slide 41
Slide 41 text
Questions?
Slide 42
Slide 42 text
Ecosystem
Slide 43
Slide 43 text
Elm ecosystem
• Package manager enforces semantic versioning
Slide 44
Slide 44 text
Elm ecosystem
• Package manager enforces semantic versioning
• API design is extremely thoughtful
Slide 45
Slide 45 text
Elm ecosystem
• Package manager enforces semantic versioning
• API design is extremely thoughtful
• Awesome tooling!
Bonus Elm Goodies
Elm Search
Elm CSS
Style Elements
Slide 55
Slide 55 text
Questions?
Slide 56
Slide 56 text
My story with Elm
Slide 57
Slide 57 text
My final sales pitch
• Welcoming community
• Lots of effort to making concepts accessible
• Easy to use it gradually
• Will make you a better JavaScript developer
• Developing with Elm is fun!