Hyper Cloud Functional JS with Deno, 28 May 2021

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Functional JS - Understanding ADTs - Tom Wilson

Description

ADTs are powerful functional patterns that enable us to control how pure functions or calculations can be applied to values in a container. This video shows the concept of ADTs without functional jargon.

For more information on ADTs checkout the blog post: https://blog.hyper.io/understanding-adts/

A

Hello internet, my name is tom wilson and I'm going to talk about adts or algebraic data types for the next few minutes. I will demo just how you can understand them right, they're, super powerful and once you understand them, they're very easy to use.

A

So what I would like to do is kind of show you guys um what an 8080t is and how you can use it in a very simple approach and then later I'll do another screencast on async adts, which will allow you to essentially compose side effects and operate on side effects without actually calling the side effects and then once you've done. All of your logic then call the side effects and you are essentially pushing your side effects or actions to the edges of your app and not kind of embedding it in your business logic.

A

But first, let's talk about why adt, so adts really gives you all of the ilities in your code right. It creates maintainability, testability, reliability and extensibility, um but learning them can be a challenge because you have to kind of change. Your mindset from maybe the imperative kind of style of programming that we we've grown accustomed to and really think more in terms of data flow right data flowing through a pipeline.

A

So um what we're going to do and we're going to use dino for this, so I'm running uh dino and I've got a little. um You know kind of console set up and every time I uh type, let's see.

A

B

A

We should see it kind of pop over on the right. Maybe let's see I think I have to save it. That will help right. There we go so we've got this little. uh You know demo console setup, so we can go through some exercises because it makes a lot of sense when you see it in action. um You know an adt is basically a container and that container allows you to put values in and then it gives you a set of rules on how you can manage mutate or change those values by calling methods.

A

A common container that has very similar characteristics to an adt is an array so with an array, if you think of it, even the square brackets kind of look like a box, so we can basically put a value in this array like a box or a container, and then we can call map and map is one of those special functions that when it's called you give it a function and that function basically has the first argument of the value that's in the container, and then you can do something with that argument.

A

So we can, you know, add one right and then whatever that function returns is what's replaced in that container as a value now I know, arrays can have multiple values and when you call map on an array with multiple values, it'll actually apply that function to every value in the array, but in this case we're only putting one value in because that's how adt's work now that value could be an array and it could do certain things, but adt's basically allow you to stuff a value in a type, and then you can call these functions like map and what's cool about this is so map's going to take the value one and place it in the v variable and then add one which will result in two and return that and pop that back into the box.

A

Then we can run a.

A

Pop and that's going to actually pop the value out, so if we we run this, we should get um an error. Let's see, we cannot read one of undefined, so maybe it doesn't like me not having a colon up here. Let's see okay, so we did that now, let's, um let's assign it to a variable. That would be helpful right.

B

A

And then we'll just log that out right, so we get two and if we map.

A

A

We'll get six and so on and so forth, so we can chain these maps together as many times as we want, and it's always going to operate on the value and replace that value and then using pop will allow us to extract it out so normally in an adt, this method would be extract.

A

Now, another cool method in an adt is a chain. A chain method works like a flat map.

A

It will provide the value that's in the container and then it will replace that value with another container it'll replace the whole container, with whatever container you return. So if we return, you know 42 and we have to wrap it in that container, so we're returning a whole container. Then it's going to replace this container that we've mapped and have done all these functions on with this new container 42..

A

So, let's see oh wait, array doesn't have a chain method. Array has a method that does the same thing as chain called flat map. So if we change this to flat map, we get 42.. So basically array is like a little um if you squint at it little adt right.

A

um You've got map and you've got a chain and you can kind of put values in a container, but um let's use kind of or create a real adt and like the array, it's going to be a an adt that takes any kind of value and puts it in a container, but um we're going to use an object instead of an array.

A

So let's do that and let's go ahead and just call it id. So this will be id and it's going to take a value and then it's going to uh put it in an object and that object is going to you know kind of, contain the value and it's going to have a map function and it's going to have a chain function.

A

And finally, we're going to create an extract function so, like the pop function, the extract function will just return the uh the value right and I don't need that. I don't think okay cool. So what does our map function?

A

Look like our map function needs to take a function right, so it's going to take a function as an argument, and then we want that function to be applied to the value right and then we want that result to be returned into the container, and so we can do that by creating a new container and just putting that value in and that's our map.

A

Now, if you uh don't like this syntax, you can use compose or something like that, but we'll just leave that that's pretty simple and then our chain.

A

Basically a chain needs to return a adt of the same type, so in this case id, but our function that that we pass into the chain function will actually be responsible for returning that. So all we have to do is kind of call that function and pass the value. So that's super easy, and that is our new fancy. Adt.

A

It's an identity. Adt and we can do all sorts of things with it, so we can, you know basically take our x and say ide one map.

A

V plus one and then extract if we console log.

B

X, we get save, we get two right, pretty cool.

A

um Now we can map again.

A

And we can map again and.

B

A

And we can do you know any function we pass in and whatever value it returns is going to replace the value um in the box or in the adt right, and we can also do our chain as well so chain instead of flat map, we grab the value and then we simply call id and then whatever we want and return that. So then that's going to return id 42 and ignore all the computations prior to that.

A

But but that's basically, an adt is you're, taking a value you're, putting it in a container and then you're running these functions on that and then once you're done, you call extract and they can get. You know kind of very interesting because you have this chainable interface. You can do nested adts and you can kind of really add some uh complex logic to that.

A

Now, where it gets interesting, is uh in the next uh demo, I'm going to show async adts and the sync adts allow you to use the same kind of patterns to essentially wrap side effects in pure functions and run them through a pipeline and then, when you're done actually execute the side effect functions.

A

So that's really really cool. But for a summary all you need to do when you start thinking about. Adts is think about this container of values and then you're passing values down a pipeline of functions using map and chain modifying the value and yeah. That's it.

B