Check out a free preview of the full Production-Grade Angular course
The "Layering in More Services" Lesson is part of the full, Production-Grade Angular course featured in this preview video. Here's what you'd learn in this lesson:
Lukas explains that when building an application at scale, it is important for engineers to think about the patterns that are often used to build at scale, and demonstrates how to build a new service and write its data model.
Transcript from the "Layering in More Services" Lesson
[00:00:00]
>> When you're building applications, when you're doing them at scale, it's important to stop and notice, what are the patterns that I'm using over and over, and over again. So, for instance, let's go back to the command line, I'm free styling here, but I think it's really important to just call this out.
[00:00:29]
If we go, I'm going to just shut this down for a minute. And let's go and nx g. We're going to generate another service and I'm going to call it items. And so we're going to generate an item service. And I'm going to put it in the coordinator project.
[00:00:51]
We just make sure that everything is going to come up right. Okay, so I'm going to go ahead and generate this, we now have a service. Now I'm going to hop back into my code. Let's open up DB dot JSON and I'm going to copy this And I'm going to paste it.
[00:01:26]
And now what we have instead of widgets we're going to go items. And so I realize that the data model is very close that is by intention. Just for the sake of speed I want to illustrate this. Like so. Then I'm going to go to the API interfaces.
[00:01:50]
And I'm just going to introduce a new interface which is going to be item extends base entity. So now we're starting to think about this in terms of layers in kind of this horizontal development. If we go back to our server, I'm going to spin this back up.
[00:02:29]
And let me just check my DB JSON, there we go. Let's save this. Let's run this again. And notice now I have two endpoints. So if I go into My URL up here ,we have widgets and we have items. And so now let's take this and let's open up item service and there's a fundamental flaw.
[00:03:02]
Without a flaw but an optimization I can make with this code that I think somebody could call out if they saw or they watch what I'm doing and at some point, feel free to to point it out. But I'm going to take and I'm just going to copy this, And I'm going to go over to the item service and I'm just going to paste this in.
[00:03:28]
Now, you'll see here, the only thing that I need to change is really to do just a Find and Replace on the model itself, so I'm going do a case sensitive. And We'll go here And this is all leading to a point Fix our imports. We'll go HTTP client.
[00:04:29]
It's going to find the item hopefully yes, if not, not a problem. Sometimes you have to manually do this in, here we go. Item Http Client items. Now, if you're paying attention, there's a couple things that I want to call out that we can improve upon. So if I put these side by side, And if I scroll down, we'll start to see some things that are very similar.
[00:05:13]
So one is this endpoint. So this is something this would be a candidate to extract out into configuration. So as you start to prepare to actually deploy to multiple environments, you would want to move this out. So this is a transition step. The other thing that. I want to point out, these two methods, do exactly the same thing, and so this would be a candidate to extract out, into a utility function.
[00:05:49]
With that said, Everything else about this, is essentially the same in terms of the items and the widgets. You're not doing the same thing. But you're doing it the same. Now here's the question. Here's the thought exercise that I will leave you with. If you know what this is going to be.
[00:06:22]
Then how much time should you spend thinking about what your next service is going to look like? I would say, very, very little. Because I could sit here and I could generate or introduce another data model into this application and create a new end point. And this service is going to look exactly the same.
[00:07:00]
Why is that? Because this service is doing one thing. It is simply calling an endpoint, grabbing the data and then doing something else with it. And so, this is a fundamental problem that I've had or had with kind of historical legacy AngularJS and Angular apps, is you have this idea of this stateful service that's responsible for one managing state, and communicating with the server.
[00:07:37]
And so if I had business logic in here, the business logic would change from items to widgets more than likely. I mean imagine if you had users and orders, or users and I mean whatever it is that The business logic around the entities change. But the mechanisms to fetch that from a REST Endpoint doesn't change.
[00:08:03]
Like I don't think rest has changed in a really, really, really long time. And so now, what you want to do is you want to start to abstract The things that change away from the things that do not change. And so when you start thinking about large scale apps that are stable, that you can build on, this is how you do that is you reduce coupling.
[00:08:37]
By not coupling things that don't change, like calling rest API's with things that do change, ie business logic, and you separate these out so that you can reuse the stuff that doesn't change. And so, this kind of started out as I wanted to introduce how to get up and running with DB JSON very quick.
[00:08:58]
But really what it's kind of transitioned into is proper abstractions, and recognizing the patterns that you do over and over. And I think an HTTP service class is a major candidate for the fact that the only thing that is changing in this entire thing, is the model which affects that endpoint.
[00:09:22]
And then what I actually sent into the methods, nothing else changes. And so, what I've done and what you can do is actually great just a live template. To wear in your editor, you just have a hotkey that generates the template out and then you just put your model and boom, done gone.
[00:09:41]
And you've done that. This this kinda work right here. Even with my commentary this should not take you more than three minutes, three to five minutes to generate this layer in your application.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops