Hi all,
I am currently working on replacing jGrowl (notification library) for a
client project.
I came across the importLibrary function in OfbizUtil.js (common-theme),
which loads external JS/CSS files when needed. If I understand
correctly, some of the JS libraries (inputmask, elrte, datetimepicker,
jquerytimer, jeditable, jgrowl) are loaded dynamically only when needed
(if the page contains a UI element handled by an external library).
Is the main reason behind this mechanism is to avoid loading uneeded
files ? If so, I am not sure that the cons of this approch are worth the
pros, but of course I may miss something her :).
The pros :
* avoid the initial loading of ~10 JS files that may be useless for
the current page. However the time saved on page load is certainly
negligeable,
* do I miss something here ?
The cons (in my opinion) :
* we need to specify loaded JS full paths in various places in
OfbizUtil.js (vs raw list in Theme.xml), impacts
readability/maintainability (IMHO), we should not have to scan
OfbizUtils.js to upgrade a JS library,
* it appears that we need to handle a minimal cache system, instead of
relying on native browser cache (eg for each date input we trigger a
library load)
* when loading a form through ajax for example, the user may
experience the loading time while he is in the middle of an
interaction (vs initial page load)
To cope with a large number of JS/CSS files required, another approach
could be to setup a bundler (similar to webpack for example), to produce
a unique optimized file. This is not trivial though. The first step may
be to switch to regular script inclusion (Theme.xml).
What do you think ?
