:sparkles: PWA :sparkles:
Logo

Piotr Kowalski

Organizator WarsawJS , Trener, YouTuber

ECMAScript 6. Dlaczego warto spróbować już dziś?

Kiedy powstało narzędzie 6to5 które miało być translatorem nowej składni JavaScript nie rzuciłem się na niego, ze względu na to, że potrzebowałem dowodu, że działa w 100%.

Temat odszedł trochę w zapomnienie. Dałem sobie spokój z poznawaniem nowej składni - skoro jeszcze nie została ona zatwierdzona żadną pieczęcią.

Nie chciałem uczyć się czegoś nowego co jest tylko draftem. Cenię sobie stabilne rozwiązania.
Kilka tygodni temu temat wrócił ze zdwojoną siłą... dlaczego?

Powrót z dalekiej podróży...

... bo 6to5 zmienił nazwę na Babel.js.

Dało mi to nadzieję, że może coś się zmieniło w kwestii stabilności transpilera. Wgłębiłem się w temat i okazało się, że Babel.js wspiera w 75% wg kangax standard który jest zapisany w dokumencie, który ma być zatwierdzony "na dniach".

Wydaje mi się to na tyle sensowną liczbą, że warto już dziś zacząć pisać z użyciem nowej składni. Chociażby z tego powodu, aby się do niej przyzwyczaić - aby brwi się nie marszczyły kiedy spojrzy się np. na klasy w pliku *.js.

Tak przedstawia się lista wsparcia feature–ów z ES6 przez Babel.js:

Jak widać na powyższym obrazku lista nowych rzeczy jest wielka. Nowa składnia pozwala nam na uniknięcie wielu haków, chociażby znany wszystkich niby-obiekt, niby-tablica arguments, w którym znajduje się lista argumentów przekazanych do funkcji. Jednak to nie jest zwykła tablica, bo nie można na niej uruchomić metod z konstruktora Array. Takie zadanie jest możliwe po zastosowaniu rzutowania:

function foo() {
    var args = Array.prototype.slice.call(arguments);
    var operation = args.slice(0, 1);
    var things = args.slice(1);
    console.log(operation, things);
    // ...
}

Czy faktycznie taka linijka musi być w każdym miejscu kiedy chcemy operować na tablicy argumentów?

ECMAScript 6 ma w swoich zbiorze ulepszeń rest parameters. Dzięki temu kod może wyglądać tak:

function foo(...args) {
    var operation = args.slice(0, 1);
    var things = args.slice(1);
    console.log(operation, things);
    // ...
}

Prawda, że ładniej? :smiley:

Skąd czerpać wiedzę?

Pewnego czasu kupiłem kilka domen, które kierują na jedną: (ecmascript6.pl) https://piecioshka.pl/es2015/.
Gdzie stworzyłem agregat linków do wartościowych artykułów, tutoriali nt. ES6. Zachęcam do częstego odwiedzania. Codziennie powstają nowe artykuły, tutoriale i prezentacje z konferencji.

Chyba najbardziej zaangażowanym developerem jest Dr. Axel Rauschmayer. Na swoim blogu (www.2ality.com) stworzył już kilka bardzo dobrze opisanych artykułów dotyczących ECMAScript 6 (więcej w pkt 6. na stronie (ecmascript6.pl) https://piecioshka.pl/es2015/.

Ci z Was którzy lubią dużo czytać, na pewno zostaną pochłonięci przez książkę napisaną przez Nicholasa C. Zakasa pt. Understanding ECMAScript 6. Jest ona dostępna pod adresem: https://leanpub.com/understandinges6/read/. Jestem tym szczęśliwcem, który posiada wersję papierkową.

Dlaczego więc warto?

Komitet Ecma TC39 rozwija przed nami dywan.
Dywan po którym Ty i ja wkrótce będziemy stąpali.
Na dziś dzień jeszcze ten dywan nie został rozwinięty do końca,
dlatego gdy chcesz poczuć jak to jest po nim chodzić
musisz wykorzystać linoleum, które jest tylko skromnym zamiennikiem.

Linoleum w tej historii jest transpiler np. Babel.js bądź Traceur.
Dywanem jest ECMAScript 6 Piotr Kowalski. 2015-06-10

Tagi: javascript

3 dni wcześniej napisałem: Narzędzia usprawniające prace z Git 1 tydzień i 5 dni później napisałem: WarsawJS Meetup #10

Możesz osadzić kod wykorzystując: <pre><code class="{language}"></code></pre>