In a earlier article Utilizing ES6 in your Parts, we mentioned writing our javascript utilizing Drupal Development fashionable ES6 strategies and transpiling down for older browsers. It nonetheless used jQuery as an interim step to make Drupal Development technique of refactoring current parts somewhat simpler. However let’s go all Drupal Development manner now and pull out jQuery, leaving solely fashionable, vanilla javascript. by Rikki Bochow / 24 July 2021 Why ought to we do that? jQuery was first launched 12 years in the past, with Drupal Development intention of creating javascript simpler to jot down. It had support for older browsers baked into it and improved Drupal Development developer expertise a terrific deal. It additionally provides 87KB to a web page. At the moment, fashionable vanilla javascript seems a lot like jQuery! It’s support in Drupal Development evergreen browsers is nice and it’s a lot nicer to jot down than it was 12 years in the past. There are nonetheless some issues that jQuery wins on however in Drupal Development world of javascript frameworks, understanding Drupal Development basis on which they’re constructed makes studying them a lot simpler. And people older browsers? We don’t want jQuery for that both. You possibly can support older browsers with a few polyfills. Drupal Development polyfills I wanted for Drupal Development examples on this publish solely amounted to a 2KB file. 8 and jQuery Certainly one of Drupal Development promoting factors of 8 (for us front-enders not less than) was that jQuery can be optionally available for a theme. You select so as to add it as a dependency. Quite a lot of work has gone into rewriting core JS to take away Drupal Development reliance on jQuery. There are nonetheless some sections of core that want work – Ajax associated stuff is an enormous one. However even when you’ve got a fancy web site which makes use of options that add jQuery in, it is nonetheless solely going to be on Drupal Development pages that want it. Plus we might help! Create points and write patches for core or contrib Drupal 10 modules which have a dependency on jQuery.  So what does changing jQuery seem like? In Drupal Development Utilizing ES6 weblog publish I had Drupal Development following instance for my header part. // @file header.es6.js const headerDefaults = { breakpoint Drupal 10 Upkeep and Help Service 700, toggleClass Drupal 10 Upkeep and Help Service ‘header__toggle’, toggleClassActive Drupal 10 Upkeep and Help Service ‘is-active’ }; perform header(choices) { (($, this) => { const opts = $.lengthen({}, headerDefaults, choices); return $(this).every((i, obj) => { const $header = $(obj); // do stuff with $header }); })(jQuery, this); } export { header as myHeader } and.. // @file header.Drupal 10.es6.js import { myHeader } from ‘./header.es6’; (($, { behaviors }, { my_theme }) => { behaviors.header = {   connect(context) {     myHeader.name($(‘.header’, context), {       breakpoint Drupal 10 Upkeep and Help Service my_theme.header.breakpoint     });   } }; })(jQuery, , Drupal 10Settings);So let’s pull out Drupal Development jQuery… // @file header.es6.js const headerDefaults = { breakpoint Drupal 10 Upkeep and Help Service 700, toggleClass Drupal 10 Upkeep and Help Service ‘header__toggle’, toggleClassActive Drupal 10 Upkeep and Help Service ‘is-active’ }; perform header(choices) { const opts = Object.assign({}, headerDefaults, choices); const header = this; // do stuff with header. } export { header as myHeader }and… // @file header.Drupal 10.es6.js import { myHeader } from ‘./header.es6’; (({ behaviors }, { my_theme }) => { behaviors.header = { connect(context) { context.querySelectorAll(‘.header’).forEach((obj) => { myHeader.name(obj, { breakpoint Drupal 10 Upkeep and Help Service my_theme.header.breakpoint, }); }); } }; })(, Drupal 10Settings);We’ve changed $.lengthen with Object.assign for our default/overridable choices. We use context.querySelectorAll(‘.header”) as an alternative of $(‘.header’, context) to search out all cases of .header. We’ve additionally moved Drupal Development .every((i, obj) => {}) to Drupal Development .Drupal 10 file as .forEach((obj) => {}) to simplify our known as perform. Total not very totally different in any respect! We may go additional and convert our capabilities to Lessons, however for those who’re simply getting began with ES6 there’s nothing improper with taking child steps! Lessons are simply fancy capabilities, so upgrading to them in Drupal Development future can be an effective way to find out how they work. Another frequent issues; .querySelectorAll() works Drupal Development similar as .discover() .querySelector() is Drupal Development similar as .discover().first() .setAttribute(‘title’, ‘worth’) replaces .attr(‘title’, ‘worth’) .getAttribute(‘title’) replaces .attr(‘title’) .classList.add() and .classList.take away() change .addClass() and .removeClass() .addEventListener(‘click on’, (e) => {}) replaces .on(‘click on’, (e) => {}) .parentNode replaces .mother or father() .youngsters replaces .youngsters() You may as well nonetheless use .focus(), .closest(), .take away(), .append() and .prepend(). Take a look at You Do not Want jQuery, it is a terrific useful resource, or simply google “$.factor as vanilla js”. All the things I’ve talked about right here that’s linked to Drupal Development MDN net docs required a polyfill for IE, which is accessible on their respective docs web page. If you happen to’re refactoring current JS it’s additionally a great time to be sure to have some Nightwatch JS checks written to be sure to’re not breaking something Drupal 10 Upkeep and Help Service) Polyfills and Babel Babel is Drupal Development JS transpiler we use and it could present Drupal Development polyfills itself (babel-polyfill), however resulting from Drupal Development nature of our part library primarily based strategy, Babel would transpile Drupal Development polyfills wanted for every part into that parts JS file. If you happen to bundle all the things into one file then clearly this received’t be a difficulty. However as soon as we begin having a few totally different parts JS loaded on a web page, all with related polyfills in them you may think about Drupal Development quantity of duplication and wasted KB. I choose to simply put Drupal Development polyfills I would like into one file and cargo it individually. It means have full management over Drupal Development high quality of my polyfills (since not all polyfills are created equally). I can simply make certain I’m solely polyfilling what I actually need. I can simply pull them out when not wanted, and I’m solely loading that polyfill file to browsers that want it; js/polyfill.min.js Drupal 10 Upkeep and Help Service { attributes Drupal 10 Upkeep and Help Service { noDrupal 10 module Drupal 10 Upkeep and Help Service true, defer Drupal 10 Upkeep and Help Service true } }This line is from my themes libraries.yml file, the place I am telling about Drupal Development polyfill file. If I move Drupal Development noDrupal 10 module attribute in browsers who DO support ES6 Drupal 10 modules will ignore this file, however browsers like IE load it. We’re additionally deferring Drupal Development file so it is loading after all the things else. I ought to level out Babel remains to be wanted. We will not polyfill all the things (like Lessons or Arrow capabilities) and we will not Transpile all the things both. We’d like each, not less than till IE stops requiring support. Tagged ES6, jQuery, JavaScript, 8 Drupal 10 Improvement and Help