A module system like in nodeJS, that lets you use require in the browser!
Dependencies will preload using HTTP2 Server push,
so that they are already cached by the browser and load instantly when required.
Copy the following code to the top of the html page:
Then any module can be required using:
And local modules can be requred:
And modules can be required from a URL:
If the require argument has no dot (.) in the name, the module will be loaded from a public repository.
But if there's a dot in the name, a file is assumed, and it's loaded from the document's server.
To make a module, use module.exports to make any method or property public. Example:
Add your modules to our free public webmodule repository.
The URL will be put behind a CDN and be cached to prevent overloading your servers.
The name of the .js file will be used for the module name.
Then it will be possible for anyone to require, eg: require("nameOfModule")
Modules makes it easy to share and reuse code, because of the CommonJS interface.
Modules improves manageability as you do not have to rely on global variables.
Using modules make you more productive as there are already many modules available.
And it makes coding more fun and social.
Web development has always embraced transparancy and open source, allowing anyone to right click on any web page to view the source code.
Sharing code has been difficult though, you either copied code, or included it in a script tag.
The CommonJS module system specify a simple common interface.
The CommonJS module system is the worlds most poplular module system thanks to Node.JS.
Synchronously loading modules have been slow in the browser,
but HTTP2 and server push comes to the rescue, modules can now load instantly!
You no longer have to use a compile step to bundle the modules.
require.js is not commonJS compatible and modules have to load asyncroniously.
Why not ECMAscript modules ?The CommonJS module system is more powerful and dynamic. You can for example load modules on demand or load then dynamicly. And you can require modules from anywhere in your code, not just on the top scope.
Web modules don't need to be specified in script tags, they are loaded when required, without any manual work.
Web modules is implemented in "userland", where ECMAscript modules need to be implemented in the browser. So web modules works everywhere.
Difference vs bundlesWith require on the web you do not have to bundle, just upload your code as is.
Modules will be downloaded (and dependencies pre-fetched) when they are required, instead of downloading everything at first load,
so the first load will be faster!
Each module is static and cache friendly, while classic web apps need to re-download everything at every page load, or ask the server if anything has changed. Modules being cache friendly means they can be cached on CDN's and be downloaded from servers close to the user. There will however be some latency (a few milliseconds) the very first time a module is required, which will most of the time feel instant to the user, or at worse be like clicking on a link/button in a classic web app.
What about complicated build pipelines and slow dev.ops ?With web modules you do not need a compile step. You don't even need a package manager, or module bundler.
This often means you can release faster and have an overall better debugging and dev.ops experience.
But if you still want to compile and transpile your code, you can still do that while using web modules, but it's not required!
Modules starting with css or ending with .css will be loaded as a stylesheet.
When making a module that require styling, write the style in CSS files and require them.
Use high order selects like .foo in the CSS for defaults, so users can override them with low selects like div.foo
If you want to host your modules yourself you have to configure your HTTP server to make use of HTTP2 push. Here's how you do it in Nginx
Add link headers for all dependencies when the main.js file is requested. Example: