Create linear data flow with container style types (Box)

Brian Lonsdorf
InstructorBrian Lonsdorf

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 3 years ago

We'll examine how to unnest function calls, capture assignment, and create a linear data flow with a type we call Box. This is our introduction to working with the various container-style types.

[00:02] What are we looking at here? We have next [inaudible] our number string. What this does is take a string down here like our number. We could have spaces, comes with user input or whatever. We're going to trim it, parse int, add one number to it, and get the char code from string.

[00:15] The point of this function is not the actual functionality. If you look at each of these lines, they're doing different things. We have a method call here. We have a function call here, an operator, and then a qualified class function here. We want to unify it all and compose it in one linear work flow instead of separate lines with lots of assignment and state as we go along.

[00:34] How can we do this? Let's run it to see what the output is. It's the capital A. That's because 64 turns into 65, then we get the char code of that which is the capital A.

[00:46] If we comment this out, and let's rewrite this in a new way, one thing we can do is say we'll try to compose this up in one big expression functionality. We'll call trim which is the method. The next thing that happens is we parse the int. The next thing that happens is we add a one. We call string from char code around it.

[01:08] This is very confusing. It will still work. Let's give it a shot. There it does. It's got a capital A there. If we look at the control flow here, it's totally bogus. It's one expression, very clean, but hard to follow. It jumps all around here, trimming, parsing, and adding one over there.

[01:23] Let's borrow a trick from our friend array. The first thing we can do is put our string in a box, and that's it. We put the string in a box. It's just an array with one value.

[01:33] Now, we can map our S and trim it. We can keep chaining these maps. We can turn this S into a number by calling parseInt on it. What do we have? We have an I here for an int. We can say I plus one.

[01:47] Finally, we'll say I is string from char code. We turn that back into a number. This is very, very nice letter rather. If we run this, we should have A in a box. Indeed, we do. We have A in the array. I'm calling it a box here.

[02:01] What happened here? We've captured each assignment in a very minimal context. S cannot be used outside of this little error function in map. Despite calling it the same variable here, we can change this to R or whatever we want to call it.

[02:14] The point is, each expression has its own state completely contained. We can break up our work flow, and go top to bottom, doing one thing at a time, composing together. That's key. Map is composition, because it takes input to output and passes it along to the next map. We're composing this way.

[02:32] Let's see what else we can do here. Instead of an array with a bunch of maps on it, why don't we make this a little bit more formal? I'm going to make a type called box. Box is going to take an X here. We'll define a map of our own that works exactly the same way.

[02:48] We'll take some function F. It will return a box of F of X. It's returning a box of F of X, so we can keep chaining along. If we didn't return the box, we wouldn't be able to call .NET, .NET again and again.

[03:00] We're running our function with F on X, and then putting it back in a box. This should be exactly the same thing. We could put this in a box and have this work flow happen here.

[03:09] Let's do one more thing, though. Because it's hard to look at this data structure in the output, let's give it a little inspect. This is a nice little trick that allows us to, when we call console.log, we actually see what the data structure is holding and not just the data structure itself.

[03:23] It will format the output and the little template there earlier. We need a little comma, and let's give it a go and see if we have ourselves a box of A. Indeed, we do, a box of A. That's very good.

[03:34] With this, we can start composing along. We've unified both method calls, function calls, operators, and qualified. We can start parsing int here. We can do a constructor for new number, and so on and so forth.

[03:47] If we want to add more functions, we can go ahead and map along, and say maybe I, or what is this? It's a char code now. It's a C here. We'll say C, too, in our case. Now, we have a lower case A in a box.

[03:59] What to do with this box? We didn't actually want it in our box. We wanted it outside of the box. We wanted our normal character here. Let's add one more function at the box. We'll call it fold. What this will do is remove it from the box as we run the functions just like map, except it doesn't put it back in the box.

[04:15] Down here on our last statement, we can call fold instead of map, which will fold it out. It will remove it from the box as it runs this function. Does anybody have any questions?

[04:24] I thought map was supposed to loop over stuff?

[04:27] Map isn't so much about iteration as we'll see. It has more to do with composition within a context. In this case, box is our context. We're going to be using a lot of these container-y types to capture different behaviors as we compose. It allows us to compose in different ways.

[04:41] Isn't that the identity factor?

[04:43] Indeed, it is the identity factor, but we're going to call it box for now so we don't scare everyone.

[04:47] That can't be efficient.

[04:50] As far as efficiency is concerned, because this is composition in disguise, we confuse this together. As it stands, you'd be hard-pressed to tell any difference at all even in the large-scale application doing all these things unless you are making a pacemaker, doing a bench mark of 10,000 or something like that.

Ian Hofmann-Hicks
Ian Hofmann-Hicks
~ 5 years ago

Been waiting for this for sooo long it seems. Thanks so much for getting these out, binge watched the first half and I gotta say, this is a wonderful continuation of the Professor Frisby series!! So much good information in there, I would have probably finished in one day, but had to open up node and try this magic out for myself!!

The imperative to declarative refactorings are my absolute favs.

Joseph
Joseph
~ 5 years ago

I'd like to know his workflow for this exercise for when i'm on just my laptop without screens. Obviously VIM, possibly TMUX... or some weirdness with VIM i don't know... Node, likely with autocompile script on save?

Steve Schwarz
Steve Schwarz
~ 5 years ago

I found the sped up voice difficult to understand; by using the speed control on the bottom left and turning to the slowest speed: 0.8 it was possible to follow what was being said.

Steve Lee
Steve Lee
~ 5 years ago

What is this magic "inspect" thing? How does it get called?

Brian Lonsdorf
Brian Lonsdorfinstructor
~ 5 years ago

Hi! I made these videos.

I know lots of people are requesting changes, but there will not be any for two reasons:

  1. I don't have the original footage anymore (the videos are huge so i delete them afterward)
  2. I really wanted to make this project and it turned out just how i wanted it. There's nothing to "fix".

My choices here were against Egghead's style and recommendations and should not reflect on them at all.

If you are interested in learning the content and you feel that's not possible with this series, I am adding it as chapters to https://github.com/MostlyAdequate/mostly-adequate-guide and there are other instructors here teaching FP in different ways.

Thanks for your feedback and I'm truly sorry you dislike what I've made.

-Brian

Aurélien Bottazini
Aurélien Bottazini
~ 5 years ago

I love your work. Thanks a lot for the time you spent on this

Ray Dai
Ray Dai
~ 5 years ago

Thanks for the effort of putting these awesome stuff up and make it easier for newcomers, after almost watching all your videos, still not bad to come back and revisit. :)

Andres
Andres
~ 5 years ago

Thanks for your effort of making this hard topics enjoyable. For me it is a bit difficult to digest all the infomation with the speed on this video as english is my second lenguage but I think it is not impossible. Those chapters will come in handy as I watch your videos

marcelo
marcelo
~ 5 years ago

i've watched all videos now, and i find a little bit distracting the video format but nothing too bad...

about the content of the series, is the box concept a little bit what Rxjs does under the hood? (not the iterator observable pattern, but how it chains methods )

Brian Lonsdorf
Brian Lonsdorfinstructor
~ 5 years ago

Yes! RXJS is founded upon these exact ideas. Eric Meijer (haskeller/author of famous white papers/legend) brought the ideas from Conal Elliot's FRP stuff to C# and JS.

All holding the monadic spec/theory, the implementation is free to be as performant as it wants without losing composability.

Kristian Mørch
Kristian Mørch
~ 5 years ago

Best ever 👍 First time I have smiled so much while learning.

Ferdinand
Ferdinand
~ 5 years ago

I love it!

Brandon R. Howard
Brandon R. Howard
~ 5 years ago

