lulu-berlin · December 8, 2017 08:12
diff --git a/fp.html b/fp.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Functional Programming</title>
    <meta charset="utf-8">
    <style>
      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      }
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
    </style>
  </head>
  <body>
    <textarea id="source">

 class: center

 # Math and Code

 --
 # A heartbreaking Tragedy of Unrequited Love

 --
 # Or...

 --
 # A Love Story Against All Odds

 --
 # 💘

 ---

 class: center

 ```typescript
 x = x + 1
 ```

 --
 .left[In code: increment a variable]

 --
 ![](https://pbs.twimg.com/profile_images/498006663987601408/gF4SJw82_400x400.jpeg)

 ---

 class: center

 ```typescript
 x = x + 1
 ```

 .left[
 In math...
 ]

 --
 .left[```typescript
 x = x + 1  // -x
 ```]

 --
 .left[```typescript
 0 = 0 + 1
 ```]

 --
 .left[```typescript
 0 = 1
 ```]

 --
 <img src="https://memegenerator.net/img-preview/Instance/PreviewInstanceData?instanceDataJson=%7B%22instanceElements%22%3A%5B%7B%22instancePicture%22%3A%7B%22imageID%22%3A5754965%7D%2C%22instanceTexts%22%3A%5B%7B%22text%22%3A%22You%20keep%20using%20the%20operator%20%3D%22%2C%22placeholder%22%3A%22top%20text%22%2C%22horizontalAlign%22%3A%22center%22%2C%22verticalAlign%22%3A%22near%22%2C%22color%22%3A%22%23ffffff%22%7D%2C%7B%22text%22%3A%22I%20don%27t%20think%20it%20means%20what%20you%20think%20it%20means%22%2C%22placeholder%22%3A%22bottom%20text%22%2C%22horizontalAlign%22%3A%22center%22%2C%22verticalAlign%22%3A%22far%22%2C%22color%22%3A%22%23ffffff%22%7D%5D%7D%5D%7D" width="300">

 ---

 class: center, middle

 # Enter Functional Programming

 ---

 class: middle

 - Functions as first class values

 --

 - Pure functions

 --

  - idempotence

 --

  - no side-effects, no hidden state

 --

 - Functional composition

 --

 - Immutability

 ---

 class: center, middle

 # Benefits


 --

 - Functions as interfaces: input => output

 --

 - Simple logic is always reproducible

 --

 - Testability

 --

 - Easy parallelism / concurrency

 --

 - Function signature reveals what the function does

 --

 - Reference equality implies deep equality

 ---

 class: center, middle

 # Javascript

 # pass by value vs. pass by reference

 ---

 class: middle

 ```typescript
 let a = 123;
 let b = a;
 a = 321;

 console.log(b); // ???
 ```

 ---

 class: middle

 ```typescript
 let a = {key: 'value'};
 let b = a;
 a.key = 'another value';

 console.log(b); // ???
 ```

 --
 ```typescript
 console.log(a === b); // ???
 ```

 ---

 class: middle

 ```typescript
 let a = 10;
 let b = 10;

 console.log(a === b); // ???
 ```

 ---

 class: middle

 ```typescript
 let a = {n: 10};
 let b = {n: 10};

 console.log(a === b); // ???
 ```

 ---

 class: middle

 ```typescript
 let obj1 = {
  x: {bla: 'bla'}
  y: 123
 };

 let obj2 = {
  ...obj2
 };

 console.log(obj1 === obj2); // ???
 console.log(obj1.x === obj2.x); // ???
 console.log(obj1.y === obj2.y); // ???

 obj1.x.bla = 'something else';
 obj1.y = 321

 console.log(obj2.x.bla); // ???
 console.log(obj2.y); // ???
 ```

 ---

 class: center

 # Array

 <table style="width:100%">
  <tr>
    <th>Mutable</th>
    <th>Immutable</th>
  </tr>

  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

  <tr>
    <td>Array.splice()</td>
    <td>Array.slice()</td>
  </tr>

  <tr>
    <td>Array.push()</td>
    <td>Array.concat()</td>
  </tr>

  <tr>
    <td>Array.sort()</td>
    <td>- - -</td>
  </tr>

  <tr>
    <td>Array.reverse()</td>
    <td>- - -</td>
  </tr>
 </table>

    </textarea>
    <script src="https://remarkjs.com/downloads/remark-latest.min.js">
    </script>
    <script>
      var slideshow = remark.create();
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Functional Programming</title>
	<meta charset="utf-8">
	<style>
	@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
	@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
	@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

	body { font-family: 'Droid Serif'; }
	h1, h2, h3 {
	font-family: 'Yanone Kaffeesatz';
	font-weight: normal;
	}
	.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
	</style>
	</head>
	<body>
	<textarea id="source">

	class: center

	# Math and Code

	--
	# A heartbreaking Tragedy of Unrequited Love

	--
	# Or...

	--
	# A Love Story Against All Odds

	--
	# 💘

	---

	class: center

	```typescript
	x = x + 1
	```

	--
	.left[In code: increment a variable]

	--
	![](https://pbs.twimg.com/profile_images/498006663987601408/gF4SJw82_400x400.jpeg)

	---

	class: center

	```typescript
	x = x + 1
	```

	.left[
	In math...
	]

	--
	.left[```typescript
	x = x + 1 // -x
	```]

	--
	.left[```typescript
	0 = 0 + 1
	```]

	--
	.left[```typescript
	0 = 1
	```]

	--
	<img src="https://memegenerator.net/img-preview/Instance/PreviewInstanceData?instanceDataJson=%7B%22instanceElements%22%3A%5B%7B%22instancePicture%22%3A%7B%22imageID%22%3A5754965%7D%2C%22instanceTexts%22%3A%5B%7B%22text%22%3A%22You%20keep%20using%20the%20operator%20%3D%22%2C%22placeholder%22%3A%22top%20text%22%2C%22horizontalAlign%22%3A%22center%22%2C%22verticalAlign%22%3A%22near%22%2C%22color%22%3A%22%23ffffff%22%7D%2C%7B%22text%22%3A%22I%20don%27t%20think%20it%20means%20what%20you%20think%20it%20means%22%2C%22placeholder%22%3A%22bottom%20text%22%2C%22horizontalAlign%22%3A%22center%22%2C%22verticalAlign%22%3A%22far%22%2C%22color%22%3A%22%23ffffff%22%7D%5D%7D%5D%7D" width="300">

	---

	class: center, middle

	# Enter Functional Programming

	---

	class: middle

	- Functions as first class values

	--

	- Pure functions

	--

	- idempotence

	--

	- no side-effects, no hidden state

	--

	- Functional composition

	--

	- Immutability

	---

	class: center, middle

	# Benefits


	--

	- Functions as interfaces: input => output

	--

	- Simple logic is always reproducible

	--

	- Testability

	--

	- Easy parallelism / concurrency

	--

	- Function signature reveals what the function does

	--

	- Reference equality implies deep equality

	---

	class: center, middle

	# Javascript

	# pass by value vs. pass by reference

	---

	class: middle

	```typescript
	let a = 123;
	let b = a;
	a = 321;

	console.log(b); // ???
	```

	---

	class: middle

	```typescript
	let a = {key: 'value'};
	let b = a;
	a.key = 'another value';

	console.log(b); // ???
	```

	--
	```typescript
	console.log(a === b); // ???
	```

	---

	class: middle

	```typescript
	let a = 10;
	let b = 10;

	console.log(a === b); // ???
	```

	---

	class: middle

	```typescript
	let a = {n: 10};
	let b = {n: 10};

	console.log(a === b); // ???
	```

	---

	class: middle

	```typescript
	let obj1 = {
	x: {bla: 'bla'}
	y: 123
	};

	let obj2 = {
	...obj2
	};

	console.log(obj1 === obj2); // ???
	console.log(obj1.x === obj2.x); // ???
	console.log(obj1.y === obj2.y); // ???

	obj1.x.bla = 'something else';
	obj1.y = 321

	console.log(obj2.x.bla); // ???
	console.log(obj2.y); // ???
	```

	---

	class: center

	# Array

	<table style="width:100%">
	<tr>
	<th>Mutable</th>
	<th>Immutable</th>
	</tr>

	<tr>
	<td> </td>
	<td> </td>
	</tr>

	<tr>
	<td>Array.splice()</td>
	<td>Array.slice()</td>
	</tr>

	<tr>
	<td>Array.push()</td>
	<td>Array.concat()</td>
	</tr>

	<tr>
	<td>Array.sort()</td>
	<td>- - -</td>
	</tr>

	<tr>
	<td>Array.reverse()</td>
	<td>- - -</td>
	</tr>
	</table>

	</textarea>
	<script src="https://remarkjs.com/downloads/remark-latest.min.js">
	</script>
	<script>
	var slideshow = remark.create();
	</script>
	</body>
	</html>