Welcome back, ladies and gentlemen.
Today, we're going to talk about a little bit of architecture, what we will use in this project.
Now, I'm going to say that the architecture is one of the most important aspects of any project.
So you should think about what type of architecture you going to implement in your projects?
What are you going to choose and how are you going to do it?
Right.
So there are different.
So you can choose something, but you may not be able to do it as you shoot.
So before a application, when we do the application for the burning galleries, we did have a module
patterned application architecture.
But here we will use your six modules and we will use MVC.
This stands for my model view controller.
Now, these architecture can be implemented in different ways, but we're going to choose the best way
for this project now.
Model models, views and controllers pretty much everywhere.
Now, this is a very famous so I really like how the lab will have done it and how these so laramie's
be one of the best frameworks.
And yeah.
So that is why I just love how they implemented this model view controller.
Now like let's talk about the controllers now.
The controller will be in our case, will we one file that that will have multiple controllers.
Right.
It will control our application in a model.
We're going to we're going to write all of the methods that we then that will be exported to the controller.
So the methods here will be exported to the controller.
And you can see that I have never connected these two together.
Why?
Because the controller will be the hub and they will communicate through the controller.
Right now, that is pretty much it view views as simply.
So I'm going to explain this as simple as I can.
So don't worry about if you don't understand these terms at the moment.
But views are something simply the graphical representation of what we are.
What is the user going to see?
So here we are going to write the functions that will deal with rendering the data back to the graphical
user interface.
Now, the methods in use will be just for the users, right?
The controller is the hub here that will connect both views and controllers.
So this is very good architecture because everything is going to be separated.
Now, the model view controller, the decouples the presentation logic from application logic.
Right.
So that is why this architecture is something that you should understand now.
So what I'm going to show you next is that we need to continue with using imports and exports.
Right.
And that will be our will be connected with six modules.
Now, how are we going to use the six modules in how to use names named and default exports and imports?
That will be something else that we need to look today.
Right.
So open up your project.
Going to the source in this is delete everything from here and say that this is a main controller,
main controller
like this.
Save it now.
The module we don't need this JS file.
You can simply delete it right now.
Create a new folder called Use Here, Not With Capital and create an additional folder called Models.
Now here we will store the view, the views files, and here we will store the models files.
And this is the main controller.
Right.
So I'm just going to close this for four quick.
Now, if you go back here, you will see that in a model we will use movie search like in Karkh model,
and these will have the same same exact name just with the smaller movie View Search View.
So you can name it like this because later on you will be able to distinguish between them and inside
the controller.
We will do have movie controller, search controller, everything that we doing here.
So this is nicely separated, right?
OK, so I'm done with this lecture now.
Are we going to do a little bit of imports and exports?
So first things first.
I'm just going to create a file here called Search View J.S. So this will be just everything from now
on will be JavaScript files, right?
Search view.
So look at the naming convention.
So I'm using smaller start with smaller small lettering and the next one I'm doing with capital.
Now the models will be so create a new file in the model.
In the models, the convention is to start with a capital letter A. Should they should be most likely
singler like search, not searches.
Right, or movie, not movies.
That's why I'm trying to say so.
That is pretty much the convention.
OK, so how are we going to conduct this search in search of you?
Right.
Make sure that you do have these two folders inside the Jesus folder.
Right.
Good.
So how are we going to connect these two?
OK, let's first write something in the search.
So what are we going to do?
We're going to export we're going to create something here that we can export.
So the best way that we can start is by creating a stream.
And I'm going to say I'm going to start with exporting the default because we have name and default
exports and imports.
These named in default ghost for this two as well.
Right.
So I'm going to say export here then the key word default here.
I'm just going to export the normal string.
For example, these these is coming from the search model.
I'm not sure why I'm Jewish.
Type Double M here.
Not here.
OK, so this is how we write the export.
So we are exporting this from the search model, but where are we going to import.
That is the main question, as I told you that everything here.
So this is just an example.
You don't have to worry because we're going to do this.
So if you want, you can sit back and watch it.
Right.
This is nothing connected still with the actual application.
But I want to explain you this and you need to understand it now.
This index that Jezebel will be our main controller right in here, we will import and how we import.
So I'm going to say import.
And here we are going to define a variable name and that will be output.
For example, you can put any name you want.
Now, from we already have done this a little bit right in the previous lecture.
So now I'm going to go to the current level, then I'm going to the models, because this search is
located in the models.
Right.
And inside we have the search.
So don't you don't need that Geass extension, by the way, right now here, the value is stored.
Everything that we are grabbing from the search model, it will be stored back to this variable here
output.
Right now, if we are exporting multiple things from search, then we can use the name export.
This is the default export right now.
If you have multiple things here that we need to be exported, then we're going to use something else.
We're going to use this this guy here, the named one.
Right.
And let's do the second way.
But let's close this search and I'm going to the search for you in here in the search view.
I'm going to do a couple of I'm going to write a couple of simple functions.
So let's write some code here and let's say export and const some I'm going to export, not default
named.
Right.
There's a difference in here.
I'm going to give a name, render details.
This name can be anything you want right here.
I will put name last name Qu.
And this is by the way, erro function.
You should know it by now.
And let's say here the name oops the name is and we can just say its name comma and last name is and
we can say.
Last night.
So that's pretty much it.
Make sure that you have semicolon at the end.
Now we are exploring this function.
That's our function.
Let's explore something else.
Let's explore multiple things.
Explore const orender.
How old.
So this will return.
By the way, how old we are.
And I'm going to say it will take two parameters here in our current age, which we haven't created
yet.
Don't worry about it.
And it will be here minus H.
So I'm going to return this now.
The thing was with the arrow functions that we because we have only one line of code, we can just return
it without brackets, without those curly brackets.
Right.
Do you remember this?
That's why I'm returning it like this.
Now I have two functions here that will return the current age and it will return my name and or whatever
name in last name we're going to put right now what else we need here or else we can explore one more
thing, explore const H and that will be equal to thirty three.
So we are just exploring this constants here.
Right.
OK, now it's enough for the search view.
Now we need to find a way how we can import because by now we only import one thing from the search
model.
Now we can import multiple things from the search view.
Right.
OK, and how are we going to do this now?
We need to write this in a curly bracket.
So I'm going to import it here.
We need to specify why.
I just close it now.
I have to show you I'm not sure if I've shown you before, so how you can go through from one file to
another without looking too into the file name.
So if you know them, control P.
This is supposed to be a scope, right?
If you can start typing, for example, you want to go to Bacquet Jason Bay and it will give you everything
that is connected with being right.
So if you're going to search view, for example, it will go there.
So if you want to go to the index, right.
This will go there, bundled those gas.
It will just give you that.
And you click here and you can work on that file instead of going through the directories folders and
look that one.
So I have an error here.
You seeing that I do have something.
Now, remember that when we are doing these type of named imports, we need to take care of this.
The names, their names, the function names.
Right.
So I need to copy the exact same thing.
So I'm going to say render details.
Then the other one was the renderer.
How old in the last one was H.
Good.
Now we still need to specify from where we grabbing this one.
Right.
Current folder.
Current directory.
Then we go to the views and then we're going to go to the search view.
Good.
Now let's write something to the console.
Let's print this output and we will test it out.
So Canterlot, so how we do it.
Same using template literals.
Right.
This is imported
from models and views.
Right.
And I'm just going to import here, render details and I'm going to pass here Tom.
Right.
Because render details, the two parameters here.
And after that it's printing what it's printing like Dom and the last name will be Kroos.
Then I'm just going to say comma here, I'm going to hit enter and I'm going to go into a new line because
the template literals allow us to do this.
Right.
And the second function for how old is how are we going to say, OK, Renderer, how old are we going
to say twenty, twenty and I'm going to pass my ear.
Right.
Thirty three over here.
We can just grab the H.
Don't worry about it.
I will show you second function for how old it is now, what else we have here and and the last will
be the age that I have.
Right.
That's it.
So I'm going to save it.
We're not going to be able to see it.
We need to go back to the terminal.
And what we need to do is npm run it.
We need to call this.
Wait, so back it, Jason.
So we need to call this line here.
It will start to Bebek server.
It will go to the mode development and open up the browser for us.
So hit enter.
And if everything is OK, you should be able to see the green thing here, green lines of success.
And also we should be able to open up the.
It's taken to.
A little bit nice, come on, wait until the bundle was finished.
Did you see that so expected here?
I'm going to the council and voila, we are having everything.
This is important from models and views.
Actually, let me spell this one.
The name is Tom and the last name is Cruise.
The second function for how old is it?
Second function for when it's born.
Should be sorry.
Let's fix that one second function for when?
For, let's say, a year of birth year.
Birth is I'm going to save it now, I don't have to reload anything here, and it will give us that
one.
Let's fix this one.
Beuse save it, it will be there, see it refreshing now.
That's good.
So that is pretty much it, what we want with these imports.
Now, there is another way how we can do this so we can shorten up these names here, because we don't
want sometimes we don't want these big lengthy names so we can do with as our deals that will be short
for rendering details so we can say as render H in this will be a for example.
But now it's not going to work here.
Why?
Because we need to change this as well.
So it should be, Ardino, our H here if h h here only.
Right.
And that will give you the the the output by the way, I'm just control C.
S every time.
Right.
I think there was a plug in for automatically saving.
So you should so you should save it before going here.
Right.
That's why if you don't see it and if you don't see me saving, I'm pressing all of the times comptrollers.
That's a habit.
OK, one more thing.
Now, we do have one more way that we are definitely going to use, and that is when we use the Esoterics
or Starshine.
So how are we going to do this?
Just going to copy the entire thing and I'm going to show it to you now here.
I'm not going to say I'm not going to give details.
I'm just going to say star.
This reminds me of database when I was learning my skill.
When you select everything, so you select which star, right?
So import star and we need to see X and we need to give a meaningful name.
So I'm going to give that name saying same as this one.
Right.
You can choose any name you want.
So a search view from this and I'm going to copy this one here.
I'm going to based it down.
And this is.
Third way or Ford way, third way of grabbing or importing things now, I'm not going to use this already
now because it's not going to work, but I need to use the search view whenever we put it here.
Right.
I'm going to paste it here.
But how I'm going to access those methods here or variables doesn't matter.
So you're going to access with a dot.
So dot and remember, you need to know the name and it will give you the options.
So search for you again.
Dot Renderer, how old?
And here will be search for you that age.
So now we should have something here.
Here it is.
This is the third way of important things.
The name is.
And after that pretty much will be that also.
Let's bring out the data from the model because we never output this one.
Right.
And let's test it out.
And that's pretty much we are done for today.
And the output in here should be the output.
This is coming from the search model, right.
Because that was in the search that just this is coming from the search model.
So you can change it, only saying search.
Come on, model like that here.
Here it is.
Nice.
So now you know how to do imports and exports.
Now you know how to use this name and default imports and exports.
You know about the model view controller that we're going to use through our application.
We created two folders here.
And by the way, we're not going to need those things anymore because this was just for showing, right?
Remember I told you so.
I'm just going to delete this everything here and you don't need it.
This is for practice only to show you how we can import things and how we can use them back to the controller.
Right.
Because I tell you that this is very good when we want to hide the data from any other files.
So only the index will have access to the search actually to the models or only index controller will
have access to the views.
Right.
And that is pretty much it now.
I'll see you in the next lecture.
I hope you enjoyed this one.
And stay safe.