ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

60
ES2015 / ES6 Podstawy nowoczesnego JavaScriptu Wojciech Dzikowski @DzikowskiW

Transcript of ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

Page 1: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

Wojciech Dzikowski @DzikowskiW

Page 2: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

• 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

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

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

Ewolucja języka

Page 6: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

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

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

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

• stagnacja

Page 9: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

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

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

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

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

2016

Przeglądarka

Aplikacje desktopowe

Serwer

Aplikacje mobilne

Page 14: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

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

JavaScript

Page 16: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

JavaScript ≠ Java

świnka morska ≠ świnka

Page 17: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

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

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

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 20: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES6 - stan na dzisiaj

kangax.github.io/compat-table

Page 21: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

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

Page 22: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

Babel - użycie• Linia poleceń:

$ babel es6.js -o es5.js

• Online:

• Konfigurator: http://babeljs.io/docs/setup/

Page 23: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

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

Page 24: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES6 w praktyce - przykłady

Page 25: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES5: var

Page 26: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES5: var - hoisting

Page 27: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES6: let to nowe var

Page 28: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES5…

Page 29: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

…ES6: const

Page 30: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES5: konkatenacja

Page 31: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES5: długie łańcuchy

Page 32: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES6: Template strings, łańcuchy szablonowe

Page 33: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES6: Deklarowanie obiektów

Page 34: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES6: Klasy

Page 35: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES6: Klasy

Page 36: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES6: Settery i gettery

Page 37: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES6: Parametry domyślne

Page 38: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

Powtórka ES5: mapel

Page 39: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

Powtórka ES5: filter

Page 40: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

Powtórka ES5: reduce

Page 41: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES6: Arrow functions

Page 42: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES6: Arrow functions

Page 43: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

Arrow functions: this

Page 44: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

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

Page 45: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

ES6: for … of

• for … of może iterować nie tylko po tablicach

• Zadanie domowe: Iteratory w ES6

Page 46: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

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

Programowanie asynchroniczne, ES5

• Problem: Zagnieżdżone wywołania tworzą nieczytelny kod

Page 48: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

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

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

Promises (obietnice)Promise

• Oczekujący • Spełniony • Odrzucony

Stany:

funkcja asynchroniczna

Listener 1

Listener 2

Listener 3

Page 51: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

Promises (obietnice)

Page 52: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

Callback hell, ES5

Page 53: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

Promises (obietnice)

Page 54: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

Moduły (ES5)• IIFE (Immediately Invoked Function Expression)

• nie zaśmieca zakresu globalnego

Page 55: ES2015 / ES6 Podstawy nowoczesnego JavaScriptu

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

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

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

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

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

Pytania