Get rid of runtime exceptions with Elm

Presented at - Frontend Meetup Riga #9

Transcript

1. GET RID OF RUNTIME ERRORS ON FRONTEND WITH ELM
2. JANIS MIEZITIS Software Engineer @ Diatom Enterprises
 
 Blog: http://janjiss.com
 Twitter: @janjiss
 Github: @janjiss
3. WHAT IS ELM? ELM is purely functional, immutable and domain specific language language, and is developed with emphasis on usability, performance, and robustness. ELM’s compiler catches all possible runtime exceptions. 
 It’s syntax is heavily inspired by Haskell, OCaml and ML.
4. WHAT WOULD LANGUAGE WITHOUT RUNTIME ERRORS LOOK LIKE?
5. LET’S WRITE OUR FIRST TWO FUNCTIONS Return type Argument type Last expression is a return value
6. PARTIAL APPLICATION Note
 the Type Signature Difference
7. “In computer science, function composition is an act or mechanism to combine simple functions to build more complicated ones.” - Wikipedia
8. PIPES AND FUNCTION COMPOSITION
9. UNION TYPES
10. UNION TYPES WITH PAYLOAD Type payload Unwrap
 type
11. – Tony Hoare, 
 Principle designer of ALGOL 60 “I call it my billion-dollar mistake.”
13. ENTER MAYBE Generic type
14. – Joe Armstrong, 
 Creator of Erlang programming language “You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.”
15. MUTABILITY
16. IMMUTABILITY AND PURE FUNCTIONS
17. WHAT COULD GO WRONG HERE?
18. STRICT TYPING
19. Missing NotCompleted case
20. FRIENDLY COMPILER
21. WHOA! I MISSPELLED Misspelled “completed”
22. COMPILER TO THE RESCUE AGAIN
23. LET’S GET THIS OUT OF THE WAY
24. WHAT ABOUT SIDE EFFECTS?
25. HTML ELM
 Runtime Msg (?data) update Msg (?data) New Model Async event
26. HTTP CALL EXAMPLE
27. HOW DOES ELM INTEGRATE WITH JAVASCRIPT?
28. ELM PORTS
29. HTML IN ELM Attributes Children ELM function call that accepts model and returns Html Msg
30. LET’S COMPARE ELM React + Redux Both have: Virtual DOM Unidirectional data flow Differences: Strictly typed, pure language JavaScript :( Fully immutable No direct access to DOM Optional immutability (with libs) Access to vast ecosystem Has access to DOM if need be Small set of libraries No runtime errors No comment
31. WHO USES ELM? https://github.com/lpil/elm-companies And many more:
32. – Max Kanat-Alexander, Code Simplicity “The difference between a bad programmer and a good programmer is understanding. That is, bad programmers don’t understand what they are doing, and good programmers do. Believe it or not, it really is that simple.”