Jonas: As I've told you
over and over again in this course,
thinking about architecture is absolutely fundamental
before starting any new project.
No matter if it's a Vanilla JavaScript project
like the one we're about to build,
or a React app or a Node app
or whatever you're using, really.
So we talked a lot about architecture
back in the Budgety app,
and so let's do the same before starting this project.
Now, this time around, we're gonna use a widely used
and well known architecture
called the Model-View-Controller Architecture,
or MVC for short.
Now the main advantage of the MVC architecture
is that it very nicely decouples
the presentation logic from the application logic
with a controller in between them
that controls the entire app.
And this is actually a bit similar to what we did
with the Budgety app, right?
But this time around,
we're gonna implement it with ES6 modules
instead of using the module pattern that we used before.
Because using real modules is a lot easier
and a more real separation of concerns.
Now there are different ways
of implementing the MVC pattern,
some more complex than others,
but we're gonna implement it
in a very straightforward way here.
I just wanted to let you know
that if you Google around for MVC,
then you will find it coded in some different ways, okay?
But anyway,
let's now look at MVC in the context of our actual app.
So of course, we're gonna have a Controller
which will have it's own file called index.js.
So again, this will be possible thanks to ES6 modules,
which allow us to make our JavaScript apps more modular
by separating different aspects of the app
into different files.
Now about the Models, we will have one model
for each of the different aspects of the app,
and the same goes for the Views.
So again, one View file for each part of the app.
In this first example, we have the Search functionality.
So in the Search Model is where we do Ajax calls
to get recipes for a certain search query from an API.
On the other hand, in the View
is where we get the search query string
from the user interface,
and also where we print the results of the search.
And the Controller, of course,
is what brings these two together,
so that Model and View never actually have to communicate.
And this will make the entire app, again,
more modular and easier to maintain,
as you will see when we start coding it.
So as you see, the Model is always concerned
about the data and the apps logic,
while the View gets and displays data
from, and to, the user interface, okay?
So that is in simple terms
how MVC is going to work in our app.
And of course the same logic applies then to the Recipe,
List and Likes part of the app,
so there's always one model and one view
held together by the overall controller.
Now we could also have multiple controllers here
but I find it easier to work with just one global controller
and you will see why a bit later.
All right, so let's now jump right to the next lecture
where we're gonna start implementing this architecture
with ES6 modules.