es2015 / es6 podstawy nowoczesnego javascriptu
TRANSCRIPT
![Page 1: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/1.jpg)
ES2015 / ES6 Podstawy nowoczesnego JavaScriptu
Wojciech Dzikowski @DzikowskiW
![Page 2: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/2.jpg)
• od 5 lat pracuję zdalnie dla startupu Folium Partners
• tworzymy oprogramowanie dla wydawców audio/ebooków
• “Software engineer” : JavaScript, PHP (Symfony 2), Android, OS X / iOS
• kontakt: @DzikowskiW
Wojciech Dzikowski
![Page 3: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/3.jpg)
Agenda1. Ewolucja JS 2. Założenia JavaScript i ES6 3. ES6 w praktyce (wybrane zagadnienia) 4. Pytania
![Page 4: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/4.jpg)
Słowniczek• JavaScript (JS) - wysokopoziomowy, dynamiczny, nietypowany
interpretowany język wywodzący się z przeglądarek internetowych, implementacja ECMAScript
• ECMA International - stowarzyszenie, które powstało w 1961 roku, by ustandaryzować systemy informatyczne w Europie. Członkami ECMA są wpływowe firmy informatyczne i telekomunikacyjne m.in. Mozilla, Google, Yahoo, Microsoft
• ECMAScript (ES)- specyfikacja obiektowego skryptowego języka programowania, którego najbardziej znane implementacje to JavaScript, JScript i ActionScript. Specyfikacja ta oznaczona jest jako ECMA-262
• ES2015 (ES6) - najnowsza specyfikacja ECMAScript
![Page 5: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/5.jpg)
Ewolucja języka
![Page 6: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/6.jpg)
Lata 90.• 1995: W Netscape powstaje Mocha
• 1995: Mocha -> LiveScript -> JavaScript
• 1996: JavaScript trafia do ECMA
• 1997: ECMA-262 (ES1)
• 1998: ES2
• 1999: ES3 (regex, try/catch)
![Page 7: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/7.jpg)
Lata 90.• wojny przeglądarek IE vs Netscape
• DHTML i animacja wszystkiego
• walidacja formularzy
• zliczania odwiedzających (liczniki na stronach)
• kod optymalizowany pod poszczególne przeglądarki, mała kompatybilność (IE vs Netscape)
![Page 8: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/8.jpg)
2000-2004• wojny przeglądarek - zwycięstwo IE
• stagnacja
![Page 9: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/9.jpg)
2005: AJAX• Internet szerokopasmowy staje się powszechny
• wykorzystanie asynchronicznych zapytań do serwera (AJAX) staje się popularne
• renesans JavaScript
• wysyp frameworków (ułatwiających zapytania AJAX i modyfikacje DOM)
![Page 10: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/10.jpg)
2006-2009• 2008: ECMAScript4 (porzucony)
• 2009: ECMAScript 3.1 5 (strict, JSON, Reflect)
• 2009: JavaScript trafia na serwery: Node.js
![Page 11: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/11.jpg)
2010-2015• ewolucja frameworków, już nie tylko biblioteki do pracy
z DOM i AJAX
• menadżery pakietów JS: npm, bower
• rozwiązania do modularyzacji kodu (node.js, CommonJS, AMD, Browserify)
• preprocesory JavaScript (Grunt, Gulp, Webpack,…)
![Page 12: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/12.jpg)
Teraz• 2015: ECMAScript 2015 (wiele nowości)
• od 2015 roku nowa specyfikacja wychodzi co roku, dlatego też zmiana notacji
• połowa 2016: ES2016 (żadnych większych zmian)
![Page 13: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/13.jpg)
2016
Przeglądarka
Aplikacje desktopowe
Serwer
Aplikacje mobilne
![Page 14: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/14.jpg)
JavaScript - zalety• prosta składnia
• zaprojektowanie funkcji jako pełnoprawnych obiektów
• niezależny od żadnej firmy
• jedyny natywny język przeglądarek internetowych
• szybki rozwój języka i ekosystemu
• duża i aktywna społeczność
• wiele pomocnych narzędzi, bibliotek i frameworków
![Page 15: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/15.jpg)
JavaScript
![Page 16: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/16.jpg)
JavaScript ≠ Java
świnka morska ≠ świnka
≠
≠
![Page 17: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/17.jpg)
JavaScript - wady• unikalna konstrukcja i zachowania prowadzą do
nieporozumień (np. obiekty i prototypy, zamiast klas i instancji, nieznaczące zakresy blokowe, hoisting, +, typeof null === ‘object’)
![Page 18: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/18.jpg)
JavaScript - wady• brak jednoznacznych wytycznych i standardów
tworzenia czystego kodu (co framework to inna filozofia, złe podejście może mieć skutki na lata)
• bardzo szybki rozwój utrudnia tworzenie dużych aplikacji utrzymywanych długi czas, przy wyborze złych narzędzi
![Page 19: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/19.jpg)
Założenia ES6• rozwiązanie (części) problemów poprzedników • kompatybilność wsteczna (kod ES5 jest
kompatybilny z ES6) • nowoczesna składnia • lepsze wsparcie dużych aplikacji • dodana funkcjonalność do biblioteki
standardowej
![Page 21: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/21.jpg)
ES6 w przeglądarce• transpilator/kompilator ES6 => ES5
![Page 22: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/22.jpg)
Babel - użycie• Linia poleceń:
$ babel es6.js -o es5.js
• Online:
• Konfigurator: http://babeljs.io/docs/setup/
![Page 24: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/24.jpg)
ES6 w praktyce - przykłady
![Page 25: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/25.jpg)
ES5: var
![Page 26: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/26.jpg)
ES5: var - hoisting
![Page 27: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/27.jpg)
ES6: let to nowe var
![Page 28: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/28.jpg)
ES5…
![Page 29: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/29.jpg)
…ES6: const
![Page 30: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/30.jpg)
ES5: konkatenacja
![Page 31: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/31.jpg)
ES5: długie łańcuchy
![Page 32: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/32.jpg)
ES6: Template strings, łańcuchy szablonowe
![Page 33: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/33.jpg)
ES6: Deklarowanie obiektów
![Page 34: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/34.jpg)
ES6: Klasy
![Page 35: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/35.jpg)
ES6: Klasy
![Page 36: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/36.jpg)
ES6: Settery i gettery
![Page 37: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/37.jpg)
ES6: Parametry domyślne
![Page 38: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/38.jpg)
Powtórka ES5: mapel
![Page 39: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/39.jpg)
Powtórka ES5: filter
![Page 40: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/40.jpg)
Powtórka ES5: reduce
![Page 41: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/41.jpg)
ES6: Arrow functions
![Page 42: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/42.jpg)
ES6: Arrow functions
![Page 43: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/43.jpg)
Arrow functions: this
![Page 44: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/44.jpg)
ES5: for … in• dobra praktyka: unikaj tej pętli
![Page 45: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/45.jpg)
ES6: for … of
• for … of może iterować nie tylko po tablicach
• Zadanie domowe: Iteratory w ES6
![Page 46: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/46.jpg)
Programowanie asynchroniczne
• Częste w JS (np. odpytywanie serwera, animacje) • Klasyczne rozwiązanie: callback• Problem: wywołanie tylko jednej funkcji
![Page 47: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/47.jpg)
Programowanie asynchroniczne, ES5
• Problem: Zagnieżdżone wywołania tworzą nieczytelny kod
![Page 48: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/48.jpg)
Programowanie asynchroniczne, ES5
• Podejście drugie: Listeners• Problem: brak reakcji gdy funkcja asynchroniczna skończy
działanie przed rozpoczęciem obserwacji
![Page 49: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/49.jpg)
ES6: Promise (obietnica)• obiekt trzymający stan wywołania asynchronicznej funkcji (oczekujący,
spełniony, odrzucony)
• poprawia wcześniejszy problem z listenerami, wywołując funkcję callback nawet jeśli funkcja asynchroniczna zakończyła wcześniej działanie
• pozwala na zwracanie obiektów (Promise) niezależnie od tego kiedy skończy działanie funkcja asynchroniczna (lepsza czytelność kodu)
• “obiecuje”, że przekaże wynik lub błąd wywołania asynchronicznej funkcji
• korzysta z wzorca Obserwator do rozgłaszania wyniku zainteresowanym
• serializuje zagnieżdżone funkcje asynchroniczne, poprawiając czytelność kodu
![Page 50: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/50.jpg)
Promises (obietnice)Promise
• Oczekujący • Spełniony • Odrzucony
Stany:
funkcja asynchroniczna
Listener 1
Listener 2
Listener 3
![Page 51: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/51.jpg)
Promises (obietnice)
![Page 52: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/52.jpg)
Callback hell, ES5
![Page 53: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/53.jpg)
Promises (obietnice)
![Page 54: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/54.jpg)
Moduły (ES5)• IIFE (Immediately Invoked Function Expression)
• nie zaśmieca zakresu globalnego
![Page 55: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/55.jpg)
Moduły (ES6)
• wykorzystaj narzędzia typu Browserify / Webpack,
• natywne moduły w przeglądarkach w trakcie implementacji
![Page 56: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/56.jpg)
Podsumowanie• let/const
• template strings
• nowe sposoby deklarowania obiektów
• klasy
• map, filter, reduce (ES5)
• arrow functions
• for … of
• Promises
• Moduły
![Page 57: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/57.jpg)
Pozostałe zagadnienia ES6• Proxy
• Iteratory
• Generatory
• Symbol
• Map/Set, WeakMap/WeakSet
• rozszerzone standardowe API (Number, Math, Array)
![Page 58: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/58.jpg)
Podsumowanie• korzystaj z transpilatorów (Babel) aby korzystać z
ES6 w każdej przeglądarce
• ucz się zagadnień ES6 krok po kroku, nie trzeba od razu znać wszystkiego
• większość nowości to tzw. syntactic sugar, ale często bardzo przydatny, korzystaj z rozwagą
• ES6 jest teraźniejszością, warto go znać
![Page 59: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/59.jpg)
Co dalej?• Dokumentacja Babel: https://babeljs.io/docs/learn-
es2015/
• Dokumentacja Mozilla: http://developer.mozilla.org/en-US/docs/Web/JavaScript
• https://github.com/tc39/ecma262
• Pluralsight: JavaScript Fundamentals for ES6
• Kanał FunFunFunction
![Page 60: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu](https://reader033.vdocuments.pub/reader033/viewer/2022051706/58ef7d5b1a28aba81e8b4591/html5/thumbnails/60.jpg)
Pytania