Javascript in Astroid Framework
Integrating JavaScript into a web page has always been a critical topic. Where to put JavaScript is discussed for a long time. And when we see it in the context of Joomla, it becomes even more complicated. Why complicated? Let's see an example of a typical Joomla page and Template made with Bootstrap 4.
A page with Slider, Login modal, Custom Modules and so on needs jQuery, Bootstrap 4 JS and Slider Plugin JS. Now, Joomla loads an older version of jQuery and Bootstrap JS with some core JS files, Which is a key to the conflict. Some extensions provide functionality of optional load of jQuery and Bootstrap files but again most of time jQuery and Bootstrap JS versions getting conflict with each other.
So, another solution to solve above problem also came out that framework should skip the load of older versions of jQuery and Bootstrap, but by skipping these also may have issue for it's depended extensions. Such as Joomla's default tooltip, frontend editing tabs and models, dropdown etc. We skipped old versions of jQuery and Bootstrap in the previous versions of Astroid and so many users have also reported that many of their extensions are not working due to this.
In the midst of all these difficulties, Javascript minification has been demanded by all users for a very long time. Again it becomes even more complicated when we try to minify all JavaScript and put them all together. Also, Some people are in favor of putting JavaScript in to <head> and some in favor of </body>.
Keeping all these complex problems in mind, we decided that we will do nothing. Yes, you heard it right. We will not interfere with any javascript used by any user or extension. Also we have to take care that we do not make any changes in their (JavaScript) sequence. So according to the best practices of the industry, we put our JavaScript at the bottom (before </body>) and we tried to make sure that there is no conflict of any kind with other scripts.
While minify, We collect all the javascripts without changing any sequence and then minify them put them down (before </body>) together.
Astroid JavaScripts in </body> looks something like this:
<script src="media/astroid/assets/vendor/jquery/jquery-3.5.1.min.js"></script>
<script src="media/astroid/assets/vendor/bootstrap/js/popper.min.js"></script>
<script src="media/astroid/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="media/astroid/assets/vendor/jquery/jquery.noConflict.js"></script>
<script src="media/astroid/assets/vendor/jquery/jquery.easing.min.js"></script>
<script src="media/astroid/assets/vendor/astroid/js/offcanvas.js"></script>
<script src="media/astroid/assets/vendor/astroid/js/mobilemenu.js"></script>
<script src="media/astroid/assets/vendor/astroid/js/megamenu.js"></script>
<script src="media/astroid/assets/vendor/hoverIntent/jquery.hoverIntent.min.js"></script>
<script src="media/astroid/assets/vendor/astroid/js/script.js"></script>
<!-- Additional Javascript will be load here -->
<script>jQuery.noConflict(true);</script>We hope that this code will not affect any other extension's JavaScript. Now, If we want to load additional Javascripts using Astroid then you can use below code:
$document = Astroid\Framework::getDocument();
// to load script in body
$document->addScriptDeclaration($script, 'body');
$document->addScript($url, 'body');
// to load script in head
$document->addScriptDeclaration($script);
$document->addScript($url);For more info see how to use Astroid\Framework
Important Note: We are still engaged in finding the best solutions for the JavaScript problems and we welcome the suggestions given by others. We do not say that this is the best solution, but it may be the most accurate solution so far.
You can all give your thoughts in the comments below and suggest which other aspects we should pay attention to. Thanks
