Es6 are you ready?

Marco Casario
Luciano Murruni
ES6
Are you ready for the next generation
of JavaScript
m.casario@comtaste.com
l.murruni@comtaste.com
ROME 27-28 march 2015

ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
Chi sono
2

Marco Casario
3
Marco Casario
CTO Comtaste

www.linkedin.com/in/marcocasario

Libri
4

5
http://training.codemotion.it

Introduzione
6
Introdotto da Netscape.
Supportato da IE 3
1996
1999
Introdotto ES3.
Il Nulla !
Introdotto ES5.
JS frameworks.
Finalizzato ES6.
2009
2014

ES6 Specs: 700 pagine !
ES6 Specs
7
http://wiki.ecmascript.org/doku.php?
id=harmony:speciﬁcation_drafts#release_candidate_drafts

ES6 risolve molti problemi nello sviluppo di
web app complesse.
E’ stato pensato per aiutare anche:
• nello sviluppo di librerie (includendo anche il
DOM)
• come target per generatori di codice
ES6 Specs
8

ES6 Goals
9

La verità è che Javascript è stato utilizzato in
contesti per i quali non era stato pensato.
Non è una rivoluzione nella struttura del
linguaggio, ma è un’aggiunta di features
(molto utili)
ES6 Specs
10

• Le prime features sono già supportate dai
browser moderni
• Traceur by Google per compilare codice ES6
in ES5
• dinamicamente (on the ﬂy)
• staticamente (via tool)
• es6-shim
• Babel transpiler
Usare ES6 oggi
11

•Assegnazioni destrutturate
•Dichiarazione ed uso diVariabili e Scope
•Utilizzare le String Templates
Obiettivo: una sintassi alleggerita!
12
JavaScript  
CONQUISTERA’
IL MONDO!

Luciano Murruni
Senior Software Developer
@jimilucio
Chi sono?

Abilitare i browser alle speciﬁche ES6
14
Chrome e Firefox supportano le speciﬁche ES6.
Su Chrome dobbiamo abilitarle!

•Assegnazioni destrutturate
•Dichiarazione ed uso diVariabili e Scope
•Utilizzare le String Templates
Obiettivo: una sintassi alleggerita!
15

•Oggetti per la deﬁnizione, iterazione e manipolazione
dei dati 
•Come usare le Arrow Functions
•Implementare le Promises native
•Implementare Classi e Moduli
Nuove funzioni native.
16

Vantaggi
Permette di assegnare valori con un supporto nativo alla
corrispondenza di array ed oggetti.
Sempliﬁca in modo sostanziale l'assegnazione o
inizializzazione di più variabili con una singola istruzione.
Assegnazioni destrutturate
17

Esempio di assegnazione destrutturata con ES5
Esempio di assegnazione destrutturata con ES6
18

Dichiarazione di variabili
e gestione dello scope!
Nuove parole chiavi per deﬁnire le variabili:
Const x = y;
Consente di deﬁnire una nuova variabile senza il rischio di
alterare il dato contenuto sl suo interno.
Let x = y;
Consente di dichiarare una nuova variabile mantenendo lo
scope con una portata al blocco di codice corrente.
19

20
var x assume il valore di 30.
nuova variabile x valorizzata a 20
anche in ES6 lo scope all’interno della
function resta invariato.
x viene deﬁnita nuovamente e
valorizzata a10 in questo caso lo
scope resta isolato.

String Templates
String templates consente di manipolare un testo
incorporando espressioni al suo interno.
Vantaggi
•Utilizzando la sintassi ${} è possibile manipolarne il contenuto
•Non si limita ad un semplice replace!
•Supporta la scrittura su più righe
•Supportato nativamente da Chrome 41+
21

22
L’esempio ci mostra in che modo è possibile usare
i template all’interno di una stringa utilizzando
la nuova sintassi ES6
risultato ottenuto

Set() and Map()
Hanno lo scopo di rendere veloce la manipolazione di Set di elementi e
HashMap.
L’oggetto set non consente di avere valori duplicati.
L’oggetto map consente di usare come chiave anche oggetti e funzioni.
Espongono metodi per inserimento, modiﬁca, ricerca rimozione etc.
WeakMap() e WeakSet() hanno una gestione diversa della Memoria.
23

Alcuni metodi di Set()
Set.prototype.add(value)
Appende un elemento con il valore passato, restituisce il l’oggetto Set.
Set.prototype.delete(value)
Rimuove l’elemento associato al valore
Set.prototype.has(value)
Restituisce true o false se l’elemento esiste
Set.prototype.forEach(callbackFn)
Richiama la funzione di callback per ogni elemento all’interno dell’oggetto.
24

