Check out a free preview of the full Rapid Application Development with Code Generation course

The "Generators" Lesson is part of the full, Rapid Application Development with Code Generation course featured in this preview video. Here's what you'd learn in this lesson:

Lukas walks through generating templates and updating an Axios template to generate the appropriate domain model. A brief walkthrough of utilizing a reducer template generator is also provided in this segment.

Preview
Close

Transcript from the "Generators" Lesson

[00:00:00]
>> Let's start to get a little bit more precise in what we're generating. So, I mentioned that I think of a rapid application development approach very much like a spreadsheet is that you have a cell which is where a feature and a layer converge. And there's nothing wrong with generating a single cell, like I need to update this one thing.

[00:00:32]
No problem, you can generate that one thing and that is fine. So, a cell is nothing more than a template. And so, a template is a very context specific thing that you're taking the data, you're hydrating it and there you go. So let's step into stackblitz and let's look at how to generate a template.

[00:01:05]
So in the starter we have a couple things. We have our templates here and in one of our templates, and so let me open this in a new window so we can see this a little better. You notice here, we have our model name variations and we have an HttpClient templates.

[00:01:32]
So this is angular and you'll notice that we have albums, and here this is inappropriate template. Now, when we get down to our axios template, so if I was doing this in react, this is what this particular service would look like. The problem is, what do you notice about this?

[00:01:58]
This is, Oriented towards a course, which is not what we're using. And so the challenge here is that we want to go and take this axios template and update it so that it is appropriate for us to hydrate with a domain model. And, so what you'll notice here is we have our config, we have our schema, we have our build name variations and so we've seen this just generating the name variations, and then we have this generator.

[00:02:46]
We have a few generators and so if you look into the file system here, I'll pull up service generator first. That at the core of this, we have an object that adheres to a generator interface and this has a single generate function. And so you'll see here interface generator and it has a single function, but what this allows us to do is anything that implements this interface we know that it has a generate method.

[00:03:28]
Very, very important, because now we can program to the interface, and not the concrete instance. So any design pattern book talks about why this is important, is that we can swap out any generator, and we just know that if I call generate, something's going to happen. And what this returns, and so we'll come up here, this generates method takes a schema object and a config object, and all we care about on the config object is scope.

[00:04:03]
And so using npm scoping you have something like at scope, your API interfaces, so whatever that is. And at the bottom, we are returning an object that has the generated template, it has a title, and it has a file name. And so this is interesting and I'm not gonna get to it today.

[00:04:28]
But using a library like JS zip, that when you zip up a number of files that if you have a constructed or a calculated file name, that will actually preserve that structure inside of the zip. And so you can actually take a folder and within the folder when you unzip it it'll be libs core data source lib services and so will actually respect that file structure and so you can just pick it up and drop it on your generator project, so pro tip.

[00:05:05]
And inside of the template we are pulling off the properties that we need off of the name variations, so ref refs, model models, single params. And then we're just jumping in and we're filling them out. Pretty simple, right? So if we go into our axios generator, you can see here that I have the basic shape here, axios generator, generate, template, title, file name, and the problem is I have a template that has not been turned into a proper mold.

[00:05:52]
So, what I'll do here is I'm going to go course and we'll just replace this with. Refs. And I think that is actually incorrect. This would actually be model. This would be refs. And we'll just kind of click through here and so this is again you're just kind of going through and looking for this, so this I can go here, this is singleParam And so this is where it's a little frustrating in stackblitz.

[00:06:54]
Wanna go ref and then because this is plural, I'm going to capture this. And I guess if I would have started the plurals first, this would have been fine. So let me just go top to bottom one more time and make sure that I have this. So environment model.

[00:07:21]
Good, good, good, good, good. One thing that you will see here is that when you have string literals in a template that is a string literal, you have to escape some things. So if you're using backticks in a template as I am, you need to escape the backtick and you need to escape the dollar sign or the string literal inside of the string literal will literally mess things up.

[00:07:52]
So hopefully I'm good here just looking, looking, looking and so let's save this and let's go back into our example here, and see if I blew up everything. So our HttpClient is working still as advertised. But then now within our axios template we have album. Albums And This might be a little broken, but I'm not gonna get too hung up on this.

[00:08:44]
The main thing is that we have effectively replaced the pieces that we need. So now, service generator generate, axios generator generate and let's do another schema just for fun Let's go with, I don't know. Let's say you're in a band and Or you run a guitar shop and so you have a guitar schema.

[00:09:26]
I don't know why you would do this, but why not? So model plural. Here and now let's take and we'll just copy this instead of album schema, guitar schema. We'll flip back over. And lo and behold, now, I have a working, for the most part guitar service. And I think somewhere around here, I even have a reducer.

[00:10:20]
So why not? Let's just throw that in here. We'll go like this reducer template and reducer generator. We'll save this. And now we have a reducer. But I need one for the guitar. Okay, well if you insist stakeholders can be so rude sometimes. And here we go. So, once this is set up adding another reducer or another service, it's really not that, I mean, it becomes negligible.

[00:11:07]
So if you remember that graph that it gets to the place where it's like, you need one of those, no problem, you define the object and you have now generated it and you're ready to go. So, in a lot of cases, you absolutely can become 10 times faster or program 10 times faster or rather achieve outcomes 10 times faster by delegating and automating the pieces that are conventional.

[00:11:42]
So just kind of hammering on this point reinforcing it is that we saw how what an incredible short amount of time it took me to generate some reducers, some additional templates. And at least in this example, I didn't have an axios template, I just had a an axios file that was specific to a specific domain model and, we went through, chopped it out and, that was that.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now