Module JS Loader

EMPS doesn't use webpack, and many pieces of the JS app that runs in the end user's browser are usually contained in multiple .js files across multiple modules or directories in the virtual file structure.

A very handy feature is to be able to store all your module's source code files in one module folder, like this:

modules
  - orders/
    - orders.php      # controller PHP code
    - orders.nn.htm   # view Smarty template
    - orders.js       # JS code of this component or mix-in (optional, 
                      # if the module has JS)
    - orders.vue      # Smarty/VUE template (optional)
    - orders.css      # CSS file specific to this module (optional)

The relative URL /mjs/orders/orders.js will load the orders.js file, /mjs/orders/orders.vue will load the orders.vue file, /mjs/orders/orders.css will load the orders.css file. Only those three file name extensions are supported by /mjs. It blocks hackers from loading the source code of the PHP file or the Smarty/HTML template by trying to open, say, /mjs/orders/orders.php - this will fail.

A Few Examples

Referencing a JS:

(inside of your view Smarty/HTML template): 

{{script src="/mjs/orders/orders.js" defer=true}}

This is the same as

<script src="/mjs/orders/orders.js" defer></script>

But the {{script}} Smarty tag enables automatic addition of the css_reset URL parameter, so that /mjs/orders/orders.js will become /mjs/orders/orders.js?2 if ?2 is your css_reset setting. So, it is better to prefer the Smarty tag.

Minify/Uglify JS code to complicate reverse engineering.

This can be done by simply adding // minify (exactly this line) to the top of the file (it has to be the first line of the JS file). If you do that, mjs will uglify your JS file before sending it to the end user. But your original JS code will be kept as it is.

Referencing a CSS:

(inside of your view Smarty/HTML template): 

<script>
  emps_scripts.push(function(){
    EMPS.load_css('/mjs/orders/orders.css' + css_reset);
  });
</script>

Alternative: (your order.js Vue.js mixin or controller):

{
    ...,
    mounted: function() {
        EMPS.load_css('/mjs/orders/orders.css' + css_reset);
    ,
    ...
}

Notes:

  • emps_scripts is an array defined in the <head></head> tag of your app by EMPS. Push new anonymous functions into this array to execute them after the page is loaded. There is a emps_scripts.js script that is executed whenever the page is loaded and then every 0.5 seconds. If a new item is added to emps_scripts, it will be executed. This is a pre-Vue.js feature of EMPS, and it can be used anywhere even if Vue.js is disabled on this page.
  • css_reset, more exactly, window.css_reset is defined by EMPS in the <head></head> tag of your app's HTML code. The value is taken from the css_reset setting.
  • EMPS object is defined by this script that is included into the page HTML by EMPS: emps.js It provides a few EMPS-specific JS functions that can be used with or without Vue.js. Browsing the source code will give you the rought idea of what there are for.

Referencing a .vue File:

Important! .vue files in EMPS are not the same as Single-File Components. Here, they are only the <template></template> part of a single-file component, so, only the HTML template. In addition, they can contain Smarty tags. For example, if you want to create a multilingual Vue.js template, you can do that by setting Smarty variables depending on the {{if $lang == "en"}}, e.g. {{$str_close = "Close"}}, then use it as <button class="button">{{$str_close}}</button>.

The advantage of using referenced .vue files is saving on the length of HTML code sent in each subsequent request to a page. As those .vue templates are cached, if the template is relatively large and complex, you will be able to save a lot of traffic by not having to send all that HTML again and again.