In this video, we learn to reuse the model created previously in other places in the framework.

KOS model factories are used here for the model to participate in the framework and its lifecycle. Defining a given model as a kosChild decorator allows the model to participate/align with the parent model’s lifecycle, until all children have run through their lifecycle entirely parent model will not be marked ready.

To this point, we’ve gone through the process of creating a model manually, and you’ve been able to see how we can register models and some of the tooling that’s available to make it easy for models to participate in the framework.

At this point, let’s take a look at the tooling that’s available to help generate those models going forward, so you don’t need to go through the manual steps every time.

To begin with, we’ll go back to our NX console, which we looked at before when we were generating a component.

If we select the generate function, we have a couple of options that are available to us as part of the KOS plugin that’s available in VS Code.

The first one here is generating a new KOS model for us.

When we select that, it’ll bring up a UI that gives us the opportunity to give the model a name.

In this case, let’s create a new model that’s going to capture some configuration details as part of a future lesson.

But for now, we’ll just call it config details.

There’s a bit of other settings here.

Where’s the application project?

And that’s because as part of this model, we have the option of generating a number of React components as well to help it be integrated, so things like hooks and higher order components and contexts can all be generated along with this model.

So that’s why it’s asking for the application project.

The model project is self-explanatory.

Where in our folder structure do we want these models to get created?

And the last one is the registration project.

This is telling us where you’re going to find the registration.ts, and this is more helpful if you have multiple projects, multiple applications rather, that you want to use.

You can specify from here, from the list of projects, where you want to register this.

Now that’s an accelerator more than anything because you can freely register models with any project.

This is really just giving the option to do it at creation time.

Now there are some other options, actually a number of them that are available, depending on the type of model that you’re using.

Most of them you can accept the defaults, as you can most of the defaults that were chosen already.

But things like, do we want to generate the hooks and higher order components for this particular model?

So we can choose to select or unselect, and you’ll notice at the bottom that it’s giving us a running total of, these are the artifacts that we’re going to produce when you actually generate the model for real.

So in this case, we’ll say, yeah, we do want the components, and we can choose things like, do we want data services included?

So that would be if we have to talk to the backend for any reason, it provides a placeholder for where those data services can happen.

The one that you’re probably most familiar with is the singleton.

We already talked about that as part of manual, so we can say that we’re going to generate this particular model as a singleton, and it’ll modify the generated model slightly.

When we’re satisfied with the configuration that we have, we can say generate, and all those files will get laid out on the file system, and we can start down here.

You can see that a new config details folder has appeared in our model project.

And as we did before, there’s an interface for both the model as well as the options.

It’s using the convention I mentioned before, where in this case, the model is actually extending from the options, but that’s an optional choice.

But in this case, there is a placeholder for that interface, and when we look at the model, we can see that it’s already configured and wired up for us.

So there’s not a lot of code here.

It’s more just creating the class, using the proper decorators with all of the convention required, specifying the model type for you automatically, and then stubbing out a couple of the common lifecycle functions that you’re typically going to see.

But at this point, the model is largely ready to be registered to use, and in fact, one of the other items that gets generated here is the configuration details registration.

So there’s a registration bean that’s going to be generated for you.

That includes a number of utilities and functions that are really useful as you start using the models in your project.

So the first one is the registration.

So all that configuration we had to provide manually in the registration option before is collapsed into an object that you can just spread over your registration config.

Similarly, the type is going to be exposed through a constant here and exported to make it available in other places as needed.

There are a couple of others that we’ve seen.

There’s the factory down here, and we talked about that before, how there was a manual way of creating new models.

In this case, we were able to generate out a factory that makes it very easy to create new instances of this model, depending on whether it was a singleton or a standard model, and it really makes it easier removing a lot of the extra configuration that you had to do.

So we mentioned it was a curried function, so it actually pre-configures the configuration up to the point where you can start to provide it the specific configuration for your instance.

The last piece that we haven’t seen before is this discriminator, and we can take a look at that in other places.

But short form is that it’s providing a mechanism to determine or discriminate the model from other types of models or other pieces.

So it can be an if statement, and it’s using a TypeScript utility to say if the method returns true or if this is an instance of that particular type of model, then it can be used in a block of data.

We’ll take a look at that in other areas, but it’s a nice convenience here in that it will nicely self-contain it into this bean, and when it’s registered or exported, you’re getting everything rolled up into this config details object that you can use in other places.

Some of the other things that are available are, I mentioned data services, and we’ll look at that another time, and also the types, so that when we’re using these models in other places, it becomes easy to get access to it.

Moving up to the UI project, first thing is it’ll automatically register this model with the framework.

So when it ran this, it added some additional data, so you can see it imported the config details registration bean that I talked about, and here’s an example of how that registration is being spread over our list of KOS models.

So I don’t need to capture all of the information that we had to do when we did it manually, but rather we just use this convenience utility to register it with the model automatically.

There are some other interesting pieces that we’ll look at definitely more closely as we get into other areas of the configuration, but there are a number of hooks and other React components that are generated with this, where there is a hook for using one of these models in a React component, as well as a higher order component that can make it very easy to hook these things in and taking into account all of the various lifecycle considerations.

So we’ll look at that later on.

There’s also a context, so it creates a React context that allows you to ensure that a whole hierarchy of React components can get access to this model relatively easily, and we’ll see an instance of that in the Dispense SDK as we get into that side of things.

But for now, you can see that the model itself was created very quickly using the tooling.

It’s of worth note that what I did through the tooling itself can also be done through a command line, so if you’re not one to use a UI to develop these things, there is a command line and it actually spits it out for you here that you can use this to create models with all the configuration that you need relatively easily.

If there are any variations or anything that you want to capture, you can do that here or through other sorts of tooling.

Thanks.