Download as PDF, PPTX
Uploaded byWojciech Dzikowski
ES2015 / ES6 Podstawy nowoczesnego JavaScriptu
(slides in Polish) My JavaScript presentation for Toruń's MeetIT meetup (2016-02-19).
ES2015 / ES6 Podstawy nowoczesnego JavaScriptu
- 1. ES2015 / ES6 Podstawynowoczesnego JavaScriptu Wojciech Dzikowski @DzikowskiW
- 2. • od 5lat 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.
- 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. • wojnyprzeglą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 • Internetszerokopasmowy 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: ECMAScript2015 (wiele nowości) • od 2015 roku nowa specyfikacja wychodzi co roku, dlatego też zmiana notacji • połowa 2016: ES2016 (żadnych większych zmian)
- 13.
- 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.
- 16. JavaScript ≠ Java świnkamorska ≠ ś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 - stanna 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.
- 26. ES5: var -hoisting
- 27. ES6: let tonowe var
- 28.
- 29.
- 30.
- 31.
- 32. ES6: Template strings, łańcuchyszablonowe
- 33.
- 34.
- 35.
- 36. ES6: Settery igettery
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 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 wJS (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ściedrugie: 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.
- 52.
- 53.
- 54. Moduły (ES5) • IIFE(Immediately Invoked Function Expression) • nie zaśmieca zakresu globalnego
- 55. Moduły (ES6) • wykorzystajnarzędzia typu Browserify / Webpack, • natywne moduły w przeglądarkach w trakcie implementacji
- 56. Podsumowanie • let/const • templatestrings • 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 ztranspilatoró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? • DokumentacjaBabel: 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.