Introduction into Elm

Introduction into Elm

Elm is a functional programming language that compiles into Javascript. It is well suited for interactive web applications written in a functional and declarative way. It enables you to write more robust applications through its static types without runtime errors.

Martin will give an introduction into Elm and a walk through on how to structure an application in accordance to The Elm Architecture.

Video:https://youtu.be/1iObbiyvCJg

=====================================================
Follow us and join our Slack community:

- ReactJS Norway's site: http://bit.ly/2ka4hC8
- Facebook: http://bit.ly/2kxmHxW
- Instagram: http://bit.ly/2kpysnJ
- Twitter: http://bit.ly/2kaehvl
- Youtube: http://bit.ly/2kANuJl
- Slack Community: https://goo.gl/YwUUKJ

Transcript

1. Introduction to Elm
2. Martin Rechsteiner @rechsteiner
4. We’re hiring! Senior mobile developer Oslo & Trondheim Front-end developer Oslo & Trondheim
8. Humans make mistakes
10. A functional language that compiles to JavaScript
13. Focus on user experience
14. Elm is very opinionated
15. function add(a, b) { 
 return a + b; 
 } 
 
 
 add(2, 1); // 3 
 
 Function name add a b = a + b 
 
 
 add 2 1 -- 3 
 
 Arguments JS Elm Implicit return add : Int -> Int -> Int Return type
16. import Html exposing (text) 
 
 main = text "Hello world" 
 
 Hello world
17. Virtual DOM elm-html
18. headerView task = 
 header 
 [ class "header" ] 
 [ h1 [] [ text "todos" ] 
 , input 
 [ class "new-todo" 
 , placeholder "What needs to be done?" 
 , autofocus True 
 , value task 
 , name "newTodo" 
 , onInput UpdateField 
 , onEnter Add 
 ] 
 [] 
 ] 
 

19. headerView task = 
 header 
 [ class "header" ] 
 [ h1 [] [ text "todos" ] 
 , input 
 [ class "new-todo" 
 , placeholder "What needs to be done?" 
 , autofocus True 
 , value task 
 , name "newTodo" 
 , onInput UpdateField 
 , onEnter Add 
 ] 
 [] 
 ] 
 

20. headerView task = 
 header 
 [ class "header" ] 
 [ h1 [] [ text "todos" ] 
 , input 
 [ class "new-todo" 
 , placeholder "What needs to be done?" 
 , autofocus True 
 , value task 
 , name "newTodo" 
 , onInput UpdateField 
 , onEnter Add 
 ] 
 [] 
 ] 
 

21. All functions are stateless
22. function add(a, b) { return a + b; 
 } Side-effects
23. function add(a, b) { 
 window.add = undefined; 
 return a + b; 
 } Side-effects add(2, 1); // 3 add(2, 1);
24. Uncaught TypeError: undefined is not a function
25. No runtime exceptions!
26. Elm is all about guarantees
27. All data is immutable
28. point = { x = 3, y = 4 } 
 
 
 updatePoint point = 
 { point | x = 5 } -- { x = 5, y = 4 } 
 
 Record type
29. Static typing Strong type system Type inference (you don’t have to explicitly write your types)
30. point = { x = 3, y = 4 } 
 
 
 updatePoint point = 
 { point | x = 5 } -- { x = 5, y = 4 } 
 

31. point : { x : Int, y : Int } point = { x = 3, y = 4 } 
 
 
 updatePoint : { x : Int, y : Int } -> { x : Int, y : Int } 
 updatePoint point = 
 { point | x = 5 } Type signature for a point
32. updatePoint : { x : Int, y : Int } -> { x : Int, y : Int } 
 updatePoint point = 
 { point | x = 5 } updatePoint : Point -> Point 
 updatePoint point = 
 { point | x = 5 } 
 
 
 point : { x : Int, y : Int } point = { x = 3, y = 4 } 
 
 
 type alias Point = 
 { x : Int, y : Int } point : Point point = { x = 3, y = 4 } 

33. The compiler will guide you
34. Friendly error messages
35. listView tasks = 
 ul [] (List.nap taskView tasks) 
 
 
 
 taskView task = 
 li [] [ text task.name ] 

36. -- NAMING ERROR ------------------------------------------------------ error.elm Cannot find variable `List.nap`. 17| ul [] (List.nap taskView tasks) ^^^^^^^^ `List` does not expose `nap`. Maybe you want one of the following? List.map List.any List.map2 List.map3
37. 
 
 main = 
 listView [ { name = 0 } ] listView tasks = 
 ul [] (List.map taskView tasks) 
 
 
 
 taskView task = 
 li [] [ text task.name ] 