25
Set.prototype.set(key, value)
Appende un elemento con il valore passato, restituisce il l’oggetto Set.
Set.prototype.delete(key)
Rimuove l’elemento associato alla chiave
Set.prototype.get(key)
Restituisce l’elemento associato alla chiave
Set.prototype.forEach(callbackFn)
Richiama la funzione di callback per ogni elemento all’interno dell’oggetto.
Alcuni metodi di Map()

26
Esempio di utilizzo dell’oggetto Set().

Iterator and Generator
ES6 Offre un supporto avanzato alle iterazioni
For… of da un accesso diretto ai valori di oggetti, array, Set e
Map.
I generator consentono di rendere dei comuni oggetti in
oggetti iterabili.
Qualsiasi oggetto può essere iterato se espone al suo interno
un metodo next().
27

28
Deﬁniamo un nuovo
oggetto iterator
Esponiamo
un metodo next()
Iteriamo
il nuovo oggetto

Rest Parameters
•Rest non ha nulla a che vedere con i servizi web.
•Non ha un numero predeﬁnito di valori.
•Per utilizzarlo vengono messi davanti al nome della
variabile tre punti (…nomevariabile)
•Funziona solo se passato come ultimo parametro della
funzione.
•In ES5, un modo per passare più informazioni si doveva
usare un contenitore (Array/Object)
29

30
Esempio in ES6: valori diventa un Array
Esempio in ES5: possiamo trasformare gli argomenti.

Arrow Function
Ci aiuta a scrivere codice sintetico e semplice da comprendere
Si usa inserendo i caratteri arrow (=>) all’interno
dell’istruzione
Non possono essere usate come costruttori
Gestisce in modo isolato lo scope, ed il suo valore dipende da
dove è deﬁnito e non da dove si usa
Contribuisce sempre più ad una facile manutenibilità del
nostro codice
31

32
In ES5 dichiariamo una nuova funzione in questo modo:
ES6 sempliﬁca questo approccio utilizzando le Arrow Function:

Method Definition Shorthand
Abbreviazione che consente di snellire il codice.
Non ci obbliga a definire la proprietà del metodo che
vogliamo aggiungere.
Basta specificare direttamente il nome della funzione ed il suo
relativo comportamento.
33

34
In ES5 dichiariamo una nuova funzione in questo modo:
ES6 sempliﬁca questo approccio utilizzando le abbreviazioni

Class
Aiutano a mantenere organizzato un progetto con un codice
sempre pulito e semplice da comprendere.
Minore ingombro di memoria rispetto all’attuale metodo di
ereditarietà.
IDE più intelligenti in fase di scrittura ed ispezione del codice.
Supporta ereditarietà, metodo super(), costruttori e proprietà
statiche.
35

36
Il concetto di ereditarietà in ES5

37
Esempio di ereditarietà in ES6 con l’utilizzo delle classi

Modules
Simile ai più comuni framework per il caricamento di librerie
(AMD, CommonJS).
Sintassi molto compatta per import ed export
Maggiore supporto per dipendenze cicliche
Possibilità di conﬁgurare come i moduli vengono caricati
38

39
Export ed import di moduli con ES6

Promise
Ora sono native di ES6 (Chrome v.32, Firefox v.29)
Viene comunemente usato per operazioni asincrone
Consente di associare le azioni in caso di riuscita/errore
dell’azione.
Può assumere uno di questi stati:
•pending
•fulﬁlled
•rejected
•settled
40

41
L’esempio dimostra in che modo possiamo utilizzare
le Promise native di ES6.

Documentazione su ES6
Understanding ECMAScript 6
(Gratuito in formato html):
https://leanpub.com/understandinges6/read/
You Don't Know JS
(Gratuito-GIT)
https://github.com/getify/You-Dont-Know-JS
Articoli su ECMAScript 6:
http://es6rocks.com/
42

Altre risorse utili
Eseguire codice ES6 online:
http://babeljs.io/repl/
http://www.es6ﬁddle.net/
Plugin per convertire da ES6 ad ES5 attraverso NodeJS,
oppure tramite task Grunt/Gulp
http://babeljs.io/
https://github.com/google/traceur-compiler
https://github.com/babel/grunt-babel
https://github.com/aaronfrost/grunt-traceur
43

Grazie!
44
Marco Casario
CTO Comtaste
m.casario@comtaste.com
@marcocasario
Luciano Murruni
Senior Software Developer
@jimilucio

Es6 are you ready?

Recommended

Recommended

More Related Content

Similar to Es6 are you ready?

Similar to Es6 are you ready? (15)

Es6 are you ready?