Overview
We utilize a modified require.js library that fetches our standard libraries directly from our CDN.
We serve a slightly modified require.js file automatically scans DOM for data-require attributes and conditionally loads the required script. We introduce a concept of global script names for which can be used to load scripts hosted on the UDX CDN repository. As usual there can be a require.config, usually in scripts/app.js, which will be honored and have a higher priority than the hosted scripts, allowing any script to be overwritten locally. The core concept
DOM elements requiring a library do not retrieve the library until the element is visible in the DOM. This means that a CSS rule based on the screen-width can determine if it will load. If the element does need to be rendered a CSS effect (e.g. spinner) should be used until the library is loaded and initialized. Once the module is will be initialized passing the target element into it. get rendered until the library is loaded and the library will never be loaded in the first place if the element will not be displayed due to a CSS rule or due to simply being out of sight. Scripts are not loaded at all if the client never requests them. This does not affect the native functionality of require.js and scripts that are always needed can still be loaded asynchronously. Technical.
All scripts are accessible at cdn.udx.io/{global-script-name}. Scripts may be extremely simple or very complex. A simple script may be used to display the console log, while an advanced script may load a video player and will adjust based on the client’s device. Elements that require scripts can have inner elements which the script may utilize in some way. All JavaScript modules must CommonJS standard.