DEV Community

Aad Pouw
Aad Pouw

Posted on • Edited on

How I load my js?

#javascript #webdev

Intro

And after a long hiatus a new article about how I load my js.
Then, recently I read an article about Bulletproof web component loading and written by Chris Go Make Things and someone who knows a lot more about javascript as me. It was about loading in the footer or in the head and using 'async/defer'

His Approach.

His 'bulletproof' approach was by using document.readyState and DOMContentLoaded in his component classes.

My idea.

This way might be bulletproof but complex and hard to maintain.
The way I load my js is Simple, Bulletproof, Fast and hardly needs any maintenance.

How I load my js?

It's about loading js this way:

  1. First step is to have an index.js within the scripts folder and that contains the following. 
//the imports on top
(async ()=>{
    /** 
      This is the place where all the js logic
      ends up but in the right order!
   */
})();
Enter fullscreen mode Exit fullscreen mode
  1. Second step, within your index.html this: 
<script type='module' src='./path/to/scripts/index.js> </script>
Enter fullscreen mode Exit fullscreen mode

Explanation

At the first step, the code has been placed in an async (Immediately Invoked Function Expression)!
That iife, is the final place where my js stuff ends up.
This means that the promise is 100% fulfilled before it's passed to my index.html.
So what I get is a single substance that is complete and ready to use.
Actually I rarely look at it, is no need for!

Note!

Placing all in the right order within you index.js is important!

Final.

A Simple, Bulletproof and Fast way of loading js!
That's what I wanted to share!

More about IIFE at MDN(IIFE)

Top comments (0)