logo

Polyfilly a transpilery

Jazyk JavaScript se neustále vyvíjí. Pravidelně se objevují nové návrhy jazyka, jsou analyzovány, a pokud jsou považovány za vhodné, jsou připojeny k seznamu na https://tc39.github.io/ecma262/ a poté se postupuje ke specifikaci.

Týmy stojící za JavaScriptovými motory mají své vlastní představy o tom, co implementovat jako první. Mohou se rozhodnout implementovat návrhy, které jsou ve fázi návrhu, a odložit věci, které jsou již ve specifikaci, protože jsou méně zajímavé nebo jen obtížněji proveditelné.

Je tedy zcela běžné, že motor implementuje pouze část standardu.

Dobrá stránka, kde se můžete podívat na aktuální stav podpory jazykových funkcí, je https://kangax.github.io/compat-table/es6/ (je to velké, máme toho ještě hodně co studovat).

Jako programátoři bychom rádi používali nejnovější funkce. Čím více dobrých věcí – tím lépe!

Na druhou stranu, jak zajistit, aby náš moderní kód fungoval na starších motorech, které ještě nerozumí nejnovějším funkcím?

K tomu existují dva nástroje:

  1. Transpilery.
  2. Polyfills.

Zde, v této kapitole, je naším cílem získat podstatu toho, jak fungují, a jejich místo ve vývoji webu.

Transpilery

Transpiler je speciální software, který překládá zdrojový kód do jiného zdrojového kódu. Dokáže analyzovat („číst a porozumět“) modernímu kódu a přepisovat jej pomocí starších konstrukcí syntaxe, takže bude fungovat i v zastaralých enginech.

Např. JavaScript před rokem 2020 neměl „nulový slučovací operátor“ ?? . Pokud tedy návštěvník používá zastaralý prohlížeč, nemusí kód pochopit, například height = height ?? 100 .

Transpiler by analyzoval náš kód a přepsal height ?? 100 do (height !== undefined && height !== null) ? height : 100 .

// before running the transpiler
height = height ?? 100;

// after running the transpiler
height = (height !== undefined && height !== null) ? height : 100;

Nyní je přepsaný kód vhodný pro starší JavaScriptové stroje.

Obvykle vývojář spustí transpiler na svém vlastním počítači a poté nasadí transpilovaný kód na server.

Když už mluvíme o jménech, Babel je jedním z nejprominentnějších transpilerů.

Moderní systémy pro vytváření projektů, jako je webpack, poskytují prostředky pro automatické spuštění transpileru při každé změně kódu, takže je velmi snadné jej integrovat do procesu vývoje.

Polyfills

Nové funkce jazyka mohou zahrnovat nejen syntaktické konstrukce a operátory, ale také vestavěné funkce.

Například Math.trunc(n) je funkce, která „ořízne“ desetinnou část čísla, např. Math.trunc(1.23) vrátí 1 .

V některých (velmi zastaralých) JavaScriptových strojích není Math.trunc , takže takový kód selže.

Protože mluvíme o nových funkcích, nikoli o změnách syntaxe, není třeba zde nic překládat. Potřebujeme pouze deklarovat chybějící funkci.

Skript, který aktualizuje/přidává nové funkce, se nazývá „polyfill“. „Vyplňuje“ mezeru a přidává chybějící implementace.

V tomto konkrétním případě polyfill pro Math.trunc je skript, který jej implementuje takto:

if (!Math.trunc) { // if no such function
 // implement it
 Math.trunc = function(number) {
 // Math.ceil and Math.floor exist even in ancient JavaScript engines
 // they are covered later in the tutorial
 return number < 0 ? Math.ceil(number) : Math.floor(number);
 };
}

JavaScript je vysoce dynamický jazyk. Skripty mohou přidat/upravit libovolnou funkci, dokonce i ty vestavěné.

Dvě zajímavé knihovny polyfill jsou:

  • core js, který toho hodně podporuje, umožňuje zahrnout pouze potřebné funkce.
  • služba polyfill.io, která poskytuje skript s polyfilly v závislosti na funkcích a prohlížeči uživatele.

Shrnutí

V této kapitole bychom vás rádi motivovali ke studiu moderních a dokonce „nedokonalých“ jazykových funkcí, i když ještě nejsou dobře podporovány JavaScriptovými motory.

Jen nezapomeňte použít transpiler (pokud používáte moderní syntaxi nebo operátory) a polyfilly (pro přidání funkcí, které mohou chybět). Zajistí, aby kód fungoval.

Například později, až budete obeznámeni s JavaScriptem, můžete nastavit systém tvorby kódu založený na webpacku s pluginem babel-loader.

Dobré zdroje, které ukazují aktuální stav podpory různých funkcí:

  • https://kangax.github.io/compat-table/es6/ – pro čistý JavaScript.
  • https://caniuse.com/ – pro funkce související s prohlížečem.

P.S. Google Chrome je obvykle nejaktuálnější s jazykovými funkcemi, vyzkoušejte jej, pokud selže ukázka výukového programu. Většina výukových ukázek však funguje s jakýmkoli moderním prohlížečem.