Functional Principles in React (and Elm)

React and Flux embody some principles of functional programming. Understand these, and we can use them even more.

Given at React Rally, 24 August 2015

Transcript

1. Functional Principles React Rally, 23 August 2015 in @jessitron React! Elm and
2. @jessitron Not a Front-End Dev
3. Facebook @adamjernst http://www.infoq.com/presentations/fp-facebook- mobile-apps
11. Functional Programming the technique
12. Functional Programming { { } } the technique
13. Functional Programming { { } } } { the technique
14. Functional Programming { { } } } { the technique
15. Functional Programming { { } } } { the technique
16. Functional Programming { { } } } { the technique
17. Functional Programming the philosophy
18. Functional Programming the philosophy Declarative Style Composition Flow of Data Isolation
19. Declarative Style Composition Flow of Data Isolation
20. React Flux Elm pattern libraries typed, functional language library pattern
21. { } <> act 1 minute of Re
22. { } <> act 1 minute of Re
23. act 1 minute of Re
24. C mposition o
25. image text C mposition o
26. image text ad C mposition o
27. image text ad C mposition o
28. image text ad
29. image text ad
30. image text ad
31. image propTypes = { width: React.PropTypes.number, img: CustomPropTypes.url.isRequired, link: CustomPropTypes.url }
32. image type alias Model = { width: Maybe Int, img: Url, link: Maybe Url } Elm
33. code compile *.elm elm.js run Elm
34. undefined
37. Declarative Style say what we want let the robots make it so
39. props state virtual DOM
40. props state virtual DOM In, Out Data Data
41. In, Out Data Data
42. access outside state change the world modify its input Never Never Never In, Out Data Data
43. doesn't matter how many times it's called same result every time In, Out Data Data
44. Isolation
45. Isolation
46. Isolation
50. options.unshift("")
52. Immutable Data
53. Immutable
54. Immutable In, Out Data Data
55. Tie our hands To free our minds Immutable In, Out Data Data
56. "Re C About asoning ode"
57. "Re C About asoning ode" Predicting what it will do in all situations not just this one I'm debugging or this one example test.
59. componentDidMount componentWillReceiveProps componentDidUpdate
60. 1 minute of lux F
61. low of ata F D
62. Html Model Action Elm
63. Html Model Action Effects
64. update view init
65. update view init
66. update view init Model Action
68. update view init Model Action type alias Model = { recentEvents : List Event, highlight : Maybe EventActor }
69. update view init Model Action init: Model init = { recentEvents = [], highlight = Nothing }
70. update view init Model Action update action model = case action of SingleEvent event -> { model | recentEvents <- event : } PersonOfInterest actor -> { model | highlight <- Just actor }
71. update view init
72. update view init view addr model = Html.div [ ] [ Header.view model.repo, RepoInput.view, EventTicker.view addr mode SeeThePeople.view addr mod ]
73. update view init ? main
74. update view init componentDidMount componentWillReceiveProps componentDidUpdate
75. elm-lang.org Evan Czaplicki
76. elm-lang.org Evan Czaplicki
77. Declarative Style Composition Flow of Data Isolation
78. when in act propTypes immutable data Flux, or better: Redux all service calls in one place re
79. @jessitron https://github.com/jessitron/elm-sydron