React Summit

React Summit 2023

<p>Types and Functional Programming are a great combination to get feedback quickly about types that don't make sense and compose functionality to get a desired result. fp-ts is a very powerful library that provides the tools to work with types and functional programming in an outstanding way. Let’s see it in action in a React Application to make it more type safe and composable by defining impossible states that will reduce the possibility of edge cases in our application.</p>

Making Impossible States with fp-ts and TypeScript in a React Application

Hello, I'm going to talk about making impossible states with TileScript and FPTS in a real application. My name is Cristian Motocchi and I am a software developer at StyleBuilders. And here I've been learning about Haskell and PureScript. And there are two things that I like about these languages that I always try to make web languages of frameworks. First is static typing because that helps me to get errors as I am developing code. If suddenly something doesn't type check, OK, I won't be able to execute the code. I will have to fix that first. And functional programming because by composing functions I can define my code. I think the best way to get static typing in a real application is with TileScript. The type system is very rich. We have type aliases, type unions, interfaces, type variables and many more things. And combining TileScript with Randa or Randa.scrot we will get functional programming. And that will be it, right? Nevertheless, recently I came across FPTS which is a functional programming library that has a lot of features. It provides many things. It offers a lot of data types like options to represent computations that may or may not exist. Computations that may or may not fail, that's a needed. Non-empty arrays. And also data types to wrap async operations that may or may not fail as well. And many more types. Also some functional helpers like this back function that we have here which helps to define a data flow from top to bottom without the need of intermediate variables or defining a very long line of code which may be hard to do. This one goes from top to bottom explaining what it is doing on every step. And the best part of FPTS is that it offers type classes and typing senses. Type classes are a good way to get added polymorphism. Here we have an example of the enqueue type class with a type variable T. And we need to define an equals method to define a type instance of these type kits. I will can define text instances defined in JavaScript objects and we can fill with complete types. And we have many type classes defined in FPTS, monoids, functals, applicatives, monads, and many more. Now, let's combine JavaScript and FPTS to make impossible states, which is something that I learned by Richard Feldman in this conference some years ago, as you can see. And the purpose is to get compiler errors to avoid undesired states. Let's imagine the following example. We have this form to order a pizza. We have the main selection and the main ingredient, then the second ingredient, which is optional, and the list of extra ingredients. And the main ingredient is not selected by the code at the beginning. So we can think about the following data type to represent the data that we place in that form. We have a main ingredient, which may be selected, the other not. A second ingredient, which is optional. And the list of extras. And this type could work, nevertheless. We can have states that we may not want in our application. For example, we don't want the users to have the list of extras if they haven't selected the main ingredient. So we don't want this state to happen. That means one complaint we will get at some point in this case. If we define this type of a slash. So let's think about what thing we do to get a type error if we define this type of state. We could think about the main ingredient is not going to be only the ingredient, it's going to be the ingredient and the list of extra options. Yeah, so if we try to define something like this, with this data type, this time we will get a type error. And that could be a problem. However, we have another scenario where the user hasn't selected the main ingredient, but they do have selected the second ingredient. So that's something that we don't want either. So let's think a little bit more and let's come up with this data type. Using the time system from TypeScript to get a better type that will complain in the previous cases. So in this case, we have a non-main ingredient, which is a data type that doesn't have any value, not many variations, so nothing else can be selected. But as we can see, it's going to have the main selection, it could have the second selection or not, and then the array of extra ingredients. So this type will complain if we try to define this or this is nice. And that's nice. And we can define smart constructors and other functions around this type. And even we can define type instances for this data type so we can use it later. For example, we want to use it with groups, we cannot use the React groups because they use, for performance reasons, React checks the object reference and disarm objects, but that's not going to help us. We will have to use FPTS React stable groups, which will use the echo instance in order to know if a type has changed, if the state has changed on a data type or something like that. So we can avoid rerenders in our application. Okay, so in conclusion, if you like data safety and functional programming, JavaScript and FPTS are a good option. Thank you so much for your attention.
