How it works¶
To put it simple, the loader:
- collects all the relevant data
- minifies the data, removing unnecessary whitespace and documentation
- serves it to the client in only a few HTTP requests instead of many individual ones, allowing the client to cache these snippets in the browser cache
- performs these tasks in a highly performing way, utilizing the caching mechanisms of OTOBO
Of course, there is a little bit more detailed involved, but this should suffice as a first overview.
With the configuration settings
To learn about how the loader works, please turn it off in your OTOBO installation with the aforementioned configuration settings. Now look at the source code of the application module that you are currently using in this OTOBO system (after a reload, of course). You will see that there are many CSS files loaded in the
Having the content like this in many individual files with a readable formatting makes the development much easier, and even possible at all. However, this has the disadvantage of a large number of HTTP requests (network latency has a big effect) and unnecessary content (whitespace and documentation) which needs to be transferred to the client.
What just happened? During the original request generating the HTML code for this page, the Loader generated these two files (or took them from the cache) and put the shown
The CSS section looks a little more complicated:
<link rel="stylesheet" type="text/css" href="/otobo-web/skins/Agent/default/css-cache/CommonCSS_00753c78c9be7a634c70e914486bfbad.css" /> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="/otobo-web/skins/Agent/default/css-cache/CommonCSS_IE7_59394a0516ce2e7359c255a06835d31f.css" /> <![endif]--> <!--[if IE 8]> <link rel="stylesheet" type="text/css" href="/otobo-web/skins/Agent/default/css-cache/CommonCSS_IE8_ff58bd010ef0169703062b6001b13ca9.css" /> <![endif]-->
The reason is that Internet Explorer 7 and 8 need special treatment in addition to the default CSS because of their lacking support of web standard technologies. So we have some normal CSS that is loaded in all browsers, and some special CSS that is inside of so-called conditional comments which cause it to be loaded only by Internet Explorer 7/8. All other browsers will ignore it.
Loader::Agent::CommonJS (for the agent interface) and
Loader::Customer::CommonJS (for the customer interface).
These settings are designed as hashes, so that OTOBO extensions can add their own hash keys for additional content to be loaded. Let’s look at an example:
<Setting Name="Loader::Agent::CommonJS###000-Framework" Required="1" Valid="1"> <Description Translatable="1">List of JS files to always be loaded for the agent interface.</Description> <Navigation>Frontend::Base::Loader</Navigation> <Value> <Array> <Item>thirdparty/jquery-3.2.1/jquery.js</Item> <Item>thirdparty/jquery-browser-detection/jquery-browser-detection.js</Item> ... <Item>Core.Agent.Header.js</Item> <Item>Core.UI.Notification.js</Item> <Item>Core.Agent.Responsive.js</Item> </Array> </Value> </Setting>
To add new content which is supposed to be loaded always in the agent interface, just add an XML configuration file with another hash entry:
<Setting Name="Loader::Agent::CommonJS###000-Framework" Required="1" Valid="1"> <Description Translatable="1">List of JS files to always be loaded for the agent interface.</Description> <Navigation>Frontend::Base::Loader</Navigation> <Value> <Array> <Item>thirdparty/jquery-3.2.1/jquery.js</Item> </Array> </Value> </Setting>
Simple, isn’t it?
It is possible to put a
<Array> and one tag
this application module.