How to load polyfills to handle Web Components?

#webcomponents #javascript #polyfills #frontend

In this article I will explain you how I handled the latest ES6 and Web Components features.
If you are starting to work with Web Components you should know that they are well supported by Chrome, Firefox, Safari and Microsoft announced this year that they are working to support them.
So you don't need to load polyfills statically, increasing the weight of the final package.

For this reason I created a specific bundle to load polyfills at runtime when browsers don't support it.
I listed the most used features split by types. Below you can find the code:

	import MyComponent from './component';

	const boostrap = () => {
	customElements.define('app-my-component', MyComponent);
	};

	if (
	// OTHERS
	'Symbol' in window &&
	'fetch' in window &&
	'customElements' in window &&
	// ARRAYS
	'entries' in Array.prototype &&
	'from' in Array &&
	'find' in Array.prototype &&
	'findIndex' in Array.prototype &&
	'includes' in Array.prototype &&
	'keys' in Array.prototype &&
	'values' in Array.prototype &&
	// OBJECTS
	'assign' in Object &&
	'entries' in Object &&
	'values' in Object &&
	// STRINGS
	'endsWith' in String.prototype &&
	'includes' in String.prototype &&
	'startsWith' in String.prototype
	) {
	boostrap();
	} else {
	import(/* webpackChunkName: "polyfills" */ './polyfills').then(() => boostrap());
	}

view raw webcomponents-example-1-index.js hosted with ❤ by GitHub

As you can see I created a function where I define my WC and then I used dynamic import to enable code splitting to load all polyfills. The file contains all features that I need like fetch, es6 and WC features. Check the code:

	// OTHERS
	import 'core-js/fn/symbol';
	import 'whatwg-fetch';
	import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';

	// ARRAYS
	import 'core-js/fn/array/entries';
	import 'core-js/fn/array/from';
	import 'core-js/fn/array/find';
	import 'core-js/fn/array/find-index';
	import 'core-js/fn/array/includes';
	import 'core-js/fn/array/keys';
	import 'core-js/fn/array/values';

	// OBJECTS
	import 'core-js/fn/object/assign';
	import 'core-js/fn/object/entries';
	import 'core-js/fn/object/values';

	// STRINGS
	import 'core-js/fn/string/ends-with';
	import 'core-js/fn/string/includes';
	import 'core-js/fn/string/starts-with';

view raw webcomponents-example-1-polyfills.js hosted with ❤ by GitHub

To enable code splitting with webpack you need to install the following package:

$ npm i --save-dev @babel/plugin-syntax-dynamic-import

After that add the package in your babel setup (.babelrc or babel.config.js):

$  plugins: [
$   '@babel/plugin-syntax-dynamic-import'
$  ]

This demo works without the help of polyfills in Chrome, Safari, Firefox and Edge

If you try to launch the application with IE11, you will see the polyfill loaded:

If you need to see the code, below you can find the links of my repositories:

Are Web Components the future? I don't know but with the right approach you can build reusable components that work in all browsers without load polyfills if you don't need it.

Keep calm and code!

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.