1.
ES2015 / ES6
Podstawy nowoczesnego JavaScriptu
Wojciech Dzikowski
@DzikowskiW

2.
• 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

3.
Agenda
1. Ewolucja JS
2. Założenia JavaScript i ES6
3. ES6 w praktyce (wybrane zagadnienia)
4. Pytania

4.
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

5.
Ewolucja języka

6.
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)

7.
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)

8.
2000-2004
• wojny przeglądarek - zwycięstwo IE
• stagnacja

9.
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)

10.
2006-2009
• 2008: ECMAScript4 (porzucony)
• 2009: ECMAScript 3.1 5 (strict, JSON, Reflect)
• 2009: JavaScript trafia na serwery: Node.js

11.
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,…)

12.
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)

13.
2016
Przeglądarka
Aplikacje
desktopowe
Serwer
Aplikacje
mobilne

14.
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

15.
JavaScript

16.
JavaScript ≠ Java
świnka morska ≠ świnka
≠
≠

17.
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’)

18.
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

19.
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

20.
ES6 - stan na dzisiaj
kangax.github.io/compat-table

21.
ES6 w przeglądarce
• transpilator/kompilator ES6 => ES5

22.
Babel - użycie
• Linia poleceń:
$ babel es6.js -o es5.js
• Online:
• Konfigurator: http://babeljs.io/docs/setup/

23.
Babel - użycie
• Konfigurator Online : http://babeljs.io/docs/setup/

24.
ES6 w praktyce - przykłady

25.
ES5: var

26.
ES5: var - hoisting

27.
ES6: let to nowe var

28.
ES5…

29.
…ES6: const

30.
ES5: konkatenacja

31.
ES5: długie łańcuchy

32.
ES6: Template strings,
łańcuchy szablonowe

33.
ES6: Deklarowanie obiektów

34.
ES6: Klasy

35.
ES6: Klasy

36.
ES6: Settery i gettery

37.
ES6: Parametry domyślne

38.
Powtórka ES5: map
el

39.
Powtórka ES5: filter

40.
Powtórka ES5: reduce

41.
ES6: Arrow functions

42.
ES6: Arrow functions

43.
Arrow functions: this

44.
ES5: for … in
• dobra praktyka: unikaj tej pętli

45.
ES6: for … of
• for … of może iterować nie tylko po tablicach
• Zadanie domowe: Iteratory w ES6

46.
Programowanie
asynchroniczne
• Częste w JS (np. odpytywanie serwera, animacje)
• Klasyczne rozwiązanie: callback
• Problem: wywołanie tylko jednej funkcji

47.
Programowanie
asynchroniczne, ES5
• Problem: Zagnieżdżone wywołania tworzą nieczytelny kod

48.
Programowanie
asynchroniczne, ES5
• Podejście drugie: Listeners
• Problem: brak reakcji gdy funkcja asynchroniczna skończy
działanie przed rozpoczęciem obserwacji

49.
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

50.
Promises (obietnice)
Promise
• Oczekujący
• Spełniony
• Odrzucony
Stany:
funkcja
asynchroniczna
Listener 1
Listener 2
Listener 3

51.
Promises (obietnice)

52.
Callback hell, ES5

53.
Promises (obietnice)

54.
Moduły (ES5)
• IIFE (Immediately Invoked Function Expression)
• nie zaśmieca zakresu globalnego

55.
Moduły (ES6)
• wykorzystaj narzędzia typu Browserify / Webpack,
• natywne moduły w przeglądarkach w trakcie
implementacji

56.
Podsumowanie
• let/const
• template strings
• nowe sposoby deklarowania obiektów
• klasy
• map, filter, reduce (ES5)
• arrow functions
• for … of
• Promises
• Moduły

57.
Pozostałe zagadnienia ES6
• Proxy
• Iteratory
• Generatory
• Symbol
• Map/Set, WeakMap/WeakSet
• rozszerzone standardowe API (Number, Math, Array)

58.
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ć

59.
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

60.
Pytania