[MUSIC]
Welcome to the first lesson in this new module.
What we're going to do now is a bit of housekeeping.
It's a little bit dull, but
it's a good point to do it because we've written a lot of code and
we've got this great big JavaScript file that's full of all these different things.
And what I wanna do is show you the standard
way that you might reorganize your code in media.
When you get to this point of having a fairly complicated application.
And the reason for doing it is essentially that in the future,
it makes it easier to work with the code and to find the things that you want.
And also, if you then get to the point where maybe other people are working on
your code, it becomes simpler because you can have different people working on
different things, and it's just easier to work that way.
So yes.
It's time to sort of our make our app look a bit more like a serious bit of
programming.
Okay. So let's just go through the code and
put it into the right places.
And as I go I will explain why we are putting it in those different places.
All right, so here's my application folder.
And let's just have a sort of dig around in there.
So what have I got so far?
I've got my three sorta top level files which we created right in the beginning
when we created the app.
So we have a CSS file, an HTML file, and a JavaScript file.
And then I've got this client folder and you remember I used that to put
some configuration stuff in there about the account system, the user accounts, and
also I put some CSS in there, which is for the text editor.
But let me explain what the client folder actually does.
When you run that meteor command, meteor basically takes all the code that you've
written and reorganized it into chunks of meaningful code.
And so the first thing it does is it looks in the client folder and
collects all the JavaScript together and
combines it with any JavaScript you've got sitting outside of the client folder.
So in this case, accounts and textcircle.js.
Squashes it together and minifies it, which is a way of
kinda removing all the unwanted space from the code to make it as small as possible.
So that when someone accesses it, it downloads quicker, right?
So it gets all the JavaScript and squashes it together.
And so the person connecting to your site gets everything that's in the client
folder plus anything that's outside of the client folder at the top level.
But sometimes there are things that should only go to the server right?
So if you remember, if we look at this file here.
We've got a block which says if (Meteor.isServer) right there.
So there's no point in having that, that will be removed anyway and
not sent to the client so what we do, is there's a special folder called server
wherein we can put code that only needs to go to the server.
So let's create that folder.
And then we're gonna split, take out the code that is only needed for
the server, and put it in the server folder.