top

JavaScript Modules Are Now supported By The Browsers

Yes, now the JavaScript modules are supported by the browser. This means you can use this great audition in JavaScript introduced by ECMAScript 2015 in the browser. Previously, you have to use a bundler such as a webpack in order to use this great feature. But now they are available in the browser and if you don’t want to use a file blunder in your app you can just use JavaScript Modules instead. How cool is that!So, in this article, we are walking through JavaScript modules and explore the way that we can use them in our web application.What are JavaScript modules and Why you should use them instead of a classic script?JavaScript Modules basically allow us to import a file into another file using import and export methods and to build modular components that can be reusable.Why use JavaScript modules?There are many reasons and advantages that let you use JavaScript modules in your app instead of a classic script. Separating your app into modulesBuilding your app with modules makes it more proficient and increases the performance of your code. By using these modules you can lazy load your code and you can use only the code that you need and avoid unused code.Using Strict mode by defaultYeah, strict mode is enabled by default in JavaScript modules. The defer method is used by defaultThis means that your HTML code is loaded in parallel with JavaScript. So, you don’t need to add defer attribute to your script tag anymore when you use ECMAScript. Importing your modules dynamicallWith JavaScript Modules you can customize the loading of your modules by running a dynamic function that imports a module just if in case you need it. Assuming that when a user visits your website, you have to load only the module that handles the profile just in case the user logged in. This is explained clearly in the example below:                                                               usermodule.js                                                                           profile.jsUsageNow, in this part, we are going to explore the ways to use JavaScript modules. You can easily use a JavaScript module by specifying the attribute type to the module in the script tag that implements your main JavaScript file. Now, you can use the import and export method to import your modules.                                                    And inside your main.js you can start importing and exporting your modules:                                                    Using the export method in profile.js                                                    As shown in the above example, it’s easy to use ECMAScript modules and there is no complex code in this case.When you set the type to the module, the browser detects automatically that the file is a module and treats it as a JavaScript module.In another way, you can set .mjs extension to the file. So, the browser can identify the module but this doesn’t make big changes if you set the type attribute as a module to the script tag.Browser supportFor browser support, it seems that only the modern browsers support JavaScript modules. But, it’s good because they are supported by the great browsers like chrome, Edge Firefox.Do I don’t need to use bundlers anymore?Addy Osmani and Mathias Bynens explain in this article that you might don’t need a web bundler such as webpack if you develop a web app with less than 100 modules. You can check out the article where they have exposed the best practices and good usage of ECMAScript modules here. Find the code in the GitHub repository here. Wrapping upJavaScript modules are a great way to increase the performance of your app. It allows you to do many things that make your app more performant like a dynamic load of your modules, lazy loading and many more. Moreover, the great thing is that it supports the browser. So, don’t hesitate to use their advantages in case you don’t use a file bundler.
Rated 4.5/5 based on 11 customer reviews
Normal Mode Dark Mode

JavaScript Modules Are Now supported By The Browsers

Said Hayani
Blog
25th Jul, 2018
JavaScript Modules Are Now supported By The Browsers

Yes, now the JavaScript modules are supported by the browser. This means you can use this great audition in JavaScript introduced by ECMAScript 2015 in the browser. Previously, you have to use a bundler such as a webpack in order to use this great feature. But now they are available in the browser and if you don’t want to use a file blunder in your app you can just use JavaScript Modules instead. How cool is that!

So, in this article, we are walking through JavaScript modules and explore the way that we can use them in our web application.

What are JavaScript modules and Why you should use them instead of a classic script?

JavaScript Modules basically allow us to import a file into another file using import and export methods and to build modular components that can be reusable.

Why use JavaScript modules?

There are many reasons and advantages that let you use JavaScript modules in your app instead of a classic script.
 

  • Separating your app into modules
    Building your app with modules makes it more proficient and increases the performance of your code. By using these modules you can lazy load your code and you can use only the code that you need and avoid unused code.

  • Using Strict mode by default
    Yeah, strict mode is enabled by default in JavaScript modules.

  •  The defer method is used by default
    This means that your 
    HTML code is loaded in parallel with JavaScript. So, you don’t need to add defer attribute to your script tag anymore when you use ECMAScript.

  • Importing your modules dynamicall
    With JavaScript Modules you can customize the loading of your modules by running a dynamic function that imports a module just if in case you need it. Assuming that when a user visits your website, you have to load only the module that handles the profile just in case the user logged in. This is explained clearly in the example below:


  usermodule.js

                                                               usermodule.js

profile.js

                                                                           profile.js

Usage

Now, in this part, we are going to explore the ways to use JavaScript modules. You can easily use a JavaScript module by specifying the attribute type to the module in the script tag that implements your main JavaScript file. Now, you can use the import and export method to import your modules.


                                                   


And inside your main.js you can start importing and exporting your modules:


                                                   


Using the export method in profile.js


                                                   


As shown in the above example, it’s easy to use ECMAScript modules and there is no complex code in this case.
When you set the type to the module, the browser detects automatically that the file is a module and treats it as a JavaScript module.
In another way, you can set .mjs extension to the file. So, the browser can identify the module but this doesn’t make big changes if you set the type attribute as a module to the script tag.


Browser support

Browser support


For browser support, it seems that only the modern browsers support JavaScript modules. But, it’s good because they are supported by the great browsers like chrome, Edge Firefox.

Do I don’t need to use bundlers anymore?

Addy Osmani and Mathias Bynens explain in this article that you might don’t need a web bundler such as webpack if you develop a web app with less than 100 modules. You can check out the article where they have exposed the best practices and good usage of ECMAScript modules here.

 Find the code in the GitHub repository here.

 Wrapping up

JavaScript modules are a great way to increase the performance of your app. It allows you to do many things that make your app more performant like a dynamic load of your modules, lazy loading and many more. Moreover, the great thing is that it supports the browser. So, don’t hesitate to use their advantages in case you don’t use a file bundler.

Said

Said Hayani

Blog author

I am Full Stack Web Developer specializing in Front End and Back End ,Experience manager in all stages of the development cycle for dynamic web projects

Leave a Reply

Your email address will not be published. Required fields are marked *

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs

20% Discount