POLYFILLS

and how to optimize them

A polyfill is a piece of code that brings a new API to an older environment, using only the means of that environment

DEFINITION

promise

fetch

intl

animate

 ...

EXAMPLES

➡️  to replace callbacks

➡️  to make ajax calls

➡️  to internationalize your UI

➡️  to move things beautifully

PROMISES

const coolPromise = new Promise(resolve => {
    createCoolStuff();
    resolve();
});
 
coolPromise.then(() => {
    console.log();
}); 

BROWSER SUPPORT

http://caniuse.com/#feat=promises

OPTIMIZATION

promise

fetch

intl

animate

➡️  10 kB

➡️  7 kB

➡️  217 kB

➡️  60 kB

         ...

➡️  a lot of bytes

FEATURE DETECTION

if (typeof window.Promise !== 'function') {
    loadPromisePolyfill();
} 

polyfill-service

<script src="https://cdn.polyfill.io/polyfill.js?features=Promise,fetch,Intl"></script>
<script src="/app.js"></script>

📖  User-Agent detection

📬  only sends needed polyfills

👍🏼  only one HTTP request

<script src="https://cdn.polyfill.io/polyfill.js?features=Promise,fetch,Intl"></script>
<script src="/app.js"></script> 

polyfill-service

polyfill-service

polyfill-service

❌  no API for custom polyfills

⚠️  feature detection is better than UA

👻  impossible cache if self-hosted

👷🏼  hardcoded polyfill list

<script src="https://cdn.polyfill.io/polyfill.js?features=Promise,fetch,Intl"></script>
<script src="/app.js"></script> 

let's make our own

👉🏼   define a custom polyfill list

🔬   generate reduced polyfill list needed by app

👀  generate feature detection code

🚀   ask only for polyfills needed by user

🍞   bake user-customized polyfill file

mastic

🔧 https://github.com/thibthib/mastic

⚒   a curated list of polyfills with their features detection tests

🍞   a node server able to return a custom bundles of polyfills in one request

👀   the inlined code that detect the polyfills the browser needs and load them before the app's code executes

mastic

import filler from 'mastic-filler';
import { Promise } from 'mastic-polyfills';
 
filler({
    polyfills: [Promise],
    url: 'http://url.of.your.mastic.server',
    scripts: [
        'assets/commons.js',
        'assets/weekend.js' 
    ]
}); 

📡   https://github.com/thibthib/mastic/tree/master/packages/mastic-filler

page wekend

BANCO

LET'S GO

COME ON

👍🏼

💪🏼

🔝