Nowy Standard JavaScript
10 godz. 43 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperNa początku dowiesz się jakie nowości pojawiły się w języku, jeśli chodzi o tworzenie zmiennych i stałych. Poznasz dwa nowe słowa let i const, a także dokładnie omówimy ich różnice, względem znanego nam do tej pory słowa var. Następnie poruszymy temat obiektów. Zobaczysz jak nowy zapis pozwoli znaczenie ułatwić nam pracę i sprawić, by kod był bardziej czytelny. W kolejnym rozdziale porozmawiamy o zmianach w funkcjach. Poznasz tzw. arrow functions wraz z poradami, kiedy z nich korzystać, a także z konsekwencjami ich użycia. Zobaczysz również, jak korzystać z domyślnych parametrów. Następną nowością będą operatory rest i spread, które znacząco uproszczą pisanie kodu dla funkcji i tablic. Chwilę później rzucimy okiem na bardzo ciekawy temat, mianowicie na tzw. destructuring. To nowa funkcja języka, która pozwala w łatwy sposób wyciągnąć odpowiednie dane z tablic i obiektów, nawet jeżeli te posiadają kilkupoziomową, zagnieżdżoną strukturę. Zmian doczekały się również ciągi znaków. Poznasz nowy zapis, tzw. template string, a także możliwość wykorzystania funkcji tagujących.
ES6 wprowadza do języka JavaScript zapis klas. I choć na początku wydaje się, że to duży krok w stronę klasycznych obiektowych języków programowania, to jak się przekonasz, jest to w dużej mierze tzw. syntactic sugar, a więc zupełnie nowy, prostszy zapis, a prawie identyczne jak wcześniej działanie, oparte na dziedziczeniu prototypowym. W kursie poruszymy również temat Symboli oraz tego jak z nimi pracować, a chwilę później poznasz iteratory. To konstrukcje ułatwiające iterację, które znacząco upraszczają pracę z kolekcjami danych. Wraz z iteratorami poznasz również generatory, które ułatwiają z kolei tworzenie tych iteratorów. Istotną nowością w ES6 są również natywne Promise. To sposób na rozwiązanie problemu asynchroniczności, który znamy od bardzo dawna w postaci różnych bibliotek. Od teraz jednak Promisy znajdują się bezpośrednio w języku. Nowymi konstrukcjami, które pozwalają pracować z kolekcjami danych, są Map i Set. Dowiesz się jak z nich korzystać, a także do czego są przydatne. W jednym z rozdziałów rzucimy też okiem na tzw. Proxy API. To mechanizm języka, który pozwala na dość niskopoziomowy dostęp do różnych operacji. I choć być może nie jest to coś, z czego będziesz korzystał nad wyraz często, to warto wiedzieć, jakie są nowe możliwości tego API.
Jedną z najlepszych nowości, która zawitała do języka JavaScript wraz z ES6 są moduły. To możliwość dzielenia kodu na wiele plików, z których można pewne wartości wyeksportować, a następnie zaimportować je w innych modułach. Tutaj dowiesz się wszystkiego, co z modułami związane. Zobaczysz wiele sposobów na eksport i import, a także jak pracować z modułami w przeglądarkach internetowych. Kurs skupia się na omówieniu wszystkich najważniejszych nowości w ES6, dzieląc je na rozdziały. Jeden z nich natomiast, poświęcony został omówieniu mniejszych zmian, które znalazły się w specyfikacji. Poznasz w nim np. nowe metody tablic czy ulepszoną współpracę z Unicode.
Specyfikacja EcmaScript 2015 wprowadziła naprawdę bardzo wiele zmian, ale jej twórcy założyli, że od tego czasu każda kolejna wersja specyfikacji będzie pojawiać się co roku. Oznacza to przede wszystkim, że nie będziemy na raz bombardowani aż tak wieloma zmianami, jak w 2015 roku. W tym kursie nie zabrakło zatem omówienia nowości ze specyfikacji ES2016 oraz 2017, gdzie poznasz np. nowe metody dla stringów czy funkcje asynchroniczne.
Kiedy będziesz już uzbrojony w solidną wiedzę z zakresu nowości w ES6, dowiesz się jak w praktyce pracuje się dzisiaj z tym standardem. W jednym z rozdziałów omówimy nowoczesny workflow z użyciem npm i wykorzystamy popularne narzędzie webpack, do pracy z modułami, a także do transpilowania kodu ES6 do wersji ES5. Dzięki temu nowoczesny kod, który napiszemy, będzie mógł być uruchamiany również w starszych przeglądarkach, które nie wspierają najnowszego standardu. Dowiesz się na co zwrócić uwagę, by wszystko działało bez zarzutu.
Zwieńczeniem tego kursu będzie praktyczny projekt, w którym od podstaw wykonamy swoją własną bibliotekę do pracy z Obiektowym Modelem Dokumentu. Będzie ona w działaniu nieco podobna do znanej chyba wszystkim biblioteki jQuery. Na tym przykładzie postaramy się wykorzystać jak najwięcej wiedzy z zakresu ES6 zdobytej wcześniej. Stworzymy metody do pracy z drzewem dokumentu, a więc do wyszukiwania elementów, do tworzenia nowych, do przypisywania im klas, atrybutów czy styli CSS. Nie zabraknie również modułu odpowiedzialnego za współpracę z Ajax. Cały kod utworzymy oczywiście w sposób modułowy, aby bibliotekę można było łatwo rozwijać w przyszłości. Na koniec projekt ten przetranspilujemy do kodu ES5 z użyciem Babel i przetestujemy w starszej przeglądarce Internet Explorer 11, aby upewnić się, że nasza biblioteka działa poprawnie.
Kurs ten jest dla wszystkich osób, które znają już język JavaScript i czują się w pracy z nim swobodnie. Jeśli zatem chciałbyś pracować z nowoczesnym kodem JavaScript, to ten kurs jest zdecydowanie dla Ciebie. A może masz zamiar poznać framework Angular lub bibliotekę React? Tam również wykorzystywany jest najnowszy zapis ES6, więc wiedza ta będzie naprawdę pomocna. Z solidną wiedzą z zakresu EcmaScript 6, bez trudu pozostaniesz na bieżąco z każdą kolejną edycją tej specyfikacji.
jedną z najlepszych rzeczy w specyfikacji ecmascript 2017 są
tak zwane funkcje asynchroniczne i teraz pokażę ci jak one działają ale mając
już wiedzę z zakresu promise i generatorów którą wierzę że masz po tym kursie będziesz
mógł bardzo łatwo przejść na wykorzystanie funkcji asynchronicznych pamiętasz
nasz przykład być może z generatorem jeżeli nie to spokojnie do tego wróć mieliśmy
funkcje get json która zwracała nam promisy dodatkowo napisaliśmy
sobie swoją własną funkcje run która pozwalała wykonywać funkcje
generatora i po kliknięciu w przycisk robiliśmy tak że mogliśmy sobie
napisać naszą funkcję która wyglądała jakby była synchroniczna
czyli mogliśmy powiedzieć let json pobierz nam jakiś json i przejdź
do kolejnego yield do kolejnej linijki dopiero wtedy kiedy tutaj będziemy
mieli jakieś dane tutaj pobieraliśmy kolejne dane i mogliśmy je na stronie wyświetlić
w razie czego wróć sobie do lekcji która jest zatytułowana współpraca
z generatorami jest w rozdziale o promise niemniej jednak nic
tutaj nie zmieniałem i zobaczmy jak to działało mogłem kliknąć pobierz dane i te dane były
pobierane i tutaj gdzieś na środku były rozdzielane właśnie takim
ciągiem więc widzimy że udało nam się pobrać zarówno jedne jak i drugie dane i
teraz jeżeli byśmy chcieli skorzystać z funkcji asynchronicznej dostępnej w ecmascript
2017 będzie to bardzo proste otóż nie musimy mieć zupełnie
już naszej funkcji run która pozwalała nam przechodzić przez cały taki generator
możemy ją usunąć i również będziemy mogli całą
tą funkcję którą mamy tutaj wyciąć wstawimy ją tutaj nie
będzie już z gwiazdką to nie będzie generator nazwiemy
ją sobie get data i na początku
napiszemy async czyli jest po nowe słowo kluczowe która pozwala nam tworzyć funkcje
asynchroniczne jeżeli tutaj dodamy async to będzie funkcja asynchroniczna
i teraz zobaczmy co musimy tutaj zmienić w niej nie będziemy
korzystać z yield ale ze słowa await czyli właśnie poczekaj i nic więcej
nie zmienimy czyli ważne jest to że przed każdą promise tutaj
jest ważne żeby to współpracował z promisami będziemy pisali await i też
będzie to działać podobnie jak generator tak jakby tutaj się zatrzymujemy w tej linijce następnie
mówimy await czyli poczekaj znowu na promise aż to się na
wykona i jeżeli wam się to wykona to dopiero przejdziemy dalej i teraz
to co jest ciekawe to wystarczy w tym miejscu wykonać
metodę get data po kliknięciu na przycisk i przekazać jej
ten cały ciąg powinno nam to zadziałać mimo tego że mój edytor tutaj pokazuje że są
jakieś błędy kliknijmy pobierz dane i zobaczmy zobacz że dane się pobrały i
też będą poprawnie działać bo tutaj gdzieś na środku będą rozdzielone tym
oto stringiem czyli w ten sposób mogliśmy sobie naszą funkcje generatora korzystającą
z yield i z promise zamienić w taki sposób że jest to funkcja
asynchroniczna i jak widzisz pięknie nam ona działa możemy pisać kod
sposób synchroniczny na koniec tutaj wkleję ci tylko jeszcze jakby
kilka możliwości stworzenia takiej funkcji i na spokojnie sobie na to zerknij
czyli możesz utworzyć funkcję tak jak ja zrobiłem pisząc async function
i nazwa tutaj to fn to będzie nazwa możesz utworzyć stałą i
wyrażenie funkcyjne pisząc async tutaj przed samą funkcją możesz ją dodać
w jakimś obiekcie pisząc async i skrócona nazwa metody na przykład
albo możesz dodać ją też jako funkcję strzałkową czyli tworzymy
stałą jakąś o nazwie fn i piszemy async a tutaj funkcja strzałkowa wszystko
to będą poprawne zapisy funkcji asynchronicznych