Instructor: Alright, so now that we are familiar
with our project, we're ready to start coding, right?
Well, not really, because we cannot just start coding
without having a plan of what we're gonna do.
I mean, it was OK to build, like, the pit game project
without a clear plan.
But in a bigger project like this one,
we really need to think about the structure,
the architecture, of our application.
So let's do that in this lecture.
So in the end, we're going to end up
with something like this.
Now, is this a great piece of art or not?
No, I'm just joking around.
This is actually a representation
of the final architecture of our app
in a way that I like to display it.
But not so fast, we need to think one step at a time,
and we need to think together
so that everything makes sense to you
and so that you can think on your own
when you start coding your own projects.
That is really important
and one of my biggest goals with this course.
I want you to learn how to program and how to think,
not just to copy my code,
and that's also what you want, right?
OK, so let's look at our application again
and identify the most fundamental parts
that we need to code,
and we're actually going to do this planning
in more than one step.
Right now, I just want to identify
the most fundamental things that our app has to do,
and then start coding them.
Later we're going to come back to this
and then plan the rest of the app's future.
So this is step one.
Alright, so we know that we can input
an income or expense description and value,
then hit the OK button and then the data will appear
on the interface and the budget calculation will update.
But it actually starts with the create on the button.
And we already know we can handle this kind of events
by using an event handler, right?
So the first thing, or to do this,
will be to add that event handler.
OK, and then we need to get the data
out of our input fields,
so we need some code for that as well.
We see that this data then will be printed
to the interface, so we need to first
add the income or expense to our internal data structure
and then add them to the user interface as well.
And finally, the budget is also updated.
So we need to internally calculate the new budget
and then again update the user interface.
Does that make sense to you?
OK, so we're gonna write functions and methods
for all of these tests in our applications, right?
So we already have a nice list of tasks
that we have to complete now,
but before we start coding,
we also need to talk about how to structure our code.
And for that, there's nothing better in JavaScript
and programming in general than modules.
So modules are a vital aspect
of any robust application's architecture.
Also, modules help us in keeping the units of code
for a project both cleanly separated and organized.
And lastly, modules can allow us to encapsulate
some data in privacy and expose other data publicly.
All of this keeps getting more important
as our applications get bigger and bigger.
So basically, modules allow us to break up our code
into logical parts which are the modules,
and then make them interact with one another.
So what modules should we have in our project?
Let's think about the tasks
that we already have on our to-do list.
So looking at these tasks that we specified before,
we can see that some tasks
have more to do with the user interface
and others with doing internal data manipulation, right?
So we're going to create a module for each of these,
so that we have cleanly separated and organized units
of code in our app.
So we start with a user interface module and a data module.
OK, so I would clearly say that Get input values,
Add the new item to the user interface,
and Update the user interface with the new budget
should all go into the UI module.
Do you agree with that?
OK, and as for the data module,
let's put Add the new item to our data structure
and Calculate the budget right into the data module.
Now there's still one left
that doesn't really fit in any of these modules, right?
So I'm going to create a new module
and I'm going to call it the controller module.
So in here we'll add the event handler
and specify the response to the event.
The goal of this module will be to control the entire app
and basically acting as a link
between the other two modules.
Alright, so now we have
some nicely separated units of code here,
and all of this will make a lot more sense to you
when we actually start writing our code,
which is exactly what we're gonna do in the next lecture,
where I'll show you how to set up these modules.
So again, the planning that we did in this lecture
is only for the first step of coding this project.
There are a lot more functions
that we're gonna need in each of these modules
so that we end up with a final functioning app.
But we'll come back to this later.
OK, see you in the next lecture now.