Runtime errors, we all know them and we all dislike them. Luckily why we now have Elm. Elm represents simplicity, pure functional programming and clearly indicated error descriptions. With Elm you discover a complete new way to approach frontend programming. Web version of the slides: https://jordymoos.github.io/Talk-Elm-the-runtime-error-killer/

1. ELM, THE RUNTIME
ERROR KILLER

8. 50 000 LINES OF ELM CODE
0 RUNTIME EXCEPTIONS

9. 100 000 LINES OF ELM CODE
0 RUNTIME EXCEPTIONS

12. ELM, THE RUNTIME
ERROR KILLER

13. What is Elm
The syntax
Type system
Architecture
Tools provided by Elm
repl
reactor
make
package

14. HELLO ELM!
Syntax
Elm-repl
Types
Currying

15. BUTTONS
Interactive
Architecture
Elm-Reactor

16. WEBSOCKETS
More Architecture
Pure Functional
Commands
Subscriptions

17. WHAT IS ELM?

18. “Elm is a domain-speci c programming
language for declaratively creating web
browser-based graphical user interfaces.
Elm is purely functional, and is developed
with emphasis on usability, performance,
and robustness.
It advertises "no runtime exceptions in
practice," made possible by the Elm
compiler's static type checking.”

19. ELM CHARACTERISTICS
Pure Functional language
All functions are curried
Elm is strongly typed
All values are immutable
Elm is fast

20. HELLO ELM EXAMPLE

32. function add(x) {
return function (y) {
return x + y;
}
}
add(5)(10) // Returns 15
let addFive = add(5)
addFive(10) // Returns 15
addFive(3) // Returns 8

37. QUICK RECAP
Elm application starts at the function main
Function application by spaces
Elm does not need "return"
The last part of the function type is the return type
All functions in Elm are curried
Use the repl to play with functions and types
The compiler is your friend

38. BUTTONS EXAMPLE

40. program updateview

41. program updateview
Model

42. program updateview

43. program updateview
"User clicks +"

44. program updateview
"User clicks +"
Produces "Increment" message

45. program updateview
"User clicks +"
Produces "Increment" message

46. program updateview
"User clicks +"
Produces "Increment" message

47. program updateview
"User clicks +"
Produces "Increment" message

48. program updateview
"User clicks +"
Produces "Increment" message

49. program updateview
"User clicks +"
Produces "Increment" message

50. program updateview
"User clicks +"
Produces "Increment" message

51. program updateview
"User clicks +"
Produces "Increment" message

52. program updateview
"User clicks +"
Produces "Increment" message

53. program updateview
"User clicks +"
Produces "Increment" message

54. program updateview
"User clicks +"
Produces "Increment" message

63. QUICK RECAP
Elm logic is broken into: Model, view and update
Messages are data
Changes in the model are caused by messages
The elm reactor allows for easy development

64. WEBSOCKETS EXAMPLE

69. QUICK RECAP
Elm is pure functional
Cmd: Tell elm "engine" to do something
Sub: Listen to events in the Elm "engine"

70. WHEN TO USE ELM?
Whenever you can use React / Angular / Ember / Etc
Fullscreen / Just this element
Elm can communicate with javascript

71. QUICK RECAP ON THE TOOLS
elm-make is the compiler (and your friend)
elm-repl lets you play with elm functions
elm-reactor is a tool for easy development
elm-package to install (and push) elm modules

72. WHERE TO GO FROM HERE
elm-lang.org
elm-lang.org/try
package.elm-lang.org
play with the elm-repl
(Re)write something in elm!

73. ADDITIONAL READS
elm-tutorial.org
elm-news.com
Elm slack chat

74. PLEASE RATE ME ON JOIND.IN
https://joind.in/talk/57ccb

75. THANK YOU