Skip to main content

Module Structure

Concept#

Mongez embraces Modules, mostly everything is encapsulated in a module.

As Mongez in out of the box way, allwos handling multiple applications in the same project with most effect bundle reduce size, the application also works as module.

Modules Types#

There are two types of modules that can be used with Mongez:

  • Normal Modules
  • Lazy Modules

Normal Modules#

These modules will be bundled with the main bundle as we call it directly, an example is the Shared directory, as it works in a module concept, it is loaded by calling the module provider directly in index.ts file wihch means it is fully loaded.

However, this is not useful with most of the other modules.

Consider an application has over 20-30 modules, in this approach all of these modules will be bundled for each build and for any small update in any of these modules the user will have to load the new bundle files which will be bigger than needed of course, here comes the brilliance of Lazy Modules.

Lazy Modules#

In a nutshell, lazy modules means: "I will not be loaded until you need me", let's have an example for more illustration.

Let's assume we are bulding a blog website, the blog has the following pages:

  • Home Page: 10KB size
  • Post Page: 15KB size
  • Category Page: 5KB size
  • Contact Us Page: 3KB size
  • Create New Account Page: 5KB size
  • Login Page: 3KB size
  • otherBundle: 50KB size

Total size of all pages are: 91KB.

SO when we build the application, apart from react compilation and other modules bundling, we'll have extra 91KB size to be loaded every time we made a small update.

When we implement lazy modules, which is the default behavior in Mongez, each page will be in a separated module.

In this approach, we will make small chunks that will separate each page from each other.

So now when we update something in the home page, the bundle chunk for post page will not be touched and the browser will only download the chunk of the home page.

Furthermore, the posts module will not be downloaded at all until the user navigates to the post page.

This will save the user more bandwidth and the website will be incredibly fast.

Module load first time

As the module is not in the main bundle, Mongez will load it dynamically when you hit its route, this will send an ajax request to load the chunk which may take few miliseconds, after the first load the module will not be loaded again anymore as it will be cached in the browser. ::

When a change occurs in the module, the chunk file of the build regarding that module will be redownloaded again as first load time then it will be cached again. ::

Module structure#

A typical module should look like:

├── module-name│   ├── .storybook│   ├── components│   ├── contexts│   ├── services│   ├── helpers|utils│   ├── hooks│   ├── locales│   ├── middleware│   ├── styles│   ├── tests│   ├── provider.ts│   ├── rouets.ts

Let's have a deeper insight:

  • .storybook: Our module storybook.
  • components: List of module components.
  • contexts: List of the module react contexts.
  • services: List of Http Restful Endpoint Classes and Http ajax functions.
  • helpers|utils: You may define a directory with helpers or utils, just make sure to make the name unified, in this directory we add all helper functions and classes.
  • hooks: List of the module react hooks.
  • locales: list of locale code files, each locale code will have a named .