Video details

Typed Functional Programming in TypeScript with fp-ts - Robin Pokorny


Robin Pokorny

Talk recording from React Day Berlin Conference 2019

Check out the latest React Day Berlin news –
See other React conferences by GitNation React Summit Amsterdam – React Advanced London –
# Lightning talks - Typed Functional Programming in TypeScript with fp-ts TypeScript is the main dialect developers use for writing React applications. React has a functional nature, however, TypeScript has not. It lacks some popular patterns and data structures we use and love in other functional languages like ReasonML, Elm, or PureScript. Fortunately, for the rescue, there is a rising library called fp-ts. Let me show you how it can help you.
Robin Pokorny Robin is a JavaScript developer at NewStore, creating a mobile retail platform in React. Enjoys writing functional JavaScript, explores Reason for inspiration. Organises several meetups, records coding videos, and frequently speaks.
  Subscribe to our channel to see more React (Native) talks:


Hi. I have five minutes to show you something great. So let's go really quickly. I think that functional programming is many of the heads showed it's now very popular and I believe in it. It's I think it makes things much more easier to work with. And it's even more sweeter when you have types if if you're a functional programming style. And that's why people like Ellen. That's why people like reading them well. And that's why it's also sometimes difficult to do this stuff in computer JavaScript or in TypeScript. What I want to show you is this library called LPT. Yes. By Julia Kante. It's a set of pipes and some utilities you can use to have all these sweet patrons and data structuring use in in these truly functional languages in typescript. And it's not just this library. This is the base of that. But there are more of those, including the iota's and a monocle, if you know, monarchal from. Monarchal from other languages is also there. I want to show you an example. I want to show you Cody later. Even the example is a sign up for Mike. This is a pain like we all have forms in our Web sites. We all have forums. And what forms need is validation. And that's difficult. Till this day, even though we have some libraries that can somehow asserted something is, for example, e-mail or a phone number. What do you what happens after you value this form? If you come to your JavaScript and then your functions and it's a string. The only adaptation you can do usually is do us drink and then it's very, very unsafe. You can call it a function of energy drink. You have no guarantee it's gonna be a email. So what did you really do at runtime? Check will do it for every function at once. E-mail. It's crazy. What will you do if it's not any Mevoli troll? Will you destroy your application? I have a solution. I will show you something. We will blow your mind. Did mine. I can create a type. Which makes sure dysfunction is always called if a valid e-mail address. And I can know it at compile time. I will show it some it's a magic in depth in functional programming. We usually distinguish between the ugly world outside and the beautiful, pure world inside. And on the border, we have this border petrol, and it's called IO input output. It makes sure that we translate the ugly things to the nice things nicely. And there is. I already talked about that. There is a library called I. Yes. And we can use that to create something which is called branded type. And that's the we will be the email I talked about. And it has free arguments. The first one is what type it's based on. So in our case, for email, it's a drink. Then you pass a run, a magical power, which is still typescript. It's called a type check, I hope. And here you pass something and a return is Bouley, if the thing is the email. So you don't only validate it's e-mail. It looks weird, but it's a small magic. Small magic. And then you you name it for debugging purposes purposes. Also, what you get from this is the actual type you can use in your type system. So what happens is that this structure has a function called Deko and it can pass anything to it. And you think it will make sure that the result is email. But what if it's not right? Will I troll? No, I don't want to troll. Then we have another type in functional programming, a pattern called ITR and either has two parts, its left or right. And life is a lot left is for errors and right is right. Meaning is the correct one. And you can make sure that when you call something, you have to handle the wrong state. We have to handle the error. That's very important. And again, to the library I talked about has some nice utilities for that. So what you can do, you can do fault. And then you have to handle the case when it's actually fail. And you have to handle a case when it falls and maybe show an error or do something else. The important thing, it's very visible and it's very it's very safe for you. And now comes a great thing in, TypeScript. If I ever tried to use email directly. The type, I will get an error. This is compile time error. This is what makes it text so great. It means that anything that has type e-mail has at least once in its like a lifetime had to pass successfully. The validation check. And you can be sure of that. And TypeScript makes sure that has happened during your coding and that's just great. Let me go for the benefits again. The first thing, it's very readable. You have a function that accepts email. You have it in the in the type so everybody can know is actually working with emails. Not just a string. It's checked on compile time. Again, for me, this is like the biggest magic. So TypeScript can make sure that this function receives valid email during all working statically in your I.D.. Great. And it's just TypeScript. We are not introducing a new language. You don't have to learn new stuff. You can use all the libraries available on NPM, which have a typescript or JavaScript or whatever else is on NPM. You can just use that. And I think very special. And because it's just TypeScript. It's fully a full stack, meaning it works in browser. It works in a server. It works everywhere. JavaScript runs. And you can be sure it works. Actually, the example I showed you is built using this. You see that you can kind of understand what is there, how things should be validated. And we have this used form hawk, which kind of does a magic. And for example, I will show you a link to it later. The problem with this, with the whole PTSA is if you look into that, it's math. It's just math. A lot of mathematics and it's very difficult to get into it. I say it's always like like if you want to learn siestas by reading the specification. Don't do that. You would need a workshop. And that's what we actually want to do. So we have this Web site called Tapscott. That fun. I mean, my friend put it together this week. So it's very brief. We just have an email sign up for and a link to the example. If you are interested. I would love to talk to you at this conference or I would like to see you on Twitter anywhere else. Thank you very much.