Functional Programming in FrontEnd

Let's see how the ideas from functional programming, more specifically laziness, can be applied to frontend development

Transcript

1. 1986 1
6. David Hilbert 6
7. David Hilbert 7
8. David Hilbert 8
9. Kurt Gödel 9
10. Kurt Gödel 10
11. "This statement is not provable" 11
12. Is the Entscheidungsproblem decidable? What is decidable? 12
13. Alonzo Church 13
14. Alonzo Church 14
15. Kurt Gödel 15
16. Kurt Gödel 16
17. Alan Turing 17
18. Alan Turing 18
19. Church-Turing equivalence 19
20. One problem, three equivalent solu4ons 20
21. Lambda Calculus L, M, N := x | (lambda x. N) | (L M) 21
22. Booleans? If? Else? NUMBERS?? 22
23. Booleans true x y = x false x y = y 23
24. If then else ifte bool t e = bool t e 24
25. And and p q = p q p and true false = true false true and false true = false true false ... 25
26. Or or p q = p p q or true false = true true false or false false = false false false 26
27. We can build any construct with lambda calculus But how do we encode numbers? 27
28. zero f x = x one f x = f x two f x = f ( f x ) three f x = f ( f ( f x ) ) ... > two (+1) 0 2 28
29. Addi$on add m n f x = m f (n f x) > add one two (+1) 0 3 29
30. Mul$plica$on mul m n f x = m (n f) x > add one (mul two two) (+1) 0 5 30
31. Remember, this is the 1940's • Computers were actual people • No compilers • No programming language 31
32. John McCarthy (1960's) 32
33. LISP (LABEL FACT (LAMBDA (N) (COND ((ZEROP N) 1) (T (TIMES N (FACT SUB1 N)))))) 33
34. 1960s - 1990s • Lots of programming languages • Many them were func7onal • Li8le collabora7on 34
35. 1990s - Paul Hudak 35
36. Haskell Curry 36
37. Haskell (1990) 37
38. Lazy evalua*on The value is infinite > take 20 [1..] [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] 38
39. Mapping on inifite list > take 20 $ map (+1) [1..] [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21] 39
40. All the itera*ons of a func*on iterate f x = [x, f x, f (f x), ...] take 5 $ iterate (*3) 1 [1,3,9,27,81] 40
41. Expressiveness How to model UI like this? 41
42. Expressiveness • Inifinite list of events • Define func1ons to be applied to those events • Result is an infinite list of side effects 42
43. Advantages • No callbacks • Pure func1ons • Handling 1me variant instead of event based 43
44. Elm lift : (a -> b) -> Signal a -> Signal b lift isConsonant Keyboard.lastPressed 44
45. Elm foldp : (a -> b -> b) -> b -> Signal a -> Signal b foldp (\key count -> count + 1) 0 Keyboard.lastPressed 45
46. Since Elm 0.17, there are no more signals Farewell Func+onal Reac+ve Programming: h5p:/ /elm-lang.org/ blog/farewell-to-frp 46
47. Let's build a Flappy Bird game • Generate pipes every X seconds • Handle the key pressed event • Handle colision • Have a live scoreboard 47
48. Elm Subscrip-ons • Replacement of Signals • Generate messages 48
49. Elm Subscrip-ons subscriptions : Game -> Sub Msg subscriptions model = Sub.batch [ AnimationFrame.diffs TimeUpdate , Keyboard.downs KeyDown , Time.every Time.second AskForTopPlayers , Time.every (Time.second * 2) GeneratePipe , Phoenix.Socket.listen model.phxSocket PhoenixMsg ] 49
50. Elm Subscrip-ons subscriptions : Game -> Sub Msg subscriptions model = Sub.batch [ AnimationFrame.diffs TimeUpdate , Keyboard.downs KeyDown , Time.every Time.second AskForTopPlayers , Time.every (Time.second * 2) GeneratePipe , Phoenix.Socket.listen model.phxSocket PhoenixMsg ] 50
51. Elm Subscrip-ons subscriptions : Game -> Sub Msg subscriptions model = Sub.batch [ AnimationFrame.diffs TimeUpdate , Keyboard.downs KeyDown , Time.every Time.second AskForTopPlayers , Time.every (Time.second * 2) GeneratePipe , Phoenix.Socket.listen model.phxSocket PhoenixMsg ] 51
52. Elm • Subscrip*ons generate messages • User can generate messages (click bu7on) • State transforma*on through messages 52
53. Elm update : Msg -> Game -> ( Game, Cmd Msg ) update msg game = case game.state of Play -> case msg of AskForTopPlayers _ -> ... SendScore -> ... KeyDown keyCode -> ... GeneratePipe _ -> ... 53
54. Elm view : Game -> Html Msg view model = div [] [ text (toString game) ] 54
56. Summary • Func&onal programming is invented, not discovered • Are you using a programming language that is invented? • Expressiveness by design 56
57. Thank you Twi$er: @paulodiniz Github: paulodiniz I like beers, let's have one a2er! ! 57