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.
wszystko wskazuje na to że przebrnąłeś przez cały kurs es6 mam
nadzieję że bardzo wielu nowych rzeczy się dowiedziałeś i że materiał który dla ciebie przygotowałem był
dla ciebie ciekawy jeżeli dobrze zrozumiałeś wszystko co chciałem
ci przekazać to teraz będzie ci dużo łatwiej być na bieżąco bo jak sam
się przekonałeś już tym kursie każda kolejna nowa specyfikacja czyli te po
2015 roku nie zawierają już tak wielu przełomowych zmian a więc
naprawdę mają solidne podstawy z es6 łatwo jest być na bieżąco
i łatwo jest uczyć się nowych rzeczy które będą teraz co roku się pojawiać
na koniec chciałbym jednak krótko podsumować i przedstawić ci rzeczy
które według mnie są najważniejsze w es6 i z których najczęściej się korzysta
dlatego że starałem ci się pokazać niemal wszystko co jest związane z nowym standardem ale
nie każda z tych rzeczy jest taką konstrukcja którą często się wykorzystuje
w swojej codziennej normalnej pracy z kodem es6 które zatem
rzeczy według mnie są najważniejsze i najbardziej przydatne na pewno są to nowe
słowa let i const do tworzenia zmiennych następnie tutaj wymieniłbym
skrócony zapis w obiektach i wyliczone właściwości które widziałeś a więc możemy
teraz na przykład zwrócić obiekt w którym nie musimy powtarzać nazwy właściwości
i na przykład nazwy zmiennej która ma wartość do przypisania do tej właściwości
czy na przykład możemy dynamicznie prosto w obiekcie tworzyć nowe właściwości
i metody także zobaczyłeś skrócony zapis metod gdzie nie musimy używać już
słowa function kiedy tworzymy je w literale obiektu kolejną nowością
wartą korzystania jest funkcja strzałkowa czyli tak
zwany arrow function widziałeś że one znacznie mogą uprościć nasz kod ale wiążą
się z nimi również pewne konsekwencje które czasami działają na naszą korzyść jedną
z najczęściej używanych przeze mnie rzeczy są też operatory rest i spread więc
myślę że jest to rzecz warta uwagi i warta korzystania następnie
oczywiście dekompozycja obiektów i tablic czy na przykład świetny zapis
dla stringów gdzie możemy tworzyć template stringi i także czasami chociaż
to jest rzadziej stosowane wykorzystywać funkcje tagujące kolejną ciekawą
rzeczą z której się często się korzysta są klasy więc również zobaczyłeś jak można je wykorzystywać
i jak one znacznie upraszczają nam to co mogliśmy wcześniej już zrobić es5
ale teraz wygląda to dużo lepiej i naprawdę łatwo zrozumieć pamiętaj
jednak że klasy cały czas operują na prototypach kolejną rzeczą którą
często się wykorzystuje są iteratory i związane z nimi na przykład pętla
for of czy na przykład operator spread który też pracuję pamiętaj na wewnętrznych
iteratorach danego obiektu z iteratora mi wiążą się też generatory
które poznałeś w tym kursie więc łatwo możemy stworzyć iterator wykorzystując funkcja
generującą niezwykle przydatną rzeczą są też promise które
można wykorzystać zarówno w pracy z kodem w przeglądarce internetowej jak
i na przykład środowisku node js czyli zawsze tam gdzie mamy jakieś asynchroniczne
operacje kolejnymi nowościami dla których powinniśmy znaleźć zastosowanie w swoim
kodzie są map i set a także weak map i weak set warto
z nich korzystać szczególnie wtedy kiedy wiemy jakie są konsekwencje ich używania
na przykład w przypadku wersji weak pamiętasz że obiekty są usuwane kiedy
stracimy do nich referencje i dzięki temu możemy lepiej zarządzać pamięcią w naszej
aplikacji i oczywiście kapitalną rzeczą bez której nie wyobrażam
sobie pracy es6 są moduły więc tym kursie również poznałeś od
podstaw aż po najbardziej zaawansowane użycie tych modułów w jaki sposób
można z nich korzystać dodatkowo możesz się posilić takimi
narzędziami jak na przykład webpack aby pracować z nowoczesnym kodem a następnie ten
kod bundlować i wykonywać go w środowiskach które nie wspierają modułów
nie ma zatem powodu aby z modułów nie korzystać a jest to coś co jak
się przekonałeś znacznie upraszcza nam pracę mając już solidną
wiedzę z zakresu es6 mógłbyś zapytać co dalej ta wiedza przyda ci
się jeżeli będziesz chciał się uczyć nowoczesnych frameworków które korzystają z es6
dzisiaj niemal każdy nowy framework korzystał właśnie z tego standardu więc
trudno jest się uczyć tych frameworków kiedy nie ma się solidnych podstaw zakresu es6
na chwilę obecną kiedy ja te słowa wypowiadam najpopularniejszymi
nowymi frameworkami czy bibliotekami są react a także angular
dlatego jeżeli chciałbyś się ich nauczyć to polecam ci na eduweb pl kursy
które mamy przygotowane z tych zakresów no i właśnie w nich również wykorzystujemy
nowy standard es6 a więc jeżeli masz solidne podstawy śmiało
możesz przystąpić do nauki tych technologii oczywiście wcale nie
musisz korzystać z nowoczesnych frameworków możesz pisać swój kod całkowicie
od podstaw dlatego że jak zobaczyłaś es6 znacznie ten proces upraszcza
i przy odrobinie przemyślenia swojego projektu można naprawdę
podzielić bo na ciekawe moduły i w wielu przypadkach nie wykorzystywać frameworków natomiast
kiedy już nasz projekt zrobi się bardziej zaawansowany te frameworki na
pewno będą zbawienne i oczywiście jak zawsze warto wybierać odpowiednie narzędzie
do odpowiedniego zadania z mojej strony zatem to już wszystko
w tym kursie bardzo serdecznie dziękuję ci za uwagę i poświęcony czas mam
nadzieję raz jeszcze że wiele z tego kursu wyniosłeś jeżeli nie to koniec wracaj do
tych lekcji gdzie masz jakieś wątpliwości i eksperymentuj z tym kodem polecam
ci również abyś spróbował rozwinąć nasz finalny projekt czyli bibliotekę dom
ja zatem mam nadzieję że usłyszymy się jeszcze przy okazji na eduweb pl
a mówił do ciebie piotr palarz