ES2015 / ES6 Podstawy nowoczesnego JavaScriptu
-
Upload
wojciech-dzikowski -
Category
Software
-
view
628 -
download
4
Transcript of ES2015 / ES6 Podstawy nowoczesnego JavaScriptu
ES2015 / ES6 Podstawy nowoczesnego JavaScriptu
Wojciech Dzikowski @DzikowskiW
• 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
Agenda1. Ewolucja JS 2. Założenia JavaScript i ES6 3. ES6 w praktyce (wybrane zagadnienia) 4. Pytania
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
Ewolucja języka
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)
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)
2000-2004• wojny przeglądarek - zwycięstwo IE
• stagnacja
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)
2006-2009• 2008: ECMAScript4 (porzucony)
• 2009: ECMAScript 3.1 5 (strict, JSON, Reflect)
• 2009: JavaScript trafia na serwery: Node.js
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,…)
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)
2016
Przeglądarka
Aplikacje desktopowe
Serwer
Aplikacje mobilne
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
JavaScript
JavaScript ≠ Java
świnka morska ≠ świnka
≠
≠
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’)
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
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
ES6 w przeglądarce• transpilator/kompilator ES6 => ES5
Babel - użycie• Linia poleceń:
$ babel es6.js -o es5.js
• Online:
• Konfigurator: http://babeljs.io/docs/setup/
Babel - użycie• Konfigurator Online : http://babeljs.io/docs/setup/
ES6 w praktyce - przykłady
ES5: var
ES5: var - hoisting
ES6: let to nowe var
ES5…
…ES6: const
ES5: konkatenacja
ES5: długie łańcuchy
ES6: Template strings, łańcuchy szablonowe
ES6: Deklarowanie obiektów
ES6: Klasy
ES6: Klasy
ES6: Settery i gettery
ES6: Parametry domyślne
Powtórka ES5: mapel
Powtórka ES5: filter
Powtórka ES5: reduce
ES6: Arrow functions
ES6: Arrow functions
Arrow functions: this
ES5: for … in• dobra praktyka: unikaj tej pętli
ES6: for … of
• for … of może iterować nie tylko po tablicach
• Zadanie domowe: Iteratory w ES6
Programowanie asynchroniczne
• Częste w JS (np. odpytywanie serwera, animacje) • Klasyczne rozwiązanie: callback• Problem: wywołanie tylko jednej funkcji
Programowanie asynchroniczne, ES5
• Problem: Zagnieżdżone wywołania tworzą nieczytelny kod
Programowanie asynchroniczne, ES5
• Podejście drugie: Listeners• Problem: brak reakcji gdy funkcja asynchroniczna skończy
działanie przed rozpoczęciem obserwacji
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
Promises (obietnice)Promise
• Oczekujący • Spełniony • Odrzucony
Stany:
funkcja asynchroniczna
Listener 1
Listener 2
Listener 3
Promises (obietnice)
Callback hell, ES5
Promises (obietnice)
Moduły (ES5)• IIFE (Immediately Invoked Function Expression)
• nie zaśmieca zakresu globalnego
Moduły (ES6)
• wykorzystaj narzędzia typu Browserify / Webpack,
• natywne moduły w przeglądarkach w trakcie implementacji
Podsumowanie• let/const
• template strings
• nowe sposoby deklarowania obiektów
• klasy
• map, filter, reduce (ES5)
• arrow functions
• for … of
• Promises
• Moduły
Pozostałe zagadnienia ES6• Proxy
• Iteratory
• Generatory
• Symbol
• Map/Set, WeakMap/WeakSet
• rozszerzone standardowe API (Number, Math, Array)
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ć
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
Pytania