-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathFP.html
267 lines (229 loc) · 8.86 KB
/
FP.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Functional programming</title>
<meta name="author" content="Petr Šnobelt">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/theme/white.css" id="theme">
<!-- <link rel="shortcut icon" href="https://reasonml.github.io/favicon.ico"> -->
<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/print/' + (window.location.search.match(/print-pdf/gi) ? 'pdf' : 'paper') + '.css" type="text/css" media="print">');
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background-color="white">
<header alt="Functional Programming">
<img src="https://juan-medina.com/assets/img/Functional-Prog.png" style="border:none" width="50%" />
</header>
<p>
<small>
<a href="mailto:petr.snobelt@gmail.com">Petr Šnobelt</a> |
<a href="http://twitter.com/petrsnobelt">@petrsnobelt</a>
</small>
</p>
</section>
<section data-background-color="white">
<header alt="Functional Programming">
<img src="https://cdn-images-1.medium.com/max/2000/1*AM83LP9sGGjIul3c5hIsWg.png" style="border:none" />
</header>
<p>
My way to functional programming
</p>
</section>
<section>
<img src="fp/FP.png" />
</section>
<section>
<img src="fp/OOP.png" width="90%" />
</section>
<section>
<img src="fp/SolidvsFP.png" width="90%" />
</section>
<section data-markdown>
<script type="text/template">
## languages
- Haskel
- Clojure
- ReasonML (OCaml)
- Elm
- Scala, Kotlin
- F#
- C# 🤔 (LINQ) <!-- .element: class="fragment" -->
- JS 😱🙈😋 <!-- .element: class="fragment" -->
</script>
</section>
<section>
<section data-markdown>
<script type="text/template">
## strongType vs weakType
- Strong: Elm, Reason, Haskel,
- Weak: JS, Python, Clojure
- Js with types: TypeScript, FlowTypes
- Difference between inside only and interaction with outer world (Json > GraphQL)
</script>
</section>
<section data-markdown>
<script type="text/template">
### Types are not classes
- Compare by value vs by reference
- Consider using struct in c#
</script>
</section>
</section>
<section>
<h2>Procedural programming</h2>
<blockquote class="fragment"><small>
<a href="https://stackoverflow.com/questions/23277/what-is-the-difference-between-procedural-programming-and-functional-programming">
Procedural languages tend to keep track of state (using variables) and tend to execute as a sequence of steps.
<br />
<br />
Purely functional languages don't keep track of state, use immutable values, and tend to execute as a series of dependencies.
</a>
</small>
</blockquote>
</section>
<section
data-background-image="fp/Dijkstra-vs-AlanKey.png"
data-background-size="80%"
></section>
<section data-markdown>
<script type="text/template">
## CORE/BASIC concepts of FP
</script>
</section>
<section data-markdown>
<script type="text/template">
### Variables
- There are no variables in FP, all variables should be considered as constants
- In JS - ImmutableJS, <a href="https://ramdajs.com">Ramda</a> or at least
const newState = {...prevprops, newprop}
const newArray = [].concat(arr, val)
- On Web - concept of Om Atom/SingleStore (Redux)
</script>
</section>
<section data-markdown>
<script type="text/template">
### Pure functions
- Act ONLY based on input parameters
- Will ALWAYS produce same output for same input
- Can be memoized
- Have NO SIDEEFFECTS
</script>
</section>
<section>
<img src="fp/PureFunction.png" width="90%" />
</section>
<section data-markdown>
<script type="text/template">
### Function as First class citizen
- Can be used as parameter
- Standalone thing, not attached to a class (module contain functions)
// Watch signature, no difference
const a = 1
const add = (a, b) => a + b
</script>
</section>
<section data-markdown>
<script type="text/template">
### Decorator pattern in FP
- Not a very good example, console.log in not pure
const loggingDecorator = (wrapped) => {
return function() {
console.log('Starting');
const result = wrapped.apply(this, arguments);
console.log('Finished');
return result;
}
}
</script>
</section>
<section data-markdown>
<script type="text/template">
- Currying (Partial application)
const add = a => b => a + b
const add10 = add(10)
console.log(add10(1)) //11
</script>
</section>
<section data-markdown>
<script type="text/template">
### Common functional functions
- For collections
- map, filter, reduce (fold)
- [Transducers](https://medium.com/@roman01la/understanding-transducers-in-javascript-3500d3bd9624)
- Lodash/FP, Ramda
</script>
</section>
<section data-markdown>
<script type="text/template">
### Other used patterns
- Pattern matching 🤨
- Destructuring assignment
const printCustomerName = ({firstName, lastName}) =>
console.log(`${firstName} ${lastName}`)
printCustomerName(customer)
- Composition
- Recursion
- use `map` instead of `for`
</script>
</section>
<section>
<h2>The main idea:</h2>
<h1>“Separate data from behavior“</h1>
<h3>🔥</h3>
</section>
<section>
<h2>GOL in FP JS</h2>
<h3>🤩</h3>
</section>
<section data-markdown>
<script type="text/template">
### Sources
- [fp-patterns](https://www.slideshare.net/ScottWlaschin/fp-patterns-buildstufflt) ❤️
- [video](https://www.youtube.com/watch?v=E8I19uA-wGY) please watch (at least first part)
- [Two Years of Functional Programming in JavaScript: Lessons Learned](https://hackernoon.com/two-years-of-functional-programming-in-javascript-lessons-learned-1851667c726)
- contain links to other sources
- [How js evolve to fp](https://www.sitepoint.com/lodash-features-replace-es6/)
</script>
</section>
<section>
<h2>Thank you</h2>
<br />
<h4>Petr Šnobelt
<br /> petr.snobelt@gmail.com
<br /> @petrsnobelt</h4>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/lib/js/head.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'concave', // default/cube/page/concave/zoom/linear/fade/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/lib/js/classList.js', condition: function () { return !document.body.classList; } },
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/plugin/markdown/marked.js', condition: function () { return !!document.querySelector('[data-markdown]'); } },
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/plugin/markdown/markdown.js', condition: function () { return !!document.querySelector('[data-markdown]'); } },
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/plugin/highlight/highlight.js', async: true, callback: function () { hljs.initHighlightingOnLoad(); } },
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/plugin/zoom-js/zoom.js', async: true, condition: function () { return !!document.body.classList; } },
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/plugin/notes/notes.js', async: true, condition: function () { return !!document.body.classList; } }
]
});
</script>
</body>
</html>