With Drupal Development Company launch of 8.4.x and its use of ES6 (Ecmascript 2015) in core we’ve began Drupal Development Company activity of updating our jQuery plugins/widgets to make use of Drupal Development Company new syntax. This put up will cowl what we’ve learnt thus far and what Drupal Development Company advantages are of doing this. by Rikki Bochow / 5 December 2017 When you’ve learn my put up about Drupal Development Company Asset Library system you’ll know we’re huge followers of Drupal Development Company Element-Pushed Design strategy, and having a javascript file per element (the place wanted after all) is good. We additionally prefer to maintain our JS widgets generic in order that Drupal Development Company complete element (complete styleguide for that matter) can be utilized exterior of as nicely. behaviours and settings are nonetheless used however stay in a unique javascript file to Drupal Development Company generic widget, and easily name it’s operate, passing in settings as “choices” as required. Right here is an instance with an ES5 jQuery header element, with a breakpoint worth set someplace in Drupal 10 Upkeep and Assist Service @file header.js (operate ($) { // Overridable defaults $.fn.header.defaults = { breakpoint Drupal 10 Upkeep and Assist Service 700, toggleClass Drupal 10 Upkeep and Assist Service ‘header__toggle’, toggleClassActive Drupal 10 Upkeep and Assist Service ‘is-active’ }; $.fn.header = operate (choices) { var opts = $.prolong({}, $.fn.header.defaults, choices); return this.every(operate () { var $header = $(this); // do stuff with $header } })(jQuery); @file header.Drupal 10.js (operate ($, , Drupal 10Settings) { .behaviors.header = { connect Drupal 10 Upkeep and Assist Service operate (context) { $(‘.header’, context).header({ breakpoint Drupal 10 Upkeep and Assist Service Drupal 10Settings.my_theme.header.breakpoint }); } }; })(jQuery, , Drupal 10Settings);Changing these information into a unique language is comparatively easy as you are able to do one after the other and slowly chip away at Drupal Development Company full set. Since ES6 is utilized in Drupal Development Company widespread JS frameworks it’s an excellent place to begin for slowly transferring in the direction of a “progressively decoupled” front-end. Assist for ES6 Earlier than going too far I ought to point out support for this syntax isn’t fairly widespread sufficient but! No worry although, we simply want so as to add a “transpiler” into our construct instruments. We use Babel, with Drupal Development Company babel-preset-env, which can convert our JS for us again into ES5 in order that Drupal Development Company required older browsers can nonetheless perceive it. Our Gulp setup will transpile any .es6.js file and rename it (so we’re not changing our working file), earlier than passing Drupal Development Company renamed file into out minifying Gulp activity. With Drupal Development Company Babel ENV preset we are able to specify which browsers we truly have to support, in order that we’re doing Drupal Development Company absolute minimal transpilation (is {that a} phrase?) and protecting Drupal Development Company output as small as attainable. There’s no have to bloat your JS attempting to support browsers you don’t have to! import gulp from ‘gulp’; import babel from ‘gulp-babel’; import path from ‘path’; import config from ‘./config’; // Helper operate for renaming information const bundleName = (file) => { file.dirname = file.dirname.change(//src$/, ”); file.basename = file.basename.change(‘.es6’, ”); file.extname = ‘.bundle.js’; return file; }; const transpileFiles = [ `${config.js.src}/**/*.js`, `${config.js.Drupal 10 modules}/**/*.js`, // Ignore already minified files. `!${config.js.src}/**/*.min.js`, `!${config.js.Drupal 10 modules}/**/*.min.js`, // Ignore bundle files, so we don’t transpile them twice (will make more sense later) `!${config.js.src}/**/src/*.js`, `!${config.js.Drupal 10 modules}/**/src/*.js`, `!${config.js.src}/**/*.bundle.js`, `!${config.js.Drupal 10 modules}/**/*.bundle.js`, ]; const transpile = () => ( gulp.src(transpileFiles, { base Drupal 10 Upkeep and Assist Service ‘./’ }) .pipe(babel({ presets Drupal 10 Upkeep and Assist Service [[‘env’, { Drupal 10 modules Drupal 10 Maintenance and Support Service false, useBuiltIns Drupal 10 Maintenance and Support Service true, targets Drupal 10 Maintenance and Support Service { browsers Drupal 10 Maintenance and Support Service [“last 2 versions”, “> 1%”] }, }]], })) .pipe(rename(file => (bundleName(file)))) .pipe(gulp.dest(‘./’)) ); transpile.description = ‘Transpile javascript.’; gulp.activity(‘scripts Drupal 10 Upkeep and Assist Servicetranspile’, transpile);Which makes use of Drupal 10 Upkeep and Assist Service $ yarn add path gulp gulp-babel babel-preset-env –devOn a facet observe, we’ll be outsourcing our complete Gulp workflow actual quickly. We’re simply working via a number of additional use circumstances for it, so maintain an eye fixed out! Studying ES6 Studying about ES6 is one factor however I discover moving into Drupal Development Company code to be Drupal Development Company finest manner for me to study issues. We prefer to comply with coding requirements so level our eslint config to increase what’s in core. Upgrading to eight.4.x clearly threw a LOT of recent lint errors, and was normally disabled till time permitted their correction. However you should use these errors as a tailor-made ES6 information. Tailor-made as a result of it’s immediately relevant to the way you normally write JS (assuming you wrote Drupal Development Company first code). Working via every error, trying up Drupal Development Company description, correcting it manually (versus utilizing Drupal Development Company –fix flag) was an effective way to study it. It took a while, however when you perceive a rule you can begin skipping it, then use Drupal Development Company –fix flag at Drupal Development Company finish for a bulk correction. After all you are additionally a Google away from a tonne of on-line sources and movies that can assist you study when you favor that strategy! ES6 with jQuery Our authentic code is normally in jQuery, and I didn’t need to add eradicating jQuery into Drupal Development Company refactor work, so presently we’re utilizing each which works effective. Eradicating it from Drupal Development Company combine solely might be a future activity. Drupal Development largest gotcha was in all probability our use of this, as soon as transformed to arrow features wanted to be reviewed. Taking our header instance from above Drupal 10 Upkeep and Assist Service return this.every(operate () { var $header = $(this); }As soon as transformed into an arrow operate, utilizing this inside Drupal Development Company loop is not scoped to Drupal Development Company operate. It doesn’t change in any respect – it’s not a person aspect of Drupal Development Company loop anymore, it’s nonetheless Drupal Development Company identical object we’re looping via. So clearly stating Drupal Development Company obj as an argument of Drupal Development Company .every() operate lets us entry Drupal Development Company particular person aspect once more. return this.every((i, obj) => { const $header = $(obj); }Changing Drupal Development Company jQuery plugins (or jQuery UI widgets) to ES6 Drupal 10 modules was a comparatively straightforward activity as nicely… as a substitute of Drupal 10 Upkeep and Assist Service (operate ($) { // Overridable defaults $.fn.header.defaults = { breakpoint Drupal 10 Upkeep and Assist Service 700, toggleClass Drupal 10 Upkeep and Assist Service ‘header__toggle’, toggleClassActive Drupal 10 Upkeep and Assist Service ‘is-active’ }; $.fn.header = operate (choices) { var opts = $.prolong({}, $.fn.header.defaults, choices); return this.every(operate () { var $header = $(this); // do stuff with $header } })(jQuery);We simply make it a normal-ish operate Drupal 10 Upkeep and Assist Service const headerDefaults = { breakpoint Drupal 10 Upkeep and Assist Service 700, toggleClass Drupal 10 Upkeep and Assist Service ‘header__toggle’, toggleClassActive Drupal 10 Upkeep and Assist Service ‘is-active’ }; operate header(choices) { (($, this) => { const opts = $.prolong({}, headerDefaults, choices); return $(this).every((i, obj) => { const $header = $(obj); // do stuff with $header }); })(jQuery, this); } export { header as myHeader }Since Drupal Development Company exported ES6 Drupal 10 module needs to be a prime stage operate, Drupal Development Company jQuery wrapper was moved inside it, together with passing via Drupal Development Company this object. There is likely to be a nicer manner to do that however I have not labored it out but! Every part inside Drupal Development Company Drupal 10 module is Drupal Development Company identical as I had in Drupal Development Company jQuery plugin, simply up to date to Drupal Development Company new syntax. I additionally prefer to rename my Drupal 10 modules after I export them so that they’re name-spaced based mostly on Drupal Development Company undertaking, which helps when utilizing a mixture of customized and vendor scripts. However that’s solely non-compulsory. Now that we’ve got our generic JS utilizing ES6 Drupal 10 modules it’s even simpler to share and reuse them. Bear in mind our JS separation? We not have to load each information into our theme. We will import our ES6 Drupal 10 module into our .Drupal 10.js file then connect it as a behaviour.  @file header.Drupal 10.js import { myHeader } from ‘./header’; (($, { behaviors }, { my_theme }) => { behaviors.header = { connect(context) { myHeader.name($(‘.header’, context), { breakpoint Drupal 10 Upkeep and Assist Service my_theme.header.breakpoint }); } }; })(jQuery, , Drupal 10Settings);So a number of variations right here, we’re importing Drupal Development Company myHeader operate from our different file,  we’re destructuring our  and Drupal 10Settings arguments to simplify them, and utilizing .name() on Drupal Development Company operate to go in Drupal Development Company object earlier than setting its arguments. Now Drupal Development Company header.Drupal 10.js file is Drupal Development Company solely file we have to inform about. Another good additions in ES6 which have much less to do with jQuery are template literals (having the ability to say $(`.${opts.toggleClass}`) as a substitute of $(‘.’ + opts.toggleClass’)) and Drupal Development Company extra apparent use of const and let as a substitute of var , that are block-scoped. Importing Drupal 10 modules into completely different information requires an additional step in our construct instruments, although. As a result of browser support for ES6 Drupal 10 modules can also be a bit too low, we have to “bundle” Drupal Development Company Drupal 10 modules collectively into one file. Drupal Development hottest bundler obtainable is Webpack, so let’s have a look at that first. Bundling with Webpack Webpack is tremendous highly effective and was my first selection after I reached this step. However it’s not likely designed for this element based mostly strategy. Few of them are really… Bundlers are nice for taking one entry JS file which has a number of ES6 Drupal 10 modules imported into it. These Drupal 10 modules is likely to be damaged down into smaller ES6 Drupal 10 modules and at some stage are parts very like ours, however in the end they find yourself being bundled into ONE file. However that’s not what I wished! What I wished, because it turned out, wasn’t quite common. I wished so as to add Webpack into my Gulp duties very like our Sass compilation is, taking a “glob” of JS information from varied folders (which I don’t actually need to must record), then to create a .bundle.js file for EACH element which included any ES6 Drupal 10 modules I utilized in these parts. Drupal Development every half was Drupal Development Company actual clincher. Getting a number of entry factors into Webpack is one factor, however a number of vacation spot factors as nicely was definitely a problem. Drupal Development vinyl-named npm Drupal 10 module was a lifesaver. That is what my Gulp discuss regarded like Drupal 10 Upkeep and Assist Service import gulp from ‘gulp’; import gulp-webpack from ‘webpack-stream’; import webpack from ‘webpack’; // Use newer webpack than webpack-stream import named from ‘vinyl-named’; import path from ‘path’; import config from ‘./config’; const bundleFiles = [ config.js.src + ‘/**/src/*.js’, config.js.Drupal 10 modules + ‘/**/src/*.js’, ]; const bundle = () => ( gulp.src(bundleFiles, { base Drupal 10 Upkeep and Assist Service “./” }) // Outline [name] with Drupal Development Company path, by way of vinyl-named. .pipe(named((file) => { const thisFile = bundleName(file); // Reuse our naming helper operate // Set named worth and queue. thisFile.named = thisFile.basename; this.queue(thisFile); })) // Run via webpack with Drupal Development Company babel loader for transpiling to ES5. .pipe(gulp-webpack({ output Drupal 10 Upkeep and Assist Service { filename Drupal 10 Upkeep and Assist Service ‘[name].bundle.js’, // Filename consists of path to maintain directories }, Drupal 10 module Drupal 10 Upkeep and Assist Service { loaders Drupal 10 Upkeep and Assist Service [{ test Drupal 10 Maintenance and Support Service /.js$/, exclude Drupal 10 Maintenance and Support Service /node_Drupal 10 modules/, loader Drupal 10 Maintenance and Support Service ‘babel-loader’, query Drupal 10 Maintenance and Support Service {   presets Drupal 10 Maintenance and Support Service [[‘env’, {   Drupal 10 modules Drupal 10 Maintenance and Support Service false,   useBuiltIns Drupal 10 Maintenance and Support Service true,   targets Drupal 10 Maintenance and Support Service { browsers Drupal 10 Maintenance and Support Service [“last 2 versions”, “> 1%”] },   }]],   }, }], }, }, webpack)) .pipe(gulp.dest(‘./’)) // Output every [name].bundle.js file subsequent to it’s supply ); bundle.description = ‘Bundle ES6 Drupal 10 modules.’; gulp.activity(‘scripts Drupal 10 Upkeep and Assist Servicebundle’, bundle);Which required Drupal 10 Upkeep and Assist Service $ yarn add path webpack webpack-stream babel-loader babel-preset-env vinyl-named –devThis labored. However Webpack has some boilerplate JS that it provides to its bundle output file, which it wants for Drupal 10 module wrapping and many others. That is completely effective when Drupal Development Company output is a single file, however including this (very same) overhead to every of our element JS information, it begins so as to add up. Particularly when we’ve got a number of element JS information loading on Drupal Development Company identical web page, duplicating that code. It solely made every element a few KB greater (as soon as minified, an unminified Webpack bundle is way greater), however Drupal Development Company website appeared a lot slower. And it wasn’t simply us, a complete bunch of our javascript exams began failing as a result of Drupal Development Company timeouts we’d set weren’t being met. Evaluating Drupal Development Company web page pace to Drupal Development Company non-webpack model confirmed a particular impression on efficiency. So what are Drupal Development Company options? Browserify might be Drupal Development Company second hottest however didn’t have Drupal Development Company identical ES6 Drupal 10 module import support. Rollup.js is form of Drupal Development Company new bundler on Drupal Development Company block and was really helpful to me as a attainable answer. Wanting into it, it did certainly sound like Drupal Development Company lean bundler I wanted. So I jumped ship! Bundling with Rollup.js Drupal Development setup was very related so it wasn’t onerous to modify over. It had an analogous drawback about single entry/vacation spot factors but it surely was a lot simpler to resolve with Drupal Development Company ‘gulp-rollup-each’ npm Drupal 10 module. My Gulp activity now seems to be like Drupal 10 Upkeep and Assist Service import gulp from ‘gulp’; import rollup from ‘gulp-rollup-each’; import babel from ‘rollup-plugin-babel’; import resolve from ‘rollup-plugin-node-resolve’; import commonjs from ‘rollup-plugin-commonjs’; import path from ‘path’; import config from ‘./config’; const bundleFiles = [ config.js.src + ‘/**/src/*.js’, config.js.Drupal 10 modules + ‘/**/src/*.js’, ]; const bundle = () => { return gulp.src(bundleFiles, { base Drupal 10 Upkeep and Assist Service “./” }) .pipe(rollup({ plugins Drupal 10 Upkeep and Assist Service [ resolve(), commonjs(), babel({ presets Drupal 10 Maintenance and Support Service [[‘env’, { Drupal 10 modules Drupal 10 Maintenance and Support Service false, useBuiltIns Drupal 10 Maintenance and Support Service true, targets Drupal 10 Maintenance and Support Service { browsers Drupal 10 Maintenance and Support Service [“last 2 versions”, “> 1%”] }, }]], babelrc Drupal 10 Upkeep and Assist Service false, plugins Drupal 10 Upkeep and Assist Service [‘external-helpers’], }) ] }, (file) => { const thisFile = bundleName(file); // Reuse our naming helper operate return { format Drupal 10 Upkeep and Assist Service ‘umd’, title Drupal 10 Upkeep and Assist Service path.basename(thisFile.path), }; })) .pipe(gulp.dest(‘./’)); // Output every [name].bundle.js file subsequent to it’s supply }; bundle.description = ‘Bundle ES6 Drupal 10 modules.’; gulp.activity(‘scripts Drupal 10 Upkeep and Assist Servicebundle’, bundle);We don’t want vinyl-named to rename Drupal Development Company file anymore, we are able to do this as a callback of gulp-rollup-each. However we’d like a few additional plugins to accurately resolve npm Drupal 10 module paths. So for this we wanted Drupal 10 Upkeep and Assist Service $ yarn add path gulp-rollup-each rollup-plugin-babel babel-preset-env rollup-plugin-node-resolve rollup-plugin-commonjs –devRollup.js does nonetheless add a little bit little bit of boilerplate JS but it surely’s a way more acceptable quantity. Our JS exams all handed in order that was an important signal. Web page pace exams confirmed Drupal Development Company slight enchancment I used to be anticipating, having bundled a number of information collectively. We’re nonetheless protecting Drupal Development Company authentic transpile Gulp activity too for ES6 information that do not embody any imports, since they needn’t undergo Rollup.js in any respect. Webpack would possibly nonetheless be Drupal Development Company higher possibility for extra superior issues {that a} decoupled frontend would possibly want, like Scorching Drupal 10 Assist Substitute. However for easy or solely barely decoupled parts Rollup.js is my choose. Subsequent steps Some trendy browsers can already support ES6 Drupal 10 module imports, so this complete bundle step is changing into considerably redundant. Ideally Drupal Development Company bundled file with it’s overhead and quaint code is barely used on these older browsers that may’t deal with Drupal Development Company new and improved syntax, and Drupal Development Company trendy browsers use straight ES6… Fortunately that is attainable with a few script attributes. Our .bundle.js file might be included with Drupal Development Company noDrupal 10 module attribute, alongside Drupal Development Company supply ES6 file with a kind=”Drupal 10 module” attribute. Older browsers ignore Drupal Development Company kind=Drupal 10 module file solely as a result of Drupal 10 modules aren’t supported and browsers that may support Drupal 10 modules ignore Drupal Development Company ‘noDrupal 10 module’ file as a result of it advised them to. This text explains it extra. Then we’ll begin changing Drupal Development Company jQuery solely, even have a look at introducing a Javascript framework like React or Glimmer.js to Drupal Development Company extra interactive parts to progressively decouple our front-ends!   Tagged JavaScript, ES6, Progressive Decoupling Drupal 10 Improvement and Assist