Unleashing the Power of Duck-Typing in React: Crafting a Generic Application

Hey, React Summit! My name is David Villar-Marin. Today I want to share with you some of my thoughts about a way to create a generic React application using TypeScript. So first of all, who am I? I'm an Ecuadorian. I'm a developer by day and a chess player by night. I've worked at Stack Builders. That is a consultancy focused on functional programming. We use functional languages, but we also do cool stuff like this. I'm also an open source contributor. You can check my GitHub.

I want to start saying that this is just one of the many ways in which you can create generic applications in React. Just to be aware. So yeah, what do we have today? First of all, we are going to talk about the Type Build. We are going to create a generic application applying this concept, and later on we are going to see some routing of a generic application and also an example. So yeah, let's jump to it.

First of all, what is the type build? The type build comes from a test that says basically if it looks like a duck, swims like a duck, and quacks like a duck, then it probably is a duck. This is just logical inference that implies that someone can identify a non-subject by observing that subject's characteristics or properties. So we can use this test on the programming world. And yeah, basically we can check some properties and later on guess the type of a certain object.

So why duck typing? This concept brings you flexibility and simplicity so you can have loose coupling code and also for short simpler code. And this encourages better code using, I mean, applying reusability, modularity, and maintainability. So yeah, first of all, how you can implement duck typing on TypeScript using type guards. So what is a type guard? It's a function whose return type is a type predicate. A type predicate is a type assertion that checks if an object has a specific property or set of properties. In this case, we are checking if the pet that could be a fish or a bird has like a stream property. So that allows you to create custom logic to determine whether a value is called upon a specific type. In this case, we are creating this as fish. So we are checking if the pet that could be a fish or a bird, it is indeed a fish. This is a formal type narwhee.

So yeah, this enables type safe code, better compile time and error checking for short. So in this little condition on the left, we are making sure in the first part that pet is always a fish. And since pet could be a fish or a bird on the else statement, we can call period properties or period methods.

So yeah, we are going to start creating this, crafting this generic read application. So first of all, we start with the models. The models are just simple templates. An important part here is the type property. So we are making sure that all our components can have this type property, input, x area, could be a checkbox, could be a button. And also we can have many, many more properties like variant or icon for the buttons or for the accordion. So this is just an example of a container component.

So yeah, after having your models, you can create your type cards. So first of all, you are going to have a CMP variable that is our known object. So could be anything. So yeah, that's why we are creating our type cards. For the text input, for the checkbox, for the button, and also for the accordion. So yeah, we are making sure that after applying these functions, we are checking that this CMP variable is of a certain type.

So yeah, later on we are using a switcher component that basically renders other components conditionally depending on the CMP variable type. So in the first line, we are checking it, okay, it can be of the text input model type. So if that is true, we are rendering a text input. And the same for the rest of the components. So yeah, we are rendering things properly depending on the CMP type basically. That's one thing, one important thing.

The other important thing when working with React, of course, you have to create your components just as you would for any other application. So in this example, it's a simple text input. You can use a state, you can use a rep. This example is just a state for the input value. The important part here is like COMP will only contain the text input model properties. So yeah, you can use text, for example, of the label, or you can use the value as a default value of the input value.

After that, we have to route. We have to create our router on a specific route that is going to be dynamic with an ID in this case. This gives you the flexibility to have different pages, right? So I like to call them like applications. So this base React application that we are building is now a platform from my point of view. This is because you can handle an immediate number of pages. The important part here is that we are rendering these outlets with REST and REST is an array of objects with all the valid pages. These objects could have inside anything. We don't know, basically. So yeah, what's inside the outlet? Now the outlet is responsible, first of all, for getting the valid page with the ID from the parents. And after that, this map every component using the switcher that we created previously to render components properly. So basically this is just a simple map that is going to render things depending on the kind of type, right?

This is an object example. So we have an ID, we have our name, we can have any other app information. But the important thing here is the components array. So inside this components array, we can have different objects as we are seeing on both sides. And yeah, these objects are going to have different types. This example, we have text that says, like, please write your name on the input below. We have an input with a text name with no value for now. And also we have a button with variant of line and a text submit.

So we are going to see the result of this object in the next slide. So first of all, you can have a menu in your application with all the valid pages. So you can pick one. In this case, you can see on the bottom left that this please write your name on the input below is the little application that I just showed you with the object, with a previous object. So this is really extensible. So you can handle complex forms, adding more and more objects to that components array. So on the left, we have a complex form with full name, image, number, comments. We are using inputs. We are using static text. We are using there a checkbox and also a button, a submit button. So this is just the front end, of course. We will need a button to retrieve the objects and perform different actions. But yeah, this is a good way to create generic applications on the front end side.

So yeah, you can find that sample app on my GitHub. Thank you for your attention. Thank you, Ritesummit, for having me. And I hope you enjoyed the rest of the conference. Thank you so much.