Great video. I really like the concept and the author does a great job explaining. The fast speed and animations are a bonus! 😁

Belen
Belen
~ 5 years ago

I've downloaded this app called Boom 2 that lets me change the pitch. After that and slowing down the video to 0.8 I could finally watch it :)

MetaSean
MetaSean
~ 5 years ago

While the voice does occasionally make it heard to understand what's actually being said, I really like the format! (Granted, I tend to watch most tech videos at 1.5-2.25x so I may be a bit biased.) I'm much more bothered by Right always being to the left of Left, likewise, Left is always to the right of Right.

That said, and to second Steve Lee's question:

What is this magic "inspect" thing? How does it get called?

Brian Lonsdorf
Brian Lonsdorfinstructor
~ 5 years ago

Hey there!

I didn't realize inspect() was a bit esoteric. The idea is that it is called implicitly by Node's console.log() to give you a way to show your own data types.

It doesn't work in the browser though. For that, I'd use toString() and call console.log(String(x))

Hope that helps!

Mike
Mike
~ 5 years ago

I am rewatching this series and still love it.

Daniel
Daniel
~ 5 years ago

One solution is to download the file, open it in VLC and press [

Pierre
Pierre
~ 5 years ago

To get a normal voice:

  • Download the vidz
  • Open in VLC
  • Command comma for the preferences
  • Show all
  • Audio
  • Untick "Enable time stretching audio"
  • Save
  • Window > Audio effect
  • Enable equalizer
  • Play
  • Command minus to reduce the speed to 0.67%
  • True voice activated :)

Enjoy

Tre' Codez
Tre' Codez
~ 5 years ago

That's what I've been wondering. :)

Mike Robinson
Mike Robinson
~ 4 years ago

I liked it, do more stuff like this, kept me interested.

Babak Badaei
Babak Badaei
~ 4 years ago

Haha... awesome!

Cam Kida
Cam Kida
~ 4 years ago

I think I'm the only person who really enjoyed this video, hehe. The idea about a class room is nice and the content is really good!

chochinlu
chochinlu
~ 4 years ago

Amazing tutorial !! Speech voice 0.85x is fine. :)

Roman Kuba
Roman Kuba
~ 4 years ago

I really do enjoy this Video. I appreciate the interesting presentation and the Q&A part in the end. The contents is really good, well done :)

Tony Catalfo
Tony Catalfo
~ 4 years ago

how do we use inspect: () => Box(${x})

Seung
Seung
~ 4 years ago

I actually love this course. and it is indeed fun to watch~ Thanks.

Seung
Seung
~ 4 years ago

I am loving this course~

Fluidly
Fluidly
~ 4 years ago

What is this magic "inspect" thing? How does it get called?

I too was wondering about this.

Paolo
Paolo
~ 4 years ago

This doesn't bothered me at all, and the content is pure gold.

Steve Lee -- What is this magic "inspect" thing? How does it get called?

I would like to know too. How does this even work? Is this a node thing? Can someone explain or point to the right direction?

Thanks

Ilia luk
Ilia luk
~ 4 years ago

Brilliant, I disagree with the previous comments, I think that the cute voices and the stop motion animation adds allot of fun to this mind-twisting concept and actually helps me to stay focused.

Max Zhukov
Max Zhukov
~ 3 years ago

With 0.85x Speed is great! And voice is Okay :) Something new!

Sherry Hsu
Sherry Hsu
~ 3 years ago

There is so much in this short 5min clip. The Box concept blew my mind! thank you!

Daniel Miclos
Daniel Miclos
~ 3 years ago

The only issue is that people thinks I'm watching some children's channel in the office.

Anubhav Saini
Anubhav Saini
~ 2 years ago

Love it. The voice, the setup. The information! Thank you so much for trying something different. The voice and classroom is what I imagine a Professor Frisby will have.

Ignore the haters.