(slides in Polish) My JavaScript presentation for Toruń's MeetIT meetup (2016-02-19).

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