38. -- TYPE MISMATCH ----------------------------------------------------- error.elm The argument to function `listView` is causing a mismatch. 20| listView [ { name = 0 } ] ^^^^^^^^^^^^^^^^ Function `listView` is expecting the argument to be: List { name : String } But it is: List { name : number } Hint: Problem in the `name` field. I always figure out field types in alphabetical order. If a field seems fine, I assume it is "correct" in subsequent checks. So the problem may actually be a weird interaction with previous fields.
39. No concept of null
40. type CompassPoint 
 = North 
 | South 
 | East 
 | West 
 
 Union types type User 
 = Anonymous 
 | Named String 

41. type Maybe a 
 = Just a 
 | Nothing 
 
 Generic type Maybe
42. type alias Task = 
 { name : String 
 , description : Maybe String 
 } 
 
 Can either have an description or nothing descriptionView : Task -> String 
 descriptionView task = 
 case task.description of 
 Just description -> 
 description
43. -- MISSING PATTERNS -------------------------------------------------- error.elm This `case` does not have branches for all possibilities. 12|> case task.description of 13|> Just description -> 14|> description You need to account for the following values: Maybe.Nothing Add a branch to cover this pattern!
44. type alias Task = 
 { name : String 
 , description : Maybe String 
 } 
 
 descriptionView : Task -> String 
 descriptionView task = 
 case task.description of 
 Just description -> 
 description 
 Nothing -> 
 “No description” 

45. Refactor with confidence
46. A great package manager
47. The Elm Architecture model-view-update
48. Model Update View Message + state = new state Application state View for current state Message
49. type alias Model = 
 { count : Int 
 } 
 type Msg 
 = Increment 
 | Decrement update : Msg -> Model -> Model 
 update msg model = 
 case msg of 
 Increment -> 
 { model | count = model.count + 1 } 
 
 Decrement -> 
 { model | count = model.count - 1 } view : Model -> Html Msg 
 view model = 
 div [ class "counter" ] 
 [ button [ onClick Decrement ] [ text "-" ] 
 , text (toString model.count) 
 , button [ onClick Increment ] [ text "+" ] 
 ] 

50. Model Update View Model Update View Model Update View
51. What can we learn from Elm?
52. flowtype.org typescriptlang.org Enable strict null checks
53. type AddTodo = { type: "ADD_TODO", id: number, title: string }; 
 type ToggleTodo = { type: "TOGGLE_TODO", id: number }; function todos(state: State, action: Action): State { 
 switch (action.type) { 
 case "ADD_TOOD": 
 ... 
 case "TOGGLE_TODO": 
 ... 
 } 
 } type Action = AddTodo | ToggleTodo; 
 Typo Typed Redux
54. ERROR in ./stores/todos.ts (12,12): error TS2678: Type '"ADD_TOOD"' is not comparable to type '"ADD_TODO" | "TOGGLE_TODO"'.
55. type AddTodo = { type: "ADD_TODO", id: number, title: string }; 
 type ToggleTodo = { type: "TOGGLE_TODO", id: number }; 
 
 type Action = AddTodo | ToggleTodo; 
 
 function todos(state: State, action: Action): State { 
 switch (action.type) { 
 case "ADD_TODO": 
 ... 
 case "TOGGLE_TODO": 
 ... 
 } 
 } 
 
 Typed Redux
56. type AddTodo = { type: "ADD_TODO", id: number, title: string }; 
 type ToggleTodo = { type: "TOGGLE_TODO", id: number }; type ShowCompleted = { type: "SHOW_COMPLETED" }; 
 type Action = AddTodo | ToggleTodo; 
 
 function todos(state: State, action: Action): State { 
 switch (action.type) { 
 case "ADD_TODO": 
 ... 
 case "TOGGLE_TODO": 
 ... 
 } 
 } 
 Typed Redux
57. type AddTodo = { type: "ADD_TODO", id: number, title: string }; 
 type ToggleTodo = { type: "TOGGLE_TODO", id: number }; type ShowCompleted = { type: “SHOW_COMPLETED" }; 
 type Action = AddTodo | ToggleTodo | ShowCompleted; 
 
 function todos(state: State, action: Action): State { 
 switch (action.type) { 
 case "ADD_TODO": 
 ... 
 case "TOGGLE_TODO": 
 ... 
 } 
 } 
 Typed Redux
58. ERROR in ./stores/todos.ts (11,61): error TS2366: Function lacks ending return statement and return type does not include 'undefined'.
59. -- MISSING PATTERNS -------------------------------------------------- error.elm This `case` does not have branches for all possibilities. 16|> case msg of 17|> AddTodo -> 18|> model 19|> 20|> ToggleTodo -> 21|> model You need to account for the following values: Main.ShowCompleted Add a branch to cover this pattern!
60. Want to learn more? elm-lang.org/ github.com/eggsdesign/elm-meetup
61. meetup.com/oslo-elm-meetup/
62. Thank you! @rechsteiner