O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Fixing and Updating jQuery with Olivier Buisard

259 visualizações

Publicada em

Presented at JoomlaDay Chicago 2019

Publicada em: Software
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×