Elm for React developers

An intro to the Elm language and architecture, also showing ways to integrate Elm into a React/ Redux application.

Presented at: https://www.meetup.com/react-bucharest/events/238586263/

Sample code: https://github.com/zaboco/elm-and-react

Transcript

1. Elm for React developers (CC BY-ND 2.0) by jeremy_norbury
2. “A delightful language for reliable webapps.”
3. Functional Language Statically Typed Compiling to JavaScript
4. Looks like Haskell … but simpler
5. TEA (CC BY 2.0) by h0lydevil
6. Elm
7. Model Elm init
8. Model Html Elm view init
9. Model Html Elm view init Msg
10. Model Html Elm view init Msg update Msg
11. Looks familiar?
12. Looks familiar?
13. It gets even better
14. Model Html Elm view init Msg update Msg
15. Model Html Elm view init Msg update Msg Cmd
16. Model Html Elm view init Msg update Msg Cmd Cmd
17. Model Html Elm view init Msg update Msg World Cmd Cmd
18. Model Html Elm view init Msg update Msg World Cmd run Cmd Cmd
19. Model Html Elm view init Msg update Msg World Cmd run Cmd Cmd Msg
20. Model Html Elm view init Msg update Msg World Sub Msg Cmd run Cmd Cmd Msg
21. Runtime Errors (CC BY-NC-SA 2.0) by Leo Reynolds
22. But we have tests, right?
23. Yet sometimes it just happens…
24. At least the messages are helpful!
25. No undefined in Elm No null in Elm
26. Elm has Union Types
27. type Bool = True | False
28. type Maybe a = Nothing | Just a
29. type UserData = NotLoggedIn | LoggedIn User
30. Type inference name = “Joe"
31. name : String Type inference name = “Joe"
32. It’s a sort of test leftPad : Int -> Char -> String -> String
33. It’s a sort of test leftPad : Int -> Char -> String -> String leftPad count char original = -- implementation
34. # Runtime Errors in Elm
35. # Runtime Errors in Elm 0
36. === Static Types Compile Errors
40. Bonus Cyclic Dependencies
41. -- Draggable.elm import Draggable.Events -- Events/Draggable.elm import Draggable
43. SEMVER (CC BY 2.0) by seb314fr
44. It offers guarantees… (CC BY 2.0) by Arek Olek
45. It offers guarantees… (CC BY 2.0) by Arek Olek Theoretically…
46. Meanwhile in JS Land… (CC BY-SA 2.0) by andrew_cosand
47. Not possible in Elm Land
48. Enforced SEMVER
49. module Draggable.Events exposing ( onDragStart , onDragBy , onDragEnd , onClick , onMouseDown )
50. module Draggable.Events exposing ( onDragStart , onDragBy -- , onDragEnd , onClick , onMouseDown )
51. Diff makes it explicit
52. Still, I just feel like doing a today PATCH (CC BY-NC-ND 2.0) by Sunilkk
53. Tough luck!
54. Great…
55. …but our app is in React
56. Include Elm as a <Component /> import Elm from 'react-elm-components'; import { ElmApp } from ‘./build/elm.js'; <App> <Elm src={ElmApp} /> </App>
57. …but I need to send data to Elm
58. Add flags const flags = { url: API_URL} <App> <Elm src={ElmApp} flags={flags}/> </App>
59. …still, I need more inter-op
60. Use ports Cmd Sub
61. What if we already have reusable React components?
62. Use redux-elm-middleware Cmd Sub dispatch setState
63. Example https://github.com/zaboco/elm-and-react
64. Resources Oficial guide egghead.io course Elm-conf 2016 videos Elm town podcast
65. Thanks! @zaboco Bogdan Zaharia Developer @ Hootsuite