Ecmascript 6 (2015)
Pokud jste ještě neslyšeli o ES6, tak zpozorněte. Hodně vývojařů ještě žije v přesvědčení, že JavaScript se za posledních, možná 20 let, nezměnil. Realita je naštěstí někde jinde. Je sice pravda, že podpora novějších verzí JavaScriptu vázne hlavně v prohlížečích (IE, na tebe se koukám), ale jenom z toho důvodu nesmíme zaspat dobu a pracovat se starým JavaScriptem když ten nový nabízí tolik možností. Říkáte si na co byste se učili nový JavaScript, když ho stejně můžete použít pouze v nových prohlížečích (pro referenci, tady je tabulka podporovaných funkcí ES6 podle prohlížečů)? Odpověď zní následovně: Babel. Dostanem se k němu za chvíli. Pojďme se ale nejprve podívat na novinky, které ES6 nabízí.
1. Výchozí hodnoty při deklaraci funkcí
Ano, konečně, tady jsou. Srdce vývojaře zvyklého z jiných jazyků jásá. Pojďme se na to podívat. Myslím, že kód mluví za vše.
function myFunc(myParam = false, anotherParam = []) {
console.log(myParam, anotherParam);
}
myFunc(); // false, []
myFunc(true, ['ahoj']); // true, ['ahoj']2. Arrow funkce
Arrow funkce vypadají jako hezkou zkratku pro psaní funkcí. Řeší ale hlubší problematiku než pouze kratší syntaxi. Díky arrow funkcím odkazuje slovíčko this na proměnné, které jsou uvnitř funkce (takže by arrow funkce měly být používány s obezřetností). Problematika kolem this by ale zasloužila hlubšího článku, kterého se doufám dočkáte někdy v budoucnu. Pro anglicky mluvící bych mohl pouze doporučit přečíst si this & object prototypes (ideálně si koupit celou sérii knížek You Don’t Know JS). Pro ilustraci arrow funkcí uvádím příklad níže.
// Takto mohla vypadat jakákoliv anonymní funkce před ES6
var myFunc = function () {
return 'cokoliv';
}
// Takto vypadají arrow funkce v ES6 (používat s obezřetností)
var myFunc = () => 'cokoliv';3. Promises, let, const, a tak dále…
ES6 nabízí další nepřeberné množství nových funkcí, například definice proměnných pomocí let (opět by zasloužilo delší článek o tzv. block scoping v JavaScriptu), definování konstant pomocí const nebo úplně základní věc jako jsou nativní Promises (opět by zasloužilo samostatný článek o asynchronním programování v JavaScriptu). Pojďme se ale nyní podívat na ten tajemný Babel zmíněný v úvodu.
Babel
Z jakého důvodu se učit syntaxi a nové funkce ES6 když je stejně nemůžeme použít v našem kódu? Protože je tady Babel. Babel je obrovský pomocník, protože nám umožňuje používat velké množství ES6 vlastností. Jak to dělá? Babel je nástroj, který převádí (transpiles) novou syntaxi ES6 do kódu kompatibilního se starým JavaScriptem. Nedokáže to ale udělat úplně se vším co ES6 nabízí, ale i tak udělá velký kus práce. Hodně vlastností, které ES6 nabízí je možné převézt. Například výchozí hodnoty funkcí. Když se podíváte na kód, který je u nadpisu Výchozí hodnoty funkcí, do JavaScriptu před ES6 bychom ho přeložili asi takto:
function myFunc(myParam, anotherParam) {
var myParam = typeof myParam !== 'undefined' ? myParam : false;
var anotherParam = typeof anotherParam !== 'undefined' ? anotherParam : [];
console.log(myParam, anotherParam);
}Podobně jako výchozí hodnoty funkcí lze převézt i jiné funkce ES6. Tímto způsobem můžeme používat ES6 a zároveň být kompatibilní se staršími prohlížeči. Pořád jsem se ale nedostal k jádru věci, jak vlastně Babel používat?
Gulp a Babel
Pokud používáte Gulp (jako já) pro hodně projektů, máte štěstí, protože popíši postup jak nastavit Gulp, abyste mohli ve vašem projektu používat ES6.
Mini projekt používající Babel
Instalace závislostí (NPM)
Pro ilustraci jak nainstalovat a používat Babel a ES6 si vytvoříme mini projekt. Struktura projektu bude velmi jednoduchá. Budeme potřebovat package.json, gulpfile.js, app.js a .babelrc. O všechno ostatní se postará gulp. Nejprve si vytvoříme prázdný soubor package.json a následně nainstalujeme potřebné závislosti (dependencies).
// Inicializujeme package.json (staci odklikat nekolikrat enter az se vas to zepta na otazky)
npm init
// Nainstalujeme potrebne zavislosti
npm i --save-dev gulp gulp-babel babel-core babel-preset-es2015Nastavení gulpfile.js
Následně si vytvoříme gulpfile.js, který bude obsahovat následující.
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
return gulp.src("app.js")
.pipe(babel())
.pipe(gulp.dest("build"));
});Tímto způsobem zajistíme, že jakýkoliv kód v souboru app.js se převede do kompatibilního kódu se starými prohlížeči a ve složce /build se vytvoří nový kompatibilní app.js, který můžeme použít na našem webu.
.babelrc
Důležitý soubor, na který nesmíme zapomenout je .babelrc. Pomocí tohoto souboru v podstatě říkáme Babelu, jak má převézt kód. Vložíme do něho následující.
{ "presets": ["es2015"] }app.js
Nyní si vytvoříme app.js, do kterého vložíme kód obsahující ES6 syntaxi, abychom viděli jak Babel takový kód převádí. Pro příklad použijeme kód s funkcí s výchozími hodnotami.
function myFunc(myParam = false, anotherParam = []) {
console.log(myParam, anotherParam);
}
myFunc(); // false, []
myFunc(true, ['ahoj']); // true, ['ahoj']Spustíme projekt
Teď už stačí pouze jediné. V konzoli spustíme převod pomocí naprosto jednoduchého příkazu gulp. Až gulp dokončí svůj proces, podíváme se do složky /build, kde na nás již čeká soubor app.js. Povšimněte si, že obsah toho souboru je velmi podobný tomu, co jsme nastínili když jsme se bavili o Babelu a převádění ES6 syntaxe do kompatibilní podoby.
'use strict';
function myFunc() {
var myParam = arguments.length <= 0 || arguments[0] === undefined ? false : arguments[0];
var anotherParam = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1];
console.log(myParam, anotherParam);
}
myFunc(); // false, []
myFunc(true, ['ahoj']); // true, ['ahoj']A máme hotovo
Určitě jste si uvědomili, že Bebel je skvělý pomocník a začnete ho používat ve všech svých projektech (pokud už ho dávno nepoužíváte). V případě, že byste měli jakékoliv problémy s návodem, zanechte komentář a budu se snažit co nejrychleji reagovat.