So that's the Javascript module import export syntax.
Now if we have a look at our project, we can see something interesting
if we go to the network tab. If I open that and we have a look at the HttpRequests here, if I reload this
page, you see we got a bunch of requests here because we're using a bunch of files and they are getting
imported when our app starts
because what happens?
Well the HTML file gets loaded and there, we request the app.css file and the app.js file. Therefore
logically first, the HTML file is loaded,
that's basically what's hidden under localhost here,
then the CSS file, then the Javascript file. In the app.js file, we refer to project list,
therefore it makes sense that the next item in the list here is project list which is getting imported
and so on,
so this is how all these things are getting imported. Now obviously we're sending a lot of HttpRequests
here and for a small project like this, this is no problem, for a large project,
this is not that great because even though the files are all small, sending a request, getting the response
and parsing the response always has a bit of that's time which is always there, which you can't get rid
of, network latency, the browser getting started, it's time which you can't get rid of.
So the more requests you send, the more of that time you accumulate and therefore having hundreds
of modules would not be a great idea because you would import hundreds of files and you would send hundreds
of HttpRequests.
This is a problem we'll get rid of in the next course module and in the next course section when we
have a look at tooling and in a concept called bundling. One other improvement which we could add here
is also that some features are not always needed,
for example the tooltip. The tooltip here, this Javascript file is loaded because we might eventually
show a tooltip but unless we click this button, we don't really need the file and
of course it's a small file but in bigger applications where you have more logic in your files, that
can add up.
In addition, the tooltip file is the only file that needs the component,
so actually we have to add the two together.
So if you would only load these files when we need them, we would speed up the initial page load because
we would request less files to be downloaded and parsed and that's also something we can do and something
we can do in this module
already. So to load modules conditionally, we can use an alternative import syntax. The import syntax you
solve thus far at the beginning of the page is the static import syntax, it statically defines the dependency
of a file. As an alternative to that, you have the dynamic import syntax and for some scenarios like the
tooltip where you know that the code will not always be needed, it makes sense, if you know something
always needs to run,
like for example project list which is imported in app.js and which we need right at the start
to construct our lists, there it makes no sense to load that dynamically because you'll always need it
but for the tooltip, it can make sense. In project item, I need the tooltip here if we click on this show
more info button. So therefore instead of importing tooltip up there statically, which means it will be
downloaded when the project item file executes,
I can also just download it here and request it here.
How? With a special syntax. We can call import as a function and then pass a string with a path to the
file I want to import, in this case tooltip.
Now this import function is built into the browser and exposed in Javascript and it gives you a promise,
so you can add a then block here or use async await of course.
Now here, you get your module in the end and now in there, we can run code that requires the module,
so in this case this code which wants to attach our tooltip and create it
and so on, so cut it and move it into this then block. Here we can now access module.tooltip,
I know that we'll have a tooltip in this file so I can access it on module,
it is simply a property of this module object so to say and now this will only reach out to this file,
we should add the extension though, it will only reach out to this file here when this code here runs
and not at an earlier point of time.
So now if we save that and we reload, you'll see we get no error
but in the network tab, you see the tooltip and component.js files are not getting downloaded initially.
If I click on more info though, then you will see these two requests are being added and are being sent
but that happens at a later point of time, not when our app loads but only when we need the code.
This can be a huge improvement,
of course you don't really feel it for such small files but for larger files, not having to download
them initially but only downloading them when you need them can really speed up your startup time which
makes your app faster and more responsive when it first loads up.