Functional Patterns for Beautiful Apps with Elm

Elm is a functional language that compiles to JavaScript. After several years of getting my mind used to thinking in object oriented terms, I discovered Elm and it was a big breath of fresh air.

But I quickly realised that I had to unlearn a great deal of "best practices" and "design patterns" native to today's most popular programming languages.

This talk explores the topic of thinking in Elm. How to translate the previous knowledge we have acquired when building applications into a purely functional language: How to deal with error conditions, concurrent updates and how to create delightful functional APIs are some of the questions this talk will try to answer.

Transcript

1. FOR BEAUTIFUL APPS FUNCTIONAL PATTERNS
2. IN ELM Oh… it’s Elm, not ELM
3. WHAT WENT WRONG FOR ME
4. WHAT WENT WRONG FOR ME Implementation of the observer pattern in Java. http://classicprogrammerpaintings.com
5. I BECAME SCARED OF PROGRAMMING. Composition over inheritance SOLID SRP Covariance Polymorphism Generics Singleton Inheritance? Dependency Injection DIC Service Locator HammerFactoryFactoryFactory Service Locator Interface “You’re doing it wrong” LSP Inversion of Control “That’s not really OOP”
6. THIS IS NOT FUN ANYMORE. Me, 2014 Despite following all the best practices I kept making dumb mistakes but also felt overwhelmed by them
7. THIS IS NOT FUN ANYMORE. Me, 2014 Despite following all the best practices I kept making dumb mistakes but also felt overwhelmed by them
8. ON A SUDDEN LOOK FOR FRESH AIR Then I found Elm
9. AND IT CERTAINLY LOOKED DELICIOUS.
11. } Like a class hierarchy, kind of?
12. } Like a class hierarchy, kind of? } No idea what this is, but seems like it updates a model?
13. } Like a class hierarchy, kind of? } No idea what this is, but seems like it updates a model? }This I can understand
14. } Like a class hierarchy, kind of? } No idea what this is, but seems like it updates a model? }This I can understand Oh, This is pretty cool!
18. “I WILL HAVE TO LEARN THINGS FROM SCRATCH”
19. BUT WAS IT REALLY LIKE LEARNING FROM SCRATCH? Because ain’t nobody got time for that!
20. THIS IS WHAT I NEEDED TO KNOW SO, FUNCTIONAL PROGRAMMING https://xkcd.com/849/
21. IT’S FUNCTIONS ALL THE WAY DOWN FUNCTIONS ARE JUST MAPPINGS ▸ A function maps an input to an output ▸ Functions can only do one thing: return the mapped value ▸ No accidental “launch ze missiles” in the dotted lines! “a” “dog” “zebra” “a cat” “b” “A” “Dog” “A Cat” “Zebra” “B”
22. IT’S FUNCTIONS ALL THE WAY DOWN FUNCTIONS ARE JUST MAPPINGS ▸ A function maps an input to an output ▸ Functions can only do one thing: return the mapped value ▸ No accidental “launch ze missiles” in the dotted lines! “a” “dog” “zebra” “a cat” “b” “A” “Dog” “A Cat” “Zebra” “B”
23. IT’S FUNCTIONS ALL THE WAY DOWN FUNCTIONS ARE JUST MAPPINGS ▸ A function maps an input to an output ▸ Functions can only do one thing: return the mapped value ▸ No accidental “launch ze missiles” in the dotted lines! “a” “dog” “zebra” “a cat” “b” “A” “Dog” “A Cat” “Zebra” “B” f string html
24. IT’S FUNCTIONS ALL THE WAY DOWN FUNCTIONS CAN DESCRIBE OPERATIONS ▸ Functions are declarative, what seems to be an operation, is just data describing how the operation should work ▸ First Pattern: Effects are “Things” (data) ▸ This data can be used (or not) to change the external world
25. IT’S FUNCTIONS ALL THE WAY DOWN FUNCTIONS ARE ALSO THINGS ▸ Functions can be passed as input or returned as output ▸ They have a life of their own, they are not attached to things like “classes”. They only add behaviour.
26. IT’S FUNCTIONS ALL THE WAY DOWN FUNCTIONS ARE ALSO THINGS ▸ Functions can be passed as input or returned as output ▸ They have a life of their own, they are not attached to things like “classes”. They only add behaviour. f f2
27. IT’S FUNCTIONS ALL THE WAY DOWN FUNCTIONS ARE ALSO THINGS ▸ Functions can be passed as input or returned as output ▸ They have a life of their own, they are not attached to things like “classes”. They only add behaviour. f f2 Pass an input to a function and get a function back!
28. IT’S FUNCTIONS ALL THE WAY DOWN FUNCTIONS ARE ALSO THINGS ▸ Functions can be passed as input or returned as output ▸ They have a life of their own, they are not attached to things like “classes”. They only add behaviour. f f2 f3 f2 Pass an input to a function and get a function back!
29. IT’S FUNCTIONS ALL THE WAY DOWN FUNCTIONS ARE ALSO THINGS ▸ Functions can be passed as input or returned as output ▸ They have a life of their own, they are not attached to things like “classes”. They only add behaviour. f f2 f3 f2 Or pass a function to another and get a value back Pass an input to a function and get a function back!
30. ISN’T THIS DEPENDENCY INJECTION?
31. DEPENDENCY INJECTION, FUNCTIONAL STYLE FIRST PATTERN: FUNCTIONS FOR DEPENDENCY INJECTION ▸ If things seem repetitive, just create new functions after injecting some of the arguments ▸ Corollary: The “interesting” argument of any function should always be the last one
32. FUNCTIONS ARE DEPENDENCY INJECTION TAKEN TO 11
33. DEPENDENCY INJECTION, FUNCTIONAL STYLE
34. DEPENDENCY INJECTION, FUNCTIONAL STYLE These are the kind of things that make functional programming scary
35. DEPENDENCY INJECTION, FUNCTIONAL STYLE LOOKS COMPLICATED HOW TO MAKE IT SIMPLER? These are the kind of things that make functional programming scary
36. DEPENDENCY INJECTION, FUNCTIONAL STYLE LOOKS COMPLICATED HOW TO MAKE IT SIMPLER? } Only these contain runtime data These are the kind of things that make functional programming scary
37. DEPENDENCY INJECTION, FUNCTIONAL STYLE LOOKS COMPLICATED HOW TO MAKE IT SIMPLER? }Identify parameters that are unlikely to change at runtime } Only these contain runtime data These are the kind of things that make functional programming scary
38. DEPENDENCY, FUNCTIONAL STYLE A NEAT STRATEGY.
39. DEPENDENCY, FUNCTIONAL STYLE } Here are the params we wanted to extract out. A NEAT STRATEGY.
40. DEPENDENCY, FUNCTIONAL STYLE } Here are the params we wanted to extract out. } We can now easily create a family of functions with different configurations A NEAT STRATEGY.
41. DEPENDENCY, FUNCTIONAL STYLE } Here are the params we wanted to extract out. } We can now easily create a family of functions with different configurations A NEAT STRATEGY.
42. DEPENDENCY, FUNCTIONAL STYLE } Here are the params we wanted to extract out. } We can now easily create a family of functions with different configurations A NEAT STRATEGY. But what are all those complicated type things?
43. TYPES, GOTTA LOVE THEM ALL! TYPES ARE UNIVERSES ▸ Types describe the universe of things: Universe of number, colours, actions… ▸ You can map from an universe to another using a function ▸ Types are very similar to functions in many aspects. For example they can be composed! ▸ In Elm, types are cheap to create and to compose
44. TYPES ARE THINGS IN THE REAL WORLD ELM HELPS YOU MODEL THE OUTSIDE WORLD, WITH TYPES
45. TYPES ARE THINGS IN THE REAL WORLD ELM HELPS YOU MODEL THE OUTSIDE WORLD, WITH TYPES } Types can also describe actions
46. TYPES ARE THINGS IN THE REAL WORLD ELM HELPS YOU MODEL THE OUTSIDE WORLD, WITH TYPES ▸ The compiler will guide on what to do you whenever you add another case to “Msg”. Time saver! } Types can also describe actions
47. TYPES ARE THINGS IN THE REAL WORLD ELM HELPS YOU MODEL THE OUTSIDE WORLD, WITH TYPES ▸ The compiler will guide on what to do you whenever you add another case to “Msg”. Time saver! ▸ Since the “cases” in a type are closed for extension, you are forced to use “composition over inheritance”. } Types can also describe actions
48. USING TYPES FOR MODELLING WILL GUIDE YOU WHEN REFACTORING
49. USING TYPES FOR MODELLING WILL GUIDE YOU WHEN REFACTORING
50. USING TYPES FOR MODELLING WILL GUIDE YOU WHEN REFACTORING
51. TYPES ARE THINGS IN THE REAL WORLD TYPES ARE THINGS IN THE REAL WORLD
52. TYPES ARE THINGS IN THE REAL WORLD TYPES ARE THINGS IN THE REAL WORLD } Only two types of currencies allowed
53. TYPES ARE THINGS IN THE REAL WORLD TYPES ARE THINGS IN THE REAL WORLD } Only two types of currencies allowed } Explicitly tell the world what types of accounts are possible
54. TYPES ARE THINGS IN THE REAL WORLD TYPES ARE THINGS IN THE REAL WORLD ▸ Types are great for representing your domain. } Only two types of currencies allowed } Explicitly tell the world what types of accounts are possible
55. TYPES ARE THINGS IN THE REAL WORLD TYPES ARE THINGS IN THE REAL WORLD ▸ Types are great for representing your domain. ▸ You can also use Types as documentation. Looking at signatures helps understand what’s possible. } Only two types of currencies allowed } Explicitly tell the world what types of accounts are possible
56. TYPES ARE THINGS IN THE REAL WORLD TYPES CAN ALSO REPRESENT STATES http://blog.jenkster.com/2016/06/how-elm-slays-a-ui-antipattern.html This helps us prevent showing a UI with stale or not relevant feedback to the user }
57. TYPES, GOTTA LOVE THEM ALL! WHAT’S THE RETURN TYPE OF THIS EXPRESSION?
58. TYPES, GOTTA LOVE THEM ALL! WHAT’S THE RETURN TYPE OF THIS EXPRESSION? What if it is empty?
59. TYPES, GOTTA LOVE THEM ALL! WHAT’S THE RETURN TYPE OF THIS EXPRESSION? What if it is empty? What if it is not a string?
60. TYPES, GOTTA LOVE THEM ALL! WHAT’S THE RETURN TYPE OF THIS EXPRESSION? What if it is empty? What if it is not an email? What if it is not a string?
61. TYPES, GOTTA LOVE THEM ALL! WHAT’S THE RETURN TYPE OF THIS EXPRESSION? What if it is empty? What if it is not an email? What if it is not a string?
62. TYPES, GOTTA LOVE THEM ALL! WHAT’S THE RETURN TYPE OF THIS EXPRESSION? What if it is empty? What if it is not an email? What if it is not a string? undefined something something
63. TYPES, GOTTA LOVE THEM ALL! ERROR HANDLING CAN GET UNWIELDY
64. TYPES, GOTTA LOVE THEM ALL! ERROR HANDLING CAN GET UNWIELDY And i’m only dealing with he happy path!
65. https://twitter.com/dr4goonis/status/476617165463105536
66. TYPES, GOTTA LOVE THEM ALL! SECOND PATTERN: USE TYPES TO REPRESENT ERRORS
67. TYPES, GOTTA LOVE THEM ALL! SECOND PATTERN: USE TYPES TO REPRESENT ERRORS Now we have a way to tell the good from the bad.
68. TYPES, GOTTA LOVE THEM ALL! SECOND PATTERN: USE TYPES TO REPRESENT ERRORS Now we have a way to tell the good from the bad. Result error result = This is a built-in type in Elm Err error | OK result
69. TYPES, GOTTA LOVE THEM ALL! SECOND PATTERN: USE TYPES TO REPRESENT ERRORS We wrap the success value in Ok Now we have a way to tell the good from the bad. Result error result = This is a built-in type in Elm Err error | OK result
70. TYPES, GOTTA LOVE THEM ALL! SECOND PATTERN: USE TYPES TO REPRESENT ERRORS We wrap the success value in Ok And the error value in Err Now we have a way to tell the good from the bad. Result error result = This is a built-in type in Elm Err error | OK result
71. TYPES, GOTTA LOVE THEM ALL! TYPES HELP LINEARISE LOGIC FLOWS
72. TYPES, GOTTA LOVE THEM ALL! TYPES HELP LINEARISE LOGIC FLOWS Ok track
73. TYPES, GOTTA LOVE THEM ALL! TYPES HELP LINEARISE LOGIC FLOWS Ok track
74. TYPES, GOTTA LOVE THEM ALL! TYPES HELP LINEARISE LOGIC FLOWS Ok track
75. TYPES, GOTTA LOVE THEM ALL! TYPES HELP LINEARISE LOGIC FLOWS Ok track
76. TYPES, GOTTA LOVE THEM ALL! TYPES HELP LINEARISE LOGIC FLOWS Ok track
77. TYPES, GOTTA LOVE THEM ALL! TYPES HELP LINEARISE LOGIC FLOWS Ok track
78. TYPES, GOTTA LOVE THEM ALL! TYPES HELP LINEARISE LOGIC FLOWS Ok track Error track
79. TYPES, GOTTA LOVE THEM ALL! TYPES HELP LINEARISE LOGIC FLOWS Ok track Error track
80. TYPES, GOTTA LOVE THEM ALL! TYPES HELP LINEARISE LOGIC FLOWS Ok track Error track
81. TYPES, GOTTA LOVE THEM ALL! TYPES HELP LINEARISE LOGIC FLOWS Ok track Error track
82. TYPES, GOTTA LOVE THEM ALL! TYPES HELP LINEARISE LOGIC FLOWS Ok track Error track
83. TYPES, GOTTA LOVE THEM ALL! TYPES HELP LINEARISE LOGIC FLOWS Most processing flows can be done with this two-tracked “Railway” Ok track Error track
84. MAKING IMPOSSIBLE THINGS IMPOSSIBLE REMEMBER THIS? Wouldn’t it be better to make this case impossible from the start?
85. MAKING IMPOSSIBLE THINGS IMPOSSIBLE REMEMBER THIS? What if the money is in a different currency than the account? Wouldn’t it be better to make this case impossible from the start?
86. MAKING IMPOSSIBLE THINGS IMPOSSIBLE THIRD PATTERN: MAKE IMPOSSIBLE THINGS IMPOSSIBLE
87. MAKING IMPOSSIBLE THINGS IMPOSSIBLE THIRD PATTERN: MAKE IMPOSSIBLE THINGS IMPOSSIBLE }
88. MAKING IMPOSSIBLE THINGS IMPOSSIBLE THIRD PATTERN: MAKE IMPOSSIBLE THINGS IMPOSSIBLE } c can be anything, in our case, USD or EUR
89. MAKING IMPOSSIBLE THINGS IMPOSSIBLE THIRD PATTERN: MAKE IMPOSSIBLE THINGS IMPOSSIBLE } c can be anything, in our case, USD or EUR
90. MAKING IMPOSSIBLE THINGS IMPOSSIBLE THIRD PATTERN: MAKE IMPOSSIBLE THINGS IMPOSSIBLE We “parametrised” the type Money. } c can be anything, in our case, USD or EUR
91. MAKING IMPOSSIBLE THINGS IMPOSSIBLE THIRD PATTERN: MAKE IMPOSSIBLE THINGS IMPOSSIBLE We “parametrised” the type Money. } c can be anything, in our case, USD or EUR
92. MAKING IMPOSSIBLE THINGS IMPOSSIBLE THIRD PATTERN: MAKE IMPOSSIBLE THINGS IMPOSSIBLE We “parametrised” the type Money. } c can be anything, in our case, USD or EUR
93. MAKING IMPOSSIBLE THINGS IMPOSSIBLE THIRD PATTERN: MAKE IMPOSSIBLE THINGS IMPOSSIBLE We “parametrised” the type Money. } c can be anything, in our case, USD or EUR
94. MAKING IMPOSSIBLE THINGS IMPOSSIBLE THIRD PATTERN: MAKE IMPOSSIBLE THINGS IMPOSSIBLE We “parametrised” the type Money. } c can be anything, in our case, USD or EUR }
95. MAKING IMPOSSIBLE THINGS IMPOSSIBLE THIRD PATTERN: MAKE IMPOSSIBLE THINGS IMPOSSIBLE We “parametrised” the type Money. The parameter c “infects” other types using it. } c can be anything, in our case, USD or EUR }
96. MAKING IMPOSSIBLE THINGS IMPOSSIBLE THIRD PATTERN: MAKE IMPOSSIBLE THINGS IMPOSSIBLE We “parametrised” the type Money. The parameter c “infects” other types using it. } c can be anything, in our case, USD or EUR }
97. MAKING IMPOSSIBLE THINGS IMPOSSIBLE THIRD PATTERN: MAKE IMPOSSIBLE THINGS IMPOSSIBLE We “parametrised” the type Money. The parameter c “infects” other types using it. If all the c’s are not of the same type, the program will not compile! } c can be anything, in our case, USD or EUR }
98. MAKING IMPOSSIBLE THINGS IMPOSSIBLE THIRD PATTERN: MAKE IMPOSSIBLE THINGS IMPOSSIBLE We “parametrised” the type Money. The parameter c “infects” other types using it. If all the c’s are not of the same type, the program will not compile! This is safe to do now } c can be anything, in our case, USD or EUR }
99. COMPILERS BE LIKE
100. COMPILERS BE LIKE
101. PROVIDING IMPLEMENTATIONS DATA IS DATA, FUNCTIONS ARE BEHAVIOUR ▸ Whereas in OOP internals are encapsulated, in Functional programming we often expose them. ▸ Types represent the data, functions operating on types provide the behaviour. ▸ Functions in any module can provide more behaviour to any type of data. List f ?? Date f ?? String -> Date f ??
102. STRATEGY PATTERN, FUNCTIONAL STYLE FOURTH PATTERN: BE GENERIC
103. STRATEGY PATTERN, FUNCTIONAL STYLE FOURTH PATTERN: BE GENERIC
104. STRATEGY PATTERN, FUNCTIONAL STYLE FOURTH PATTERN: BE GENERIC
105. STRATEGY PATTERN, FUNCTIONAL STYLE FOURTH PATTERN: BE GENERIC
106. STRATEGY PATTERN, FUNCTIONAL STYLE FOURTH PATTERN: BE GENERIC
107. STRATEGY PATTERN, FUNCTIONAL STYLE STRATEGY PATTERN, FUNCTIONAL STYLE Use types instead of interfaces!
108. STRATEGY PATTERN, FUNCTIONAL STYLE STRATEGY PATTERN, FUNCTIONAL STYLE Use types instead of interfaces!
109. STRATEGY PATTERN, FUNCTIONAL STYLE STRATEGY PATTERN, FUNCTIONAL STYLE Use types instead of interfaces!
110. STRATEGY PATTERN, FUNCTIONAL STYLE STRATEGY PATTERN, FUNCTIONAL STYLE Use types instead of interfaces!
111. BUT WHAT ABOUT MONADS, MONOIDS AND FUNCTORS…??? Me, constantly Elm made functional programming easy to understand for me. The scary terminology is gone, but the great ideas they express are there
112. THANKS FOR ATTENDING! @jose_zap https://www.xkcd.com/1312/