Managing Impurity Exercise

[00:00:00]
>> Anjana Vakil: I'm not allowed to write anything to the console. I'm not allowed to write any files, I'm not allowed to read any files. I'm not allowed to make any fetch requests or import any libraries or do anything, basically, except manipulate truth values. [LAUGH] Unless you're like a weirdo philosopher like me, [LAUGH] you probably are like, how am I supposed to do any actual programming with this thing?

[00:00:23]
And that's a very valid question that is actually something that the whole industry was asking itself for many decades, between in the 1930s when functional programming was invented. Essentially, by Alonzo Church, and today when we have actual productive tools for doing real-world programming in functional land. So how does that work?

[00:00:51]
Essentially, what we wanna do is isolate the impurity. We want to, in the programs we're gonna look at today, and in even super complex functional programmings, what we do is we push all of the impurity, all of the side effects. All of the reading files, whatever, to the outer edge of the program, and we make sure that all of that impurity is just happening in kind of that outer shell of what's going on when I execute my program.

[00:01:26]
Then inside of my program, once it has received whatever inputs it needs from the impure code that is interacting with the real world. The inside core of the program we keep pure and functional, so that it's super predictable. So even though our program itself might not be deterministic now, because we have this outer shell that can contain impurities, like, what's the file I should write that output to?

[00:01:55]
Or which library should I be using to generate random numbers, that's not deterministic, right? All of that gets pushed to the furthest reaches, the outermost, the kind of the very top level of the program and everything else stays pure so that we can more easily predict. Okay, if I am given this library for making requests or what have you, everything else that follows from that is going to be deterministic and not have any side effects.

[00:02:42]
And that's where fancy jargon like monads and whatnot also come in, because there's a lot of different techniques in functional programming, which we'll look at for isolating impurity. And making sure that it's not going to affect other parts of the program that could cause those unpredictabilities that give us headaches as JavaScript programmers.

[00:03:10]
So what we're gonna be doing here, and this time you have a little bit more realistic code, we have this file render js, that defines, well, let's look at what it does. First of all, here, it has some functions that don't do anything, it imports some value, and then it does a bunch of stuff.

[00:03:36]
So we're making an SVG element, configuring it, setting its contents, and then?
>> Student: Getting it into the DOM, attaching.
>> Anjana Vakil: Then we're attaching it to the DOM. So this is not functional code, [LAUGH] none of this code is in a function, first of all, so that's one clue.

[00:04:03]
But also we got a whole bunch of impure things happening here, right? Like replacing all of the children of an element in the DOM, that is not returning a value, that is doing something in the world. So your mission, should you choose to accept it, is to get these tests to pass, which I'll let you read through on your own, by implementing the pure get SVG and the impure render app functions.

[00:04:36]
And the idea here is we want to isolate an impure Render app, we want all of the messy side effecting stuff to happen. And in pure get SVG, we want it to be a deterministic non-side effecting function that will always give me the same output. So that then we know, yeah, I might have some debugging to do an impure Render app once I know but for everything they inside that pure get SVG, I'm in functionally confident deterministic rend, okay?

[00:05:15]
So the idea we're gonna move all this imperative code, do this, do that, assign this, update that. We're gonna turn this into a little bit more of a functional style by moving this code around into those two functions, cool? So every time you edit something here, and this is just a StackBlitz tutorial kit thing.

[00:05:38]
If I edit something here, like I don't know, art, it will rerun the tests for you. So once you see that green passing, yeah, good. And if you want to wipe out all of the stuff that you've already done, you can click the solve button, but don't do that yet, cuz where's the fun in that?

[00:06:01]
[LAUGH] All right, there's also a reset button, if you do click Solve, there'll be a little reset button you can get to go back to the original starter.