Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fixing and Updating jQuery with Olivier Buisard

184 views

Published on

Presented at JoomlaDay Chicago 2019

Published in: Software
  • Be the first to comment

  • Be the first to like this

Fixing and Updating jQuery with Olivier Buisard

  1. 1. 
 
 FIXING AND UPDATING JQUERY CODE OLIVIER BUISARD OCTOBER 2019
  2. 2. Olivier Buisard 10/11/2019 NO, jQuery is not dead • Very popular (large community and pool of plugins) • Ensures you write the code once for all browsers • Use the newest features, available even for older browsers • Requires less code to write • Lighter library now that support for IE6-8 has been removed
  3. 3. Olivier Buisard LIBRARIES USAGE 10/11/2019 0% 20% 40% 60% 80% 2012 2015 2019 2%4%5% 74% 61% 43% 24% 35% 49% no libraries jQuery MooTools Source: Web Technology Surveys w3techs.com/technologies/history_overview/javascript_library
  4. 4. Olivier Buisard WHY MIGRATE? • Preserve compatibility of old jQuery code • Deprecated code won’t ‘break’ • Available in Joomla 3, not in Joomla 4 BUT • Extra code to execute • Additional library to load 10/11/2019
  5. 5. Olivier Buisard MIGRATE VERSIONS 10/11/2019 Migrate jQuery None Up to v1.8 v1.4.1 v1.9 up to v1.12.4/2.2.4 (v2 removes support for IE6-8) v3.1.0 V3.x Migrate v3.1 WILL NOT resolve errors caught by v1.4.1
  6. 6. Olivier Buisard INSTALL JQUERY EASY 10/11/2019
  7. 7. Olivier Buisard SCRIPTS UNDER JQUERY V1.12.4 • Enable the jQuery Easy plugin • Set jQuery to v1.12.4 • Set Migrate to v1.4.1 • Use uncompressed versions • Check the browser console 10/11/2019
  8. 8. Olivier Buisard SCRIPTS UNDER JQUERY V1.12.4 • Fix jQuery code (https://github.com/jquery/jquery-migrate/blob/ 1.x-stable/warnings.md) • Disable Migrate • Test the site 10/11/2019
  9. 9. Olivier Buisard SCRIPTS UNDER JQUERY V3.4.1 • Set jQuery to v3.4.1 • Set Migrate to v3.1.0 • Use uncompressed versions • Check the browser console 10/11/2019
  10. 10. Olivier Buisard SCRIPTS UNDER JQUERY V3.4.1 • Fix jQuery code https://github.com/jquery/jquery-migrate/blob/ master/warnings.md • Disable Migrate • Test the site 10/11/2019
  11. 11. Olivier Buisard REMOVING MIGRATE IN JOOMLA JHtml::_('bootstrap.framework’); (Calls JHtml::_('jquery.framework’);) 10/11/2019 JHtml::_('script', 'jui/bootstrap.min.js', array('version' => 'auto', 'relative' => true)); JHtml::_('jquery.framework’, true, null, false);
  12. 12. Olivier Buisard public function onAfterInitialise() { JHtml::register('jquery.framework', function ($noConflict = false, $debug = null, false) { JHtml::_('script', '.../ jquery-2.2.4.min.js', array('version' => 'auto', 'relative' => true, 'detectDebug' => $debug)); 
 // Check if we are loading in noConflict if ($noConflict) { JHtml::_('script', 'jui/jquery- noconflict.js', array('version' => 'auto', 'relative' => true)); } 
 // Check if we are loading Migrate if ($migrate) { JHtml::_('script', 'jui/jquery- migrate.min.js', array('version' => 'auto', 'relative' => true, 'detectDebug' => $debug)); } } } REMOVING MIGRATE IN JOOMLA 10/11/2019
  13. 13. Olivier Buisard AVOID SCRIPT ISSUES IN JOOMLA • Identify extensions needing jQuery • Is your template using jQuery (Bootstrap? yes!) • Turn off jQuery in extensions if parameter • If other libraries are present, use jQuery.noConflict() • Identify which Bootstrap version your template is using 10/11/2019
  14. 14. Olivier Buisard AVOID SCRIPT ISSUES IN JOOMLA • If MooTools is present, try identify why it is necessary on the page • Overuse the browser console (great for CSS too!) 10/11/2019
  15. 15. Olivier Buisard AVOID SCRIPT ISSUES IN JOOMLA • Make sure the code is encapsulated correctly 10/11/2019 $(document).ready(function(){ $("div").hide(); // picked up by jQuery and MooTools }); jQuery(document).ready(function($){ $("div").hide(); // picked up by jQuery only });
  16. 16. Olivier Buisard AVOID SCRIPT ISSUES IN JOOMLA 10/11/2019 var $j = jQuery.noConflict(); // Use jQuery via $j(...) $j(document).ready(function(){ $j("div").hide(); }); 
 jQuery.noConflict()(function(){ /* code using jQuery */ }); 
 (function($) { /* some code that uses $ */ })(jQuery)
  17. 17. Olivier Buisard GETTING HELP WITH JQUERY EASY 10/11/2019
  18. 18. Olivier Buisard REFERENCES • https://jquery.com/upgrade-guide/3.0/ • https://simplifyyourweb.com/documentation/tutorials/470-how-to- update-old-jquery-scripts-for-compatibility-with-jquery-3 10/11/2019
  19. 19. Olivier Buisard OLIVIER.BUISARD@SIMPLIFYYOURWEB.COM
 @SIMPLIFYYOURWEB THANK YOU! 10/11/2019

×