-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
242 lines (215 loc) · 11.1 KB
/
index.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to FunJS</title>
<meta name="description" content="Welcome slides for FunctionalJS">
<meta name="author" content="Matt Field">
<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="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<img src="lib/img/logo.png">
<aside class="notes">
This is FunctionalJS London
</aside>
</section>
<section>
<h1>Welcome!</h1>
<aside class="notes">
Welcome! First session, thanks for coming. Currently live-streaming on Google Plus
and YouTube. Talk briefly about why we started the meetup, what we plan to do &
what we're doing this evening. As you can tell from the name of the meetup, we're all about...
</aside>
</section>
<section>
<h1>Functional Programming</h1>
<h2>in JavaScript</h2>
<img src="lib/img/functional.png">
<aside class="notes">
Imagine we have people with a wide range of experience with FP so, at risk of
preaching to the choir but for the benefit of those who are new to FP, quickly go over
a few of the primary points of what FP means, without going into too much detail
</aside>
</section>
<section>
<h1>Wait, what?</h1>
<ul>
<li>Functions as primary abstraction - building blocks</li>
<li>Minimize side-effects</li>
<li>Immutability</li>
<li>Declarative vs imperative - processing flow of data</li>
</ul>
<aside class="notes">
First point might seem obvious, we do this all the time: create a construct we call
a function that may or may not take any arguments which performs some sort of computation.
But in realms of FP the definition of a function is mathmatical: mapping between values;
given a certain value to operate on, a function should always return the same result of
performing some operation every time it's called. Referential transparency.
Small function abstraction composed together to make more powerful abstractions.
Also very important is the idea of functions as values and as first-class: stores in variables,
passed into functions as arguments and returned from functions.
Immutability: mutability is a major cause of headaches and bugs particularly
in OOP, results in sprawling test suites where you try to check the state of a given value at a given time in
a program's execution. FP places emphasis on immutable values and operations that don't cause mutation.
If a value can't change, a whole class of problem disappears.
Minimize side-effects: control amount of state manipulation our programs peform, makes
programs far easier to test, debug and reason about e.g. using higher-order functions like
map rather than for loops, or controlling state by using recursion. We can focus on writing functions,
for example, that don't mutate state. Might sound pretty pointless to write a program that doesn't have
any side effects; we actually want something to happen! Differentiation to be made between our programs
actually accomplishing something and needed to maintain and mutate a lot of state in order to do it.
Switch from imperative to declarative. Imperative how the program should go about accomplishing something e.g. open a file,
check whether it exists, if it does, read it; check if it's empty, if it isn't read the first line
etc etc. Cements mutable state and step-by-step order of execution. Declarative: describing what the program
should accomplish, thinking about data flow and minimizing side-effects and mutable state.
</aside>
</section>
<section>
<h1>Also:</h1>
<ul>
<li>Lazy/delayed evaluation</li>
<li>Composition</li>
<li>Combinators</li>
<li>Functors</li>
<li>Applicatives</li>
<li>Monoids</li>
<li>Monads</li>
</ul>
<aside class="notes">
There's also some funkier-sounding concepts and structures like: lazy/delayed evaluation, being the idea
that code isn't evaluated unless it's actually needed. Languages like Haskell do this.
Composition: mentioned briefly already, that we can compose functions together.
Combinators: higher-order functions that act on other functions to produce functions.
There's one called the I (or Identity) combinator that just returns anything that's passed to it,
and there's the Y combinator which is what you use if you want to get funded.
Yes, there are also some pretty crazy-sounding parts of FP like functors, applicatives, monoids and, yes,
monads, too. These things are part of functional programming but where a lot of people may just lose
interest and think you need a CompSci degree or be a maths whiz to understand whats going on. Despite
having crazy names, the concepts they describe aren't too complicated. It's the same as any programming pattern:
once you know it, you start seeing it everywhere.
So this isn't an exhaustive list of FP obviously, but if you're interested by any of this, then you're
in the right place.
</aside>
</section>
<section>
<h1>JavaScript: The Best Parts</h1>
<aside class="notes">
Started meetup because we think that some of the best parts of JS are the functional parts.
</aside>
</section>
<section>
<h1>What'll the meetup cover?</h1>
<ul>
<li>Functional programming and it's application</li>
<li>Functional libraries e.g. Underscore/Lo-Dash, Functional.js, Bacon.js</li>
<li>AltJS languages: LiveScript, Roy, ClojureScript</li>
<li>...and more</li>
</ul>
<aside class="notes">
So what we'll be focussing on functional programming in JS and how we can apply it. Not simply an academic
exercise but FP has real practical benefits.
Might involve looking at functional libraries such as US/LoDash, functional.js by Oliver Steele, or something like
functional reactive programming with Bacon.js.
Also compile-to-JS languages that make FP in JS enjoyable and easier, such as
LiveScript (an indirect descendant of CS with a similar syntax), Roy by Brian McKenna (JS semantics with
features in common with static functional languages) and ClojureScript (Clojure's little brother with JS
interop)
</aside>
</section>
<section>
<h1>Submit a talk!</h1>
<h2>Drop us a line</h2>
<aside class="notes">
If you're interested in talking then grab either me or Tim for a chat or drop us an email
</aside>
</section>
<section>
<h1>Tonight:</h1>
<ul>
<li>JS == Scheme, Tommy Hall</li>
<li>FP Dojo</li>
</ul>
<aside class="notes">
@thattommyhall with a talk entitled "JS == Scheme".
Followed by a code dojo, where we'll split out into groups and look through an example
of how you might go about refactoring OO code into a functional style, with the goal of understanding
some real-world application of functional programming, learn from each and have some fun.
</aside>
</section>
<section>
<h1>Dojo</h1>
<p>Site generator for JSGarden</p>
<p>Original code has quite a bit of state - not required for a transform.<p>
</section>
<section>
<h1>Go!</h1>
<ul>
<li>github.com/timruffles/JavaScript-Garden/tree/fp-dojo
<li>Node-based site generator, small - ~200 LOC
<li>Form groups of 3+
<li>1 hour, equal turns driving code
<li>Then we'll talk through code
</ul>
</section>
<section>
<h1>Ideas for focus</h1>
<p>github.com/timruffles/JavaScript-Garden/tree/fp-dojo
<ul>
<li>Split IO/pure functions
<li>Streams
<li>Lazy enumerators
<li>Monads
<li>Function composition, partials
<li>Clojurescript, LiveScript etc
</ul>
</section>
<section>
<h1>Enjoy!</h1>
<aside class="notes">
Above all, hope you enjoy! First session so any feedback is always welcome: what you liked, what you didn't etc.
</aside>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="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: false,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/zoom/linear/fade/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>