So which problem do Javascript modules solve? For that
I opened up this project we worked on earlier in the course,
you might remember, it's this project here where we can drag and drop items around and yes, we got this
behavior you see here.
This is the project we worked on earlier,
it's quite nice and we'll not add any new functionalities there but if we have a look at the app.js
file, we can tell it's quite a big file,
quite a lot of content in there, right?
Our entire application logic in the end lives in this file.
The events.js file was just a dummy file for experimenting with events,
we can actually delete that as well as the events.html file.
The analytics.js file was also just a dummy file which I loaded here dynamically with app.js, so
the core application logic is really completely in that app.js file.
Now we might want to split that, why? To keep our code maintainable, to make it easier to work on it,
also if you're working on a team if you have multiple files, it's easier than if you're all working on
the same file because that is certain to break at some point of time, even if you can add it on the same
file at the same time,
you will certainly run into situations where you add something which a colleague then deletes accidentally
and so on.
So having multiple files helps you a lot when you are working in the team
but even if you're working alone, you just find stuff quicker
if you have multiple files. For example here, if I'm searching for a project item class, I have to scroll
through the file, I might scroll too fast,
where is it,
here's the project item,
it takes me some time to find that and that can be annoying.
So an idea would be to split this file such that all classes have their own files.
That might sound like file overkill but actually it is indeed the standard, the default for most projects
to have one thing per file,
one class per file,
one big function per file.
Maybe you have a file with multiple smaller functions, shorter functions but typically it's one piece,
one thing per file and therefore here we could add a new subfolder to keep things organized and add a utility
folder and maybe an app folder. We could drag and drop the analytics.js file into the utility folder
here and then we could create a bunch of new files in the app folder.
So here in the app folder, we could add component.js file for the DOM helper since it's a helper,
we could create that in utility, there we could have the DOMhelper.js file. We could then also
add the tooltip here to apptooltip.js. We could add project item and project list files in the
app folder,
so projectitem.js and projectlist.js and thereafter, we only have the app class left here
in app.js and
I think that is fine.
Now regarding the file naming, it's totally up to you,
you have to find your style and then just stick to it.
Here I chose an uppercase naming style or I start with an uppercase character and then every word
in a word has an uppercase character,
you could also go for project-item here if you prefer that. This is really up to you,
there is no good or bad here,
you just should be consistent and therefore I'll also rename this here to Analytics.js, starting with
a capital A.
Now of course we have to refactor our code here,
for example analytics.js moved, so here when I access assets, scripts, analytics and so on, I should dive
into the utility folder and there, search for Analytics with a capital A.
Now we can also split the other code here,
cut the DOM helper class for example and add that here into the DOMhelper.js file. Also then cut
the component class from the app.js file and move that into the component file and so on, so do the
same here for the tooltip which I'll grab like this and move into the tooltip.js file and for the project
item, I'll move this here into projectitem.js
and last but not least, let's grab the project list here and move that out of app.js into the
projectlist.js
file.
So now this is all reorganized and of course the implication is that if we reload the app, it breaks,
we can't drag and drop anymore,
we can drag but we can't drop,
we got an error here and of course it breaks because we moved all functionality but all these new files
are not getting imported. Now of course we can add imports here,
right,
we can go to the index.html file and just duplicate the script import here.
Now we have to watch out regarding the order though because the scripts are parsed and executed from
top to bottom,
so we have to make sure we import them such that every file has everything it needs to work.
So we should probably dive in to the utility folder first and import the DOM helper because that was
at the top of our app.js file before and I did try to structure it there such that everything that
depends on it comes below it,
so I want to import this first,
then we can dive into our app folder and there, import component.js and as a next step, import
tooltip actually, tooltip was next, then import projectitem and then projectlist and
now hopefully, this is an order that works. If we save that all and reload,
error message is gone
and that works. Now to show you what you can mess up,
if I would import app.js first, then actually we again have that error.
So some imports might depend on others and therefore, you can mess up your code,
it depends on which features you need from the other files and when that code that needs these features
executes.
So whilst this does work and we did improve our project because now we have one piece per file and therefore
all these files are actually way more maintainable and way more manageable,
if we need to work on the project item, we can quickly find it
but whilst that did improve, our situation here in index.html get worse.
Not only do we need to take care about the order, we also will need to add every new file which
we create to that import list here,
so we have to micromanage that list in the index.html file,
we have to make sure we load all scripts that together build up our application and for this still relatively
trivial project, that is doable
but consider this to be a bigger project, quickly.
you're in a nightmare and that's where Javascript modules step in.