-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
430 lines (425 loc) · 55.4 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
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
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="author" content="Yoav Luft"><title>Does JavaScript Adopt Functional Programming?</title><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" name="viewport"><link href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.css" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/theme/black.css" id="theme"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"><link href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/lib/css/zenburn.css" rel="stylesheet"><script>var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/print/pdf.css" : "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/print/paper.css";
document.getElementsByTagName( 'head' )[0].appendChild( link );</script><!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/lib/js/html5shiv.js"></script><![endif]--><link rel="stylesheet" href="custom.css"></head><body><div class="reveal"><div class="slides"><section class="title" data-state="title"><h1>Does JavaScript Adopt Functional Programming?</h1><div class="preamble"><div class="paragraph"><p><span class="icon"><i class="fa fa-twitter"></i></span> @luftyoav</p></div>
<div class="paragraph"><p><span class="icon"><i class="fa fa-envelope"></i></span> <a href="mailto:[email protected]">[email protected]</a></p></div>
<aside class="notes"><div class="paragraph"><p>Hello! My name is Yoav Luft and today I’m going to talk about whether the JavaScript community adopts functional
programming or not.</p></div></aside></div><p class="author"><small>Yoav Luft</small></p></section>
<section><section id="the_beginning" data-background-image="images/sunrise.jpg" data-background-size="cover"><h2>The Beginning</h2><aside class="notes"><div class="paragraph"><p>About five years ago I worked for company that processed huge amounts of data on distributed Python servers. Hoping to
improve performance, I came along Erlang and Elixir, which introduced me to functional programming. Combined with my
passion for clean and verifiable code, and the trust I put into formal methods, I quickly found myself sucked to the
world of functional programming, and especially Haskell and Elm.</p></div></aside></section><section id="the_conflict" data-background-image="images/angry-husky.jpg" data-background-size="cover"><h2>The Conflict</h2>
<aside class="notes"><div class="paragraph"><p>But one workplace later I met a group of developers who were not impressed by my Functional-Fu and my declarative-jutsu.
In fact, they complained that my code is too declarative! This through me off balance, and made me ask, "Is Functional
Programming Really is the future of JavaScript?"</p></div></aside></section><section id="resolution" data-background-image="images/bookcase.jpg" data-background-size="cover"><h2>Resolution</h2>
<div class="paragraph fragment"><p>?</p></div>
<aside class="notes"><div class="paragraph"><p>This talk is based on a research I’m conducting on coding style in Javascript. I conduct the
research independently but under the supervision of Prof. Feitelson from the Hebrew University of
Jerusalem. The results that I’ll show today are preliminary, and we’ll be subject to more thorough
investigation.</p></div></aside></section></section>
<section><section id="short_version"><h2>Short Version</h2><aside class="notes"><div class="paragraph"><p>In case you just can’t contain your curiosity, here’s the short version:</p></div></aside></section><section id="javascript_becomes_more_declarative"><div class="openblock fragment"><div class="content"><div class="paragraph"><p>100 top projects</p></div></div></div>
<div class="openblock fragment"><div class="content"><div class="paragraph"><p><span class="icon"><i class="fa fa-plus"></i></span></p></div>
<div class="paragraph"><p>Analyzing the Code</p></div></div></div>
<div class="openblock fragment"><div class="content"><div class="paragraph"><p><strong>=</strong></p></div>
<div class="paragraph"><p>JavaScript Becomes <span class="line-through">Functional</span> Declarative</p></div></div></div>
<aside class="notes"><div class="paragraph"><p>By looking at Github’s one hundred most popular javascript projects, analyzing their code and
dependencies, I feel quite convinced that as the years go on, the Javascript community is adopting a
more declarative programming style.</p></div>
<div class="paragraph"><p>How did I manage to get to this conclusion? What it has to do with functional programming, and why even look at
javascript and not, say, C#? All of that and more, next.</p></div>
<div class="paragraph"><p>But first,</p></div></aside></section><section id="the_end"><h2>The End!</h2><div class="videoblock"><video src="images/end.mp4" width="background" height="100%" data-autoplay loop>Your browser does not support the video tag.</video></div></section></section>
<section><section id="introduction"><h2>Introduction</h2><aside class="notes"><div class="paragraph"><p>I’m Yoav Luft, born and raised in Israel, currently living with my partner Dafna in Stockholm Sweden. I’ve have been
programming professionally for the last ten or so years, working mostly with web applications but also with games,
embedded systems and other bits’n’pieces.</p></div>
<div class="paragraph"><p>Other than programming itself, I’m also involved with the programming community as much as I can. In Israel I’ve founded
"FLIP", the first functional programming conference in Israel, now preparing for its second round.</p></div>
<div class="paragraph"><p>I’ve organized the Elm users group meetups for a while, and I was part of the organizing team of
"HackExtend", a diversity centered hackathon founded by my partner Dafna and friends.</p></div>
<div class="paragraph"><p>I currently work for the digital agency "Prototyp", a code lab that build code for costumers that want to break new
grounds.</p></div></aside><div class="openblock fragment half float-left"><div class="content"><div class="imageblock no-border" style=""><img src="images/me.jpg" alt="Me!" width="auto" height="300"></div>
<div class="paragraph"><p>Yoav Luft</p></div></div></div><div class="openblock fragment half float-right"><div class="content"><div class="imageblock no-border" style=""><img src="images/zengarden.png" alt="Zen Garden" width="auto" height="300"></div>
<div class="paragraph"><p>Web Dev - Games - Embedded</p></div></div></div></section><section id="introduction_ii"><div class="openblock fragment half float-left"><div class="content"><div class="imageblock no-border" style=""><img src="images/flip.png" alt="FLIP" width="auto" height="250"></div></div></div>
<div class="openblock fragment half float-right"><div class="content"><div class="imageblock no-border" style=""><img src="images/hackextend.png" alt="HackExtend" width="auto" height="250"></div></div></div>
<div class="paragraph"><p><br/></p></div>
<div class="openblock fragment stretch"><div class="content"><div class="imageblock no-border-transparent" style=""><img src="images/prototyp-white.png" alt="Prototyp" width="300"></div></div></div></section></section>
<section id="table_of_contents"><h2>Table of Contents</h2><div class="ulist step"><ul><li class="fragment"><p>Why should we care about JavaScript?</p></li><li class="fragment"><p>What "adopting functional programming" even means?</p></li><li class="fragment"><p>The Quest for Data</p></li><li class="fragment"><p>What’s next?</p></li></ul></div>
<aside class="notes"><div class="ulist"><ul><li><p>Why should we care about JavaScript?</p></li><li><p>What "adopting functional programming" even mean?</p></li><li><p>Where is the evidence?</p></li><li><p>What’s next?</p></li></ul></div>
<div class="paragraph"><p>and finally,</p></div></aside></section>
<section id="why_should_we_care_about_javascript"><div class="imageblock no-border-transparent" style=""><img src="images/JavaScript-question.png" alt="Javscript Why?" width="50%" height="50%"></div>
<aside class="notes"><div class="paragraph"><p>Why should we even care about JavaScript? And especially, why should we talk about it in a functional programming
conference?</p></div></aside></section>
<section><section id="the_past_and_present_of_javascript"><h2>The Past and Present of Javascript</h2><aside class="notes"><div class="paragraph"><p>Let’s start with a brief history of JavaScript: Javascript was created at netscape in 1995 after Brenden Eich (AiK), who
was originally hired to integrate Scheme into the Netscape Navigator, created a prototype in 10 days. It uses a
curly-braces like syntax because management had decided that they want a Java-like programming language. It’s goal was
to allow running programs in a web-browser, making web pages interactive, and allowing for a ubiquitous platform.</p></div></aside><div class="openblock fragment third float-left"><div class="content"><div class="imageblock no-border" style=""><img src="images/scheme_self.png" alt="Scheme and Self" width="auto" height="250"></div></div></div><div class="openblock fragment third float-left big"><div class="content"><div class="paragraph"><p><span class="icon"><i class="fa fa-plus"></i></span></p></div></div></div><div class="openblock fragment third float-right big"><div class="content"><div class="imageblock no-border" style=""><img src="images/Java_programming_language_logo.svg" alt="Java" width="auto" height="250"></div></div></div><div class="openblock fragment stretch big"><div class="content"><div class="paragraph"><p><span class="icon"><i class="fa fa-long-arrow-down"></i></span></p></div></div></div><div class="openblock fragment"><div class="content"><div class="imageblock no-border-transparent" style=""><img src="images/java_self.png" alt="JavaScript Weird" width="auto" height="250"></div></div></div></section><section><aside class="notes"><div class="paragraph"><p>Javascript was created with imperative structural syntax similar to C, using control structures such as if-else blocks,
while and for loops. It has functions as first class citizens and supports closures. It is a universally typed language,
aka "dynamically" typed, but also supports some version of object oriented structuring with the use of prototypical
inheritance.</p></div></aside>
<div class="ulist step"><ul><li class="fragment"><p>Imperative</p></li><li class="fragment"><p>Functions are 1st class citizens</p></li><li class="fragment"><p>Universally typed</p></li><li class="fragment"><p>Prototypical Inheritance</p></li></ul></div></section><section><div class="listingblock"><div class="content"><pre class="highlight"><code data-noescape class="javascript language-javascript">var object =
{ name: "Object1",
action: function() { },
data: [1, 2, 3]
}
JSON.stringify(object) ==
"{\"name\":\"Object1\",\"data\":[1,2,3]}"</code></pre></div></div></section><section id="delegation"><div class="listingblock"><div class="content"><pre class="highlight"><code data-noescape class="javascript language-javascript">function Dog() {
this.voice = "Woof!"
this.makeSound = function() {
return this.voice
}
}
var dog = new Dog
var cat = {voice: "Prrrr",
makeSound: dog.makeSound}
cat.makeSound() == "Prrrr"</code></pre></div></div>
<aside class="notes"><div class="paragraph"><p>It uses the hashmap as its fundamental data-type, which can also be encoded to a data transfer representation, the JSON
format. It uses late-binding, and allows delegation by the use of the "this" keyword, a feature notoriously confusing
for programmers who come from other imperative-object-oriented languages such as Java.</p></div>
<div class="paragraph"><p>Ölbaum[<a href="https://twitter.com/oscherler/status/660049264903643136?lang=en" class="bare">https://twitter.com/oscherler/status/660049264903643136?lang=en</a>]</p></div></aside></section><section><div class="imageblock" style=""><img src="images/olabums-tweet-safe.png" alt="olabums tweet safe"></div>
<aside class="notes"><div class="paragraph"><p>Being supported on all web browsers, and also being a common backend language through frameworks such as Node.js has
made Javascript extremely popular.</p></div></aside></section><section id=""><h2><span class="image no-border-transparent float-right"><img src="images/Stack_Overflow_logo.png" alt="StackOverflow" width="auto" height="64"></span></h2><aside class="notes"><div class="paragraph"><p>In StackOverflow’s yearly survey of 2018, Javascript was the most popular programming
language with 69% of respondents claiming knowledge of the language
[<a href="https://insights.stackoverflow.com/survey/2018/#most-popular-technologies" class="bare">https://insights.stackoverflow.com/survey/2018/#most-popular-technologies</a>].</p></div>
<div class="paragraph"><p>It held this position for the last 6 years.
The top 3 most popular frameworks in that same survey are all Javascript frameworks, with Node.js in the lead, which
hints to the language’s popularity as a backend language.</p></div></aside>
<div class="imageblock" style=""><img src="images/stack-overflow-2018-popular.png" alt="stack overflow 2018 popular"></div></section><section><aside class="notes"><div class="paragraph"><p>According the website SimilarTech, node.js is the third most popular server framework, after PHP, ASP.net. The fourth
place is occupied by "express", which is a framework built over Node.js.
[<a href="https://www.similartech.com/categories/framework" class="bare">https://www.similartech.com/categories/framework</a>].</p></div></aside>
<div class="imageblock no-border-transparent" style=""><img src="images/similar-tech.png" alt="SimilarTech" width="110%"></div></section><section id=""><h2><span class="float-right"><span class="icon"><i class="fa fa-github"></i></span></span></h2><aside class="notes"><div class="paragraph"><p>On Github, javascript has been the number one programming language for new repositories
in the last 4 years [<a href="https://octoverse.github.com/projects#languages" class="bare">https://octoverse.github.com/projects#languages</a>].
Love it or hate it, being the only programming language supported by all web-browsers means that Javascript’s popularity
is on the rise.</p></div></aside>
<div class="imageblock" style=""><img src="images/github-survey.png" alt="github survey"></div></section><section id="but_why_should_we_care"><h2>But why should we care?</h2><aside class="notes"><div class="paragraph"><p>But then again, why should we care, when discussing Javascript in the context of functional programming?</p></div></aside></section></section>
<section><section id="javascript_for_functional_programming"><h2>JavaScript for Functional Programming</h2><aside class="notes"><div class="paragraph"><p>First and foremost, we should note that javascript is a very welcoming language for the flexible functional programmer:
It supports anonymous functions and closures; It <strong>uses</strong> continuation passing and structured modeling of asynchronous code
quite often;</p></div></aside><div class="paragraph"><p>Javascript has:</p></div><div class="ulist"><ul><li class="fragment"><p>anonymous functions</p></li><li class="fragment"><p>closures</p></li><li class="fragment"><p>uses continuation passing</p></li><li class="fragment"><p>structured modeling of async (almost monads!)</p></li></ul></div></section><section><div class="imageblock" style=""><img src="images/TC39.png" alt="50%" width="50%"></div>
<aside class="notes"><div class="paragraph"><p>It appears that many members of the EMCA Technical Commitee 39, the committee in charge of the javascript standard, would
like to encourage functional programming style in javascript.
As people interested in functional programming, I can only awesome that we would all like to use familiar and beloved
programming style over an imperative, out-styled, and appearently more error prone style. This is especially true if our
daily work requires writing code that would run on web browsers.</p></div></aside></section><section id="rapidly_evolving_standard"><h2>Rapidly Evolving Standard</h2><aside class="notes"><div class="paragraph"><p>And it’s rapidly evolving standard includes support for things such as shorthand notation for anonymous
functions (already commonly used), destructuring assignments, constant references, generator functions, and there are
even pending proposals for tail-call optimization, pipe-operator, partial application syntax and pattern matching.</p></div></aside>
<div class="ulist checklist"><ul class="checklist"><li><p><i class="icon-check"></i>anonymous functions shorthand (2015)</p></li><li><p><i class="icon-check"></i>destructuring assignments (2015)</p></li><li><p><i class="icon-check"></i>generator functions (2015)</p></li><li><p><i class="icon-check-empty"></i>tail-call optimization (pending)</p></li><li><p><i class="icon-check-empty"></i>pipe-operator (pending)</p></li><li><p><i class="icon-check-empty"></i>partial application syntax (pending)</p></li><li><p><i class="icon-check-empty"></i>pattern matching (pending)</p></li></ul></div></section></section>
<section><section id="part_ii_what_does_adopting_functional_programming_even_mean"><h2>Part II: What does <br> <span class="lightblue">"Adopting functional programming"</span> <br> even mean?</h2></section><section><aside class="notes"><div class="paragraph"><p>Just a short google search with the words "Javascript functional programming" will turn out millions of results,
and many of the top results are blog posts about Javascript, or functional programming in javascript.</p></div>
<div class="paragraph"><p>But is that a proof that the community as a whole adopts functional programming? Or are these just functional
programming eccentrics howling at the moon?</p></div></aside>
<div class="imageblock no-border-transparent" style=""><img src="images/blogs.gif" alt="blogs"></div></section><section><aside class="notes"><div class="paragraph"><p>We can break our question to two parts:</p></div>
<div class="paragraph"><p>Let’s start with "adopting"</p></div></aside>
<div class="paragraph"><p><span class="fragment">Adopting</span>     <span class="fragment">functional programming</span></p></div></section></section>
<section><section id="adopting"><h2>Adopting</h2><div class="olist arabic"><ol class="arabic"><li class="fragment"><p>Functional programming was not popular, or formally accepted in Javascript</p></li><li class="fragment"><p>It is now becoming more popular, or being formally accepted</p></li></ol></div><aside class="notes"><div class="paragraph"><p>Above is the Merriam-Webster definition for adopting.</p></div>
<div class="paragraph"><p>In adopting some programming style we imply two things:</p></div></aside></section><section data-background-image="images/piece-of-cake.gif" data-background-size="cover"></section></section>
<section><section id="functional_programming"><h2>Functional Programming</h2><aside class="notes"><div class="paragraph"><p>Now let us look at the second part of my statement: <strong>Functional programming</strong>.</p></div>
<div class="paragraph"><p>What is, exactly, functional programming? How can we define it, and how can we turn such definition to concrete test
cases that we can use to determine "how much" Javascript is functional programming?</p></div></aside></section><section id="how_much_is_javascript_functional_programming"><h2>How much is JavaScript functional programming</h2><aside class="notes"><div class="paragraph"><p>When in doubt regarding definitions, I do what every millennial does: I look it up in wikipedia. The wikipedia
definition was a bit mouthful, I will not read it out loud, but just notice the underlined bits:</p></div></aside>
<div class="olist arabic step"><ol class="arabic"><li class="fragment"><p>Computation as the evaluation of mathematical functions</p></li><li class="fragment"><p>Avoids changing-state and mutable-data</p></li><li class="fragment"><p>Declarative programming paradigm</p></li></ol></div></section><section id="criteria"><h2>Criteria</h2><aside class="notes"><div class="paragraph"><p>Let’s see if we can turn them into criteria for estimating how "functional" is a language or a piece of code.</p></div></aside>
<div class="videoblock stretch"><video src="images/chosen.mp4" width="100%" height="100%" data-autoplay loop>Your browser does not support the video tag.</video></div></section><section id="criterion_1_computation_of_mathematical_functions"><h2>Criterion 1: <br/> Computation of Mathematical Functions</h2><aside class="notes"><div class="paragraph"><p>Let’s start with "Computation as the evaluation of mathematical functions". What are "mathematical functions" in this
context? Again, from definitions, a mathematical functions is a relation from a set of input to a
set of possible outputs where each input is related to exactly one output.</p></div>
<div class="paragraph"><p>OK! That’s tangible! Let’s try and formalize this to a criterion:</p></div>
<div class="paragraph"><p>A piece of code is more "functional programming" if it uses more mathematical functions.</p></div>
<div class="paragraph"><p>A mathematical function is such function that its output depends entirely on its arguments.</p></div>
<div class="paragraph"><p>While simple, alas, determining such thing for arbitrary Javascript code was a bit out of scope for my research.</p></div></aside>
<div class="paragraph"><p>Mathematical</p></div>
<div class="listingblock"><div class="content"><pre class="highlight"><code data-noescape class="javascript language-javascript">function append(array, x) {
return array.concat(x)
}
var a1 = [1, 2]
var a2 = append(a1, 3)
// a1 == [1, 2]; a2 == [1, 2, 3]</code></pre></div></div></section><section id="non_mathematical"><h2>Non-mathematical</h2><div class="listingblock"><div class="content"><pre class="highlight"><code data-noescape class="javascript language-javascript">var array = [1, 2]
function append(x) {
array.push(x)
}
append(3) // undefined -> no return
// array == [1, 2, 3]</code></pre></div></div></section><section id="criterion_2_avoid_changing_state_and_mutable_data" data-background-image="images/smoke.jpg" data-background-size="cover"><h2>Criterion 2: <br/> Avoid changing state and mutable-data</h2>
<aside class="notes"><div class="paragraph"><p>I think this one is both simple and complex at the same time. It is simple because mutability and changing state are
strongly related, and very intuitive to grasp. This is complex because [a] all useful programs perform state changes; [b]
it is difficult to tell apart, when doing static analysis of code, whether a data mutation is done in-order to achieve a
desired side-effect or whether it is due to the implementation of an algorithm.</p></div>
<div class="paragraph"><p>Luckily for us, we’ve got some help: Many javascript projects use 3rd party packages to provide immutable data structures.
Javascript also added the "const" keyword for immutable reference, and the <code>Object.freeze()</code> method for making
objects immutable at runtime. All three can be good and easy to gather indicators for how immutability is common in
javascript.</p></div></aside></section><section id="immutability"><h2>Immutability</h2><div class="imageblock no-border" style=""><img src="images/immutablejs.png" alt="immutablejs"></div></section></section>
<section><section id="criterion_3_declarative_programming_paradigm"><h2>Criterion 3: <br/> Declarative Programming Paradigm</h2><aside class="notes"><div class="paragraph"><p>And last but not least, we can look at whether projects adopt a declarative style of programming. Again, a definition is
in order:</p></div>
<div class="paragraph"><p>While this might sound as vague as the previous definitions, I find that the last bit in there is key:</p></div></aside><div class="quoteblock"><blockquote><div class="paragraph"><p>a style of building the structure and elements of computer programs—that expresses the logic of a computation without
describing its control flow.</p></div></blockquote><div class="attribution">— Wikipedia</div></div></section><section><div class="quoteblock"><blockquote><div class="paragraph"><p>[…​] without describing its control flow.</p></div></blockquote></div>
<aside class="notes"><div class="paragraph"><p>Javascript, being a language that uses C style imperative structures, comes with a nice set of control flow structures:</p></div></aside></section><section id="while_loops"><h2>While loops</h2><div class="listingblock"><div class="content"><pre class="highlight"><code data-noescape class="javascript language-javascript">while (condition) {
doAction()
}
do {
action()
} while (condition)</code></pre></div></div></section><section id="for_loops"><h2>For loops</h2><aside class="notes"><div class="paragraph"><p>Not one, not two, but three different kinds of for loops:</p></div>
<div class="paragraph"><p>Do not worry yourselves about the differences between the two last examples, it is not that important.</p></div></aside>
<div class="listingblock"><div class="content"><pre class="highlight"><code data-noescape class="javascript language-javascript">for (var i = 0; i < size; i++) {
use(i)
}
for (var property in object) {
use(property)
}
for (var index of array) {
use(index)
}</code></pre></div></div></section><section id="branching"><h2>Branching</h2><aside class="notes"><div class="paragraph"><p>In addition, javascript supports if-else statements, switch statements and labels, which are just a different name to
C’s good old GOTO statements.</p></div>
<div class="paragraph"><p>Now, how would a declarative piece of javascript code would look like? It would avoid control flow structures, but which?</p></div>
<div class="paragraph"><p>If statements can only be replaces with the trianary operator, which is terse and difficult to read, so if-else are
likely to stay.</p></div>
<div class="paragraph"><p>Switch statements are often used where pattern matching would have been used, and given there is no standarized
replacement for them, it would be difficult to compare them to something else.</p></div>
<div class="paragraph"><p>Labels are rarely seen, so we are left with looping constructs.</p></div></aside>
<div class="listingblock"><div class="title">If-else</div><div class="content"><pre class="highlight"><code data-noescape class="javascript language-javascript">if (condition) {
doSomething()
} else {
doSomethingElse()
}
var a = condition ? val1 : val2</code></pre></div></div>
<div class="listingblock"><div class="title">Switch statement</div><div class="content"><pre class="highlight"><code data-noescape class="javascript language-javascript">switch (response) {
case "yes":
return true
case "no":
return false
default:
return undefined
}</code></pre></div></div></section><section id="but_which"><h2>But Which?</h2></section><section id="iteration_functions"><h2>Iteration functions</h2><aside class="notes"><div class="paragraph"><p>Luckily for us, looping constructs do have good alternatives: The javascript Array object offers 4 familiar and useful
functions: <code>map</code>, <code>filter</code>, <code>forEach</code> and <code>reduce</code>. Here’s a small examples of some of them:</p></div></aside>
<div class="paragraph"><p><code>map</code>, <code>filter</code>, <code>forEach</code> and <code>reduce</code></p></div></section><section id="examples"><table class="tableblock frame-all grid-all" style="width:100%"><colgroup><col style="width:50%"><col style="width:50%"></colgroup><thead><tr><th class="tableblock halign-left valign-top">Imperative</th><th class="tableblock halign-left valign-top">Declarative</th></tr><tbody><tr><td class="tableblock halign-left valign-top"><div><div class="listingblock"><div class="content"><pre class="highlight"><code data-noescape class="javascript language-javascript">var result
for (var i of array) {
result[i] = f(array[i])
}</code></pre></div></div></div></td><td class="tableblock halign-left valign-top"><div><div class="listingblock"><div class="content"><pre class="highlight"><code data-noescape class="javascript language-javascript">var result = array.map(f)</code></pre></div></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="listingblock"><div class="content"><pre class="highlight"><code data-noescape class="javascript language-javascript">var acc
for (var i of arr) {
acc = f(acc, arr[i])
}</code></pre></div></div></div></td><td class="tableblock halign-left valign-top"><div><div class="listingblock"><div class="content"><pre class="highlight"><code data-noescape class="javascript language-javascript">var accumulated =
arr.reduce(f)</code></pre></div></div></div></td></tr></table></section><section id="helper_libraries_for_functional_programming"><h2>Helper Libraries for Functional Programming</h2><div class="imageblock no-border" style=""><img src="images/underscore.png" alt="underscore"></div>
<div class="imageblock float-left half no-border" style=""><img src="images/lodash.png" alt="lodash"></div>
<div class="imageblock float-right half no-border" style=""><img src="images/ramda.png" alt="ramda"></div>
<aside class="notes"><div class="paragraph"><p>These functions are built in as part of the Array API, and they have common alternative versions in utility libraries
such as <code>underscore</code>, <code>lodash</code> and <code>Ramda</code>. Combined with some built functions from the <code>Object</code> class, such as
<code>Object.keys</code> which returns an array of all keys, they are complete enough to represent most, if not all, iteration
constructs required by javascript developers.</p></div>
<div class="paragraph"><p>Because of these properties I’ve decided that looping constructs are the best candidates for measuring how much does
Javascript adopts declarative programming.</p></div></aside></section></section>
<section id="part_iii_the_quest_for_data" data-background-image="images/adventure.jpg" data-background-size="cover"><h2>Part III: The Quest for Data</h2>
<aside class="notes"><div class="paragraph"><p>I hope I did not bored you with this prolonged introduction. Armed with the understanding that while the question of
whether Javascript goes functional or not is complicated, the question of whether it becomes more declarative is easier
to answer. Now comes the search for data.</p></div></aside></section>
<section><section id="methods"><h2>Methods</h2><aside class="notes"><div class="paragraph"><p>After consulting with Prof. Feitelson, I’ve decided to focus on projects which are:</p></div>
<div class="paragraph"><p>By looking at how these projects evolve, we can gain insights into general trends in Javascript.
I’ve decided to use Github’s one hundred most popular javascript projects, such as:</p></div></aside><div class="paragraph"><p>Projects which are:</p></div><div class="olist arabic step"><ol class="arabic"><li class="fragment"><p>Open source</p></li><li class="fragment"><p>Have a lot of contributors</p></li><li class="fragment"><p>Have been around for a while</p></li></ol></div></section><section id="project_examples"><div class="paragraph"><p><span class="image no-border"><img src="images/angular.svg" alt="angular.js" width="150" height="150"></span>
<span class="image no-border"><img src="images/threejs.png" alt="three.js" width="300" height="150"></span>
<span class="image no-border"><img src="images/vue.png" alt="vue" width="150" height="150"></span>
<span class="image no-border"><img src="images/d3.png" alt="d3" width="150" height="150"></span></p></div>
<aside class="notes"><div class="paragraph"><p>Next, I’ve gathered metadata on each project, such as it’s number of stargazers and it’s number of forks,
dependencies used and so on.</p></div>
<div class="paragraph"><p>Finally, I’ve looked at the actual code. By selecting the last commit in each of the years 2009, 2012, 2015, and 2018, I
would see into some of the trends in the overall Javascript programming style.</p></div></aside></section><section id="data_collection_process" data-transition="fade-out"><h2>Data Collection Process</h2><div class="imageblock" style=""><img src="images/method-graph.png" alt="data collection process" width="70%"></div>
<aside class="notes"><div class="paragraph"><p>Once the commits where selected, I’ve downloaded a snapshot of each repository at each of the target commits, and sent
the content of the snapshot to a processing pipeline. The processing pipeline uses the Esprima parser to generate an
Abstract Syntax Tree for each file, which was then searched for specific patterns.</p></div></aside></section><section id="data_collection_process_1" data-transition="fade"><h2>Data Collection Process 1</h2><div class="imageblock" style=""><img src="images/method-graph-1.png" alt="data collection process" width="70%"></div></section><section id="data_collection_process_2" data-transition="fade"><h2>Data Collection Process 2</h2><div class="imageblock" style=""><img src="images/method-graph-2.png" alt="data collection process" width="70%"></div></section><section id="data_collection_process_3" data-transition="fade"><h2>Data Collection Process 3</h2><div class="imageblock" style=""><img src="images/method-graph-3.png" alt="data collection process" width="70%"></div></section><section id="terminology"><h2>Terminology</h2><div class="paragraph"><p>Project = A repository on Github</p></div>
<div class="paragraph"><p>Sample = Data on patterns from a project’s snapshot</p></div>
<div class="paragraph"><p>Sample Year = A sample from the specified year</p></div></section><section id="patterns_imperative"><h2>Patterns: Imperative</h2><aside class="notes"><div class="paragraph"><p>For each files of valid Javascript, I’ve looked for the following patterns:</p></div></aside>
<div class="ulist"><ul><li><p>for loop, for..in loops, for..of loops</p></li></ul></div>
<div class="listingblock"><div class="content"><pre class="highlight"><code data-noescape class="javascript language-javascript">for (var i = 0; i < size; i++) {...}
for (var i in object) {...}
for (var i of array) {...}</code></pre></div></div>
<div class="ulist"><ul><li><p>while and do-while loops</p></li></ul></div>
<div class="listingblock"><div class="content"><pre class="highlight"><code data-noescape class="javascript language-javascript">while (cond) {...}</code></pre></div></div></section><section id="patterns_declarative"><h2>Patterns: Declarative</h2><div class="ulist"><ul><li><p>forEach calls</p></li></ul></div>
<div class="ulist"><ul><li><p>map calls</p></li></ul></div>
<div class="ulist"><ul><li><p>filter calls</p></li></ul></div>
<div class="ulist"><ul><li><p>reduce calls</p></li></ul></div>
<aside class="notes"><div class="paragraph"><p>After filtering some problematic repositories, I moved into analyzing the results.</p></div></aside></section></section>
<section><section id="the_sample"><h2>The Sample</h2></section><section id="projects"><h2>Projects</h2><div class="imageblock" style=""><img src="images/num_projects_sample_year.png" alt="num projects sample year"></div>
<aside class="notes"><div class="paragraph"><p>This graph shows how many samples we’ve managed to gather in each year, out of our initial one hundred repositories.
We had only 3 samples from 2009, so this year will be discarded in future graphs, and we had 79 samples in 2018.</p></div></aside></section><section id="projects_by_age"><h2>Projects by Age</h2><div class="imageblock" style=""><img src="images/created_year_cdf.png" alt="created year cdf"></div>
<aside class="notes"><div class="paragraph"><p>This brings the question of the age of the projects on Github. We can see that over half of them were created on Github
at before 2014. This means they have at least 5 years of development in the public domain, which is desired.</p></div>
<div class="paragraph"><p>It is important to note that not all projects had samples in every year.</p></div></aside></section><section id="size_of_projects"><h2>Size of Projects</h2><div class="imageblock" style=""><img src="images/loc_files_per_sample_year.png" alt="loc files per sample year"></div>
<aside class="notes"><div class="paragraph"><p>How large were the projects?</p></div>
<div class="paragraph"><p>These two graphs show the total number of parsed Javascript files in each sample year, and the sum of lines of code for
each sample. We can see that we’re dealing with magnitude of 3 million lines of code. We can also witness the rapid
growth of Javascript from 2012 to 2015, almost tripling the number of lines of code, while doubling the number of files.</p></div>
<div class="paragraph"><p>We can see that from 2015 to 2018 the number of lines of code grows more slowly, but the number of files keeps on
growing steadily. This is an indication that code is broken into smaller files, maybe due to refactoring of the
projects?</p></div></aside></section></section>
<section><section id="results" data-background-image="images/cheers.jpg" data-background-size="cover"><h2>Results</h2><aside class="notes"></aside></section><section id="constructs_in_samples"><h2>Constructs in Samples</h2><div class="imageblock" style=""><img src="images/num_constructs_year.png" alt="num constructs year"></div>
<aside class="notes"><div class="paragraph"><p>Next, we’ll look at the how common are different code constructs in different samples:</p></div>
<div class="paragraph"><p>In this graph we see the count of each iteration construct across the three sample years. The top for are our impreative
constructs, <code>while</code>, <code>for..of</code>, <code>for..in</code> and C-style <code>for</code>-loops. Beneath them are our declarative constructs:
<code>forEach</code>, <code>reduce</code>, <code>map</code> and <code>filter</code>. The green line is the sum of all declarative constructs.</p></div>
<div class="paragraph"><p>We can notice that from 2015 to 2018 the total number of iteration constructs had stayed roughly the same, but we
already know that the amount of code had increased. We can also see that the declarative part is slightly raising, and
also that C-style <code>for</code> loops are the most popular interation construct.</p></div></aside></section><section id="constructs_per_loc"><h2>Constructs per LoC</h2><div class="imageblock" style=""><img src="images/percent_constructs_year.png" alt="percent constructs year"></div>
<aside class="notes"><div class="paragraph"><p>Let’s look at the same data normalized by the number of lines of code in each sample:</p></div>
<div class="paragraph"><p>In this graph it becomes obvious that as time advances, there are less iteration per line of code. Is that because
projects use APIs which are even more high-level than the ones I’m sampling, or is because there are less iterations
over data in general?</p></div>
<div class="paragraph"><p>We can see that while the total number of iteration constructs shrink, the part of the declarative constructs
shrinks more slowly. Let’s have a look at the relative amount of each construct compared to the others:</p></div></aside></section><section id="constructs_in_percentage"><h2>Constructs in Percentage</h2><div class="imageblock" style=""><img src="images/dist_constructs_year.png" alt="dist constructs year"></div>
<aside class="notes"><div class="paragraph"><p>Now, here we can see an obvious trend: declarative iteration constructs are on the rise compared to their imperative
counterparts. Still, they are only slightly more that 40% of total constructs use, with C-style <code>for</code> loops still in the
lead with 34% of all constructs found. <code>while</code> loops are slowly disappearing, dropping from 13% to just 9.6% over the
last 6 years, while the use of <code>map</code> is slowly on the rise. Surprisngly enough, the use of <code>reduce</code>, while rare, is
quite constants, being around 1% of all samples.</p></div>
<div class="paragraph"><p>It seems like this supports the idea that javascript is moving to more declarative iteration constructs, but it seems
like this process is not as fast as I originally had guessed. Let’s try and look what kind of projects change the
most.</p></div></aside></section><section id="conclusions"><h2>Conclusions</h2><div class="paragraph fragment"><p>More Declarative Iteration!</p></div>
<div class="paragraph fragment"><p><span class="small">but not that much…​</span></p></div></section><section id="individual_projects"><h2>Individual Projects</h2><div class="imageblock" style=""><img src="images/decl_ratio_per_project_sample.png" alt="decl ratio per project sample"></div></section></section>
<section id="individual_projects_2"><h2>Individual Projects</h2><div class="imageblock" style=""><img src="images/decl_ratio_per_project_over_time.png" alt="decl ratio per project over time"></div>
<aside class="notes"><div class="paragraph"><p>Sixty six of the projects appeared in more than one sample, meaning that we can track their individual development over
time. To do that, I started by defining the projects "Declarative Index", which is the ratio of declarative iteration
constructs out of the total number of constructs. A declarative index of "one" means that projects uses only declarative
iteration constructs, while a "zero" means that only imperative constructs are used.</p></div>
<div class="paragraph"><p>I’ve proceeded with plotting the declarative index for each project over our sampled years. We can see that while most
projects create an upwards slope, meaning they go from imperative to declarative, this is not universally true.</p></div>
<div class="paragraph"><p>I’ve plotted the mean declarative index as the magenta line, and we can see that over the last 6 years there’s an
obvious trend where projects move to a higher declarative index, from approximately 0.4 in 2012 to almost 0.6 in 2018.</p></div>
<div class="paragraph"><p>Is there anything that can predict whether a project will choose or turn to a more declarative style?</p></div></aside></section>
<section><section id="what_kind_of_projects_are_declarative"><h2>What Kind of Projects Are Declarative?</h2></section><section id="age_as_estimator"><h2>Age as Estimator</h2><div class="imageblock" style=""><img src="images/declarative_by_age.png" alt="declarative by age"></div>
<aside class="notes"><div class="paragraph"><p>By plotting the declarative index of a project in the last sample in which it appears against different properties of
the project, we can hope to achieve some insight into which projects are more declarative.</p></div>
<div class="paragraph"><p>In this graph we see the scatter of the projects index versus age and the regression line.</p></div>
<div class="paragraph"><p>It seems like that the younger the project is, the more likely it is to have an higher declarative index! In other
words, newer projects tend to prefer a more declarative programming style.</p></div></aside></section><section id="number_of_forks"><h2>Number of Forks</h2><div class="imageblock" style=""><img src="images/declarative_by_forks.png" alt="declarative by forks"></div>
<aside class="notes"><div class="paragraph"><p>Let’s consider the number of forks a project has and it’s index.</p></div>
<div class="paragraph"><p>If you are not familiar with github, a fork is a copy of the project with independent changes that might be merged back
into the project. In most projects, the only why for a contributor to contribute code is to first fork the project.</p></div>
<div class="paragraph"><p>Again, we’re look at the scatter-plot with regression. We can see that in this case the declarative index is slightly
inversely correlated with the number of forks.</p></div></aside></section><section id="stargazers_vs_index"><h2>Stargazers vs. Index</h2><div class="imageblock" style=""><img src="images/declarative_by_stars.png" alt="declarative by stars"></div>
<aside class="notes"><div class="paragraph"><p>Interestingly enough, there is no correlation! But I wouldn’t put to much meaning into this graph, because being a
stargazer of a project doesn’t have some inherent well understood meaning, similar to a "like" on twitter or Facebook.</p></div>
<div class="paragraph"><p>Finally, let’s see how the number of contributors correlates with the projects "declarative index":</p></div></aside></section><section id="project_contributors"><h2>Project Contributors</h2><div class="imageblock" style=""><img src="images/declarative_by_contributors.png" alt="declarative by contributors"></div>
<aside class="notes"><div class="paragraph"><p>Last property of project we’ll see today is the number of contributors, as reported by the projects main Github page.</p></div>
<div class="paragraph"><p>From the number of contributors we can see that there is some correlation between more contributors and more declarative
style of code. This might imply that the majority of JavaScript programmers prefer a declarative style of coding.</p></div></aside></section><section id="conclusions_2"><h2>Conclusions</h2></section></section>
<section id="supporting_libraries"><h2>Supporting Libraries</h2><aside class="notes"><div class="paragraph"><p>As we discussed earlier, the question of measuring "functional programming" of a project is more complicated. A possible
indication can be the use of libraries that make a functional programming style more accessible in JavaScript, such as
"underscore", "lodash" and "Ramda".</p></div>
<div class="paragraph"><p>By looking at the dependencies of different projects, we can see whether they use one of these libraries or not. This
graph shows the number of projects in each sample that had such a library as a dependency. We can see that while these
libraries are on the rise, they are still being used in less than a quarter of the projects.</p></div></aside>
<div class="imageblock" style=""><img src="images/helpers_libs.png" alt="helpers libs"></div></section>
<section><section id="whats_next" data-background-image="images/arrow.jpg" data-background-size="cover"><h2><span class="lightblue">What’s Next</span></h2></section><section id="what_are_your_options"><h2>What are your options?</h2><aside class="notes"><div class="paragraph"><p>Oh! Well, if you don’t like Javascript but need to write code that runs in a web browser there are several nice
alterantives:</p></div>
<div class="paragraph"><p>Elm: a small delightful language that IMHO solves many of the problems in web programming</p></div>
<div class="paragraph"><p>ClojureScrip: if you just can live another project without LISP</p></div>
<div class="paragraph"><p>PureScript: a Haskell-like language that compiles to Javascript and has some tweeks for nicer interpolation with
Javascript.</p></div>
<div class="paragraph"><p>Reason: an OCaml inspired language that started trending lately, mostly due to it’s easy interop with Javascript.</p></div>
<div class="paragraph"><p>Wait for the Web assembly standard to mature and then just write code in whatever languae you want.</p></div>
<div class="paragraph"><p>100s of Language X to Javascripts: Hundreds of other programming languages that can compile themselves to Javascript,
such as Haskell, Kotlin, Scala, Ruby, Python.</p></div>
<div class="paragraph"><p>Google any word with "Script" as suffix or that is a pun on coffee and there’s probably a Javascript dialect or a
language that transpiles to Javascript by that name.</p></div></aside>
<div class="openblock fragment third float-left"><div class="content"><div class="imageblock no-border" style=""><img src="images/Elm_logo.svg.png" alt="Elm" width="100" height="100"></div>
<div class="paragraph"><p>Elm</p></div></div></div>
<div class="openblock fragment third float-left"><div class="content"><div class="imageblock no-border" style=""><img src="images/cljs.png" alt="ClojureScript" width="100" height="100"></div>
<div class="paragraph"><p>ClojureScript</p></div></div></div>
<div class="openblock fragment third float-right"><div class="content"><div class="imageblock no-border" style=""><img src="images/PureScript_Logo.png" alt="PureScript" width="100" height="100"></div>
<div class="paragraph"><p>PureScript</p></div></div></div>
<div class="openblock fragment half float-left"><div class="content"><div class="imageblock no-border" style=""><img src="images/reason.svg" alt="Reason" width="100" height="100"></div>
<div class="paragraph"><p>Reason</p></div></div></div>
<div class="openblock fragment half float-right"><div class="content"><div class="imageblock no-border" style=""><img src="images/Web_Assembly_Logo.svg.png" alt="WebAssembly" width="100" height="100"></div>
<div class="paragraph"><p>WebAssembly</p></div></div></div></section><section id="as_for_me" data-background-image="images/road.jpg" data-background-size="cover"><h2>As for me…​</h2>
<aside class="notes"><div class="paragraph"><p>As for my research, there are some obvious steps forward:</p></div>
<div class="ulist"><ul><li><p>The most obvious is to look at a larger sample.</p></li><li><p>I can also look at other structures, such as assignments and branching.</p></li><li><p>It might be possible to identify the uses of higher-order functions.</p></li><li><p>Or just examine specific examples in more detail, for example, determining how easy it is to refactor code from
imperative to declarative style.</p></li><li><p>We can look at changes over time at the commit level: is code being refactored?</p></li><li><p>And finally, we can see whether projects migrate to functional languages.</p></li></ul></div>
<div class="paragraph"><p>And of course, there are so many small improvements to make, such as supporting more flavors of JavaScript, and even
looking at JavaScript’s typed superset, TypeScript.</p></div></aside>
<div class="ulist fragment step shaded"><ul><li class="fragment"><p>Look at a larger sample</p></li><li class="fragment"><p>Examine more structures, e.g. assignments</p></li><li class="fragment"><p>Look at the use of higher-order functions</p></li><li class="fragment"><p>Examine results into more detail.</p></li><li class="fragment"><p>Examine changes of code over time</p></li><li class="fragment"><p>Look for projects migrating from Javascript to functional languages</p></li></ul></div></section></section>
<section id="shameless_plug"><h2>Shameless Plug</h2><aside class="notes"><div class="paragraph"><p>If you find this project interesting, you can contribute to the code through it’s repo on github, or by encouraging me
to keep researching programming languages.</p></div>
<div class="paragraph"><p>I work for Prototyp, where we <put slogan here>. We’re located in Stockholm and Barcelona and would be happy to help you
with your projects.</p></div></aside>
<div class="paragraph"><p><span class="icon"><i class="fa fa-twitter"></i></span> @luftyoav</p></div>
<div class="paragraph"><p><span class="icon"><i class="fa fa-envelope"></i></span> <a href="mailto:[email protected]">[email protected]</a></p></div>
<div class="paragraph"><p><span class="image no-border-transparent"><img src="images/prototyp-white.png" alt="prototyp" width="50%"></span></p></div></section>
<section id="thank_you"><h2>Thank you!</h2></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.js"></script><script>// See https://github.com/hakimel/reveal.js#configuration for a full list of configuration options
Reveal.initialize({
// Display controls in the bottom right corner
controls: false,
// Display a presentation progress bar
progress: true,
// Set a per-slide timing for speaker notes, null means none
defaultTiming: null,
// Display the page number of the current slide
slideNumber: false,
// Push each slide change to the browser history
history: true,
// Enable keyboard shortcuts for navigation
keyboard: true,
// Enable the slide overview mode
overview: true,
// Vertical centering of slides
center: true,
// Enables touch navigation on devices with touch input
touch: true,
// Loop the presentation
loop: false,
// Change the presentation direction to be RTL
rtl: false,
// Randomizes the order of slides each time the presentation loads
shuffle: false,
// Turns fragments on and off globally
fragments: true,
// Flags if the presentation is running in an embedded mode,
// i.e. contained within a limited portion of the screen
embedded: false,
// Flags if we should show a help overlay when the questionmark
// key is pressed
help: true,
// Flags if speaker notes should be visible to all viewers
showNotes: false,
// Global override for autolaying embedded media (video/audio/iframe)
// - null: Media will only autoplay if data-autoplay is present
// - true: All media will autoplay, regardless of individual setting
// - false: No media will autoplay, regardless of individual setting
autoPlayMedia: null,
// Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides
autoSlide: 0,
// Stop auto-sliding after user input
autoSlideStoppable: true,
// Enable slide navigation via mouse wheel
mouseWheel: false,
// Hides the address bar on mobile devices
hideAddressBar: true,
// Opens links in an iframe preview overlay
previewLinks: false,
// Theme (e.g., beige, black, league, night, serif, simple, sky, solarized, white)
// NOTE setting the theme in the config no longer works in reveal.js 3.x
//theme: Reveal.getQueryHash().theme || 'black',
// Transition style (e.g., none, fade, slide, convex, concave, zoom)
transition: Reveal.getQueryHash().transition || 'slide',
// Transition speed (e.g., default, fast, slow)
transitionSpeed: 'default',
// Transition style for full page slide backgrounds (e.g., none, fade, slide, convex, concave, zoom)
backgroundTransition: 'fade',
// Number of slides away from the current that are visible
viewDistance: 3,
// Parallax background image (e.g., "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'")
parallaxBackgroundImage: '',
// Parallax background size in CSS syntax (e.g., "2100px 900px")
parallaxBackgroundSize: '',
// The "normal" size of the presentation, aspect ratio will be preserved
// when the presentation is scaled to fit different resolutions. Can be
// specified using percentage units.
width: 960,
height: 700,
// Factor of the display size that should remain empty around the content
margin: 0.1,
// Bounds for smallest/largest possible scale to apply to content
minScale: 0.2,
maxScale: 1.5,
// 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 },
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/plugin/notes/notes.js', async: true }
]
});</script></body></html>