Es6 are you ready?
Transcript of Es6 are you ready?
Marco Casario Luciano Murruni
ES6 Are you ready for the next generation of JavaScript
[email protected] [email protected]
ROME 27-28 march 2015
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
Chi sono
2
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
Marco Casario
3
Marco Casario
CTO Comtaste
www.linkedin.com/in/marcocasario
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
Libri
4
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
5
http://training.codemotion.it
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
Introduzione
6
Introdotto da Netscape. Supportato da IE 3
1996
1999
Introdotto ES3.
Il Nulla !
Introdotto ES5. JS frameworks.
Finalizzato ES6.
2009
2014
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
ES6 Specs: 700 pagine !
ES6 Specs
7
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts#release_candidate_drafts
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
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
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
ES6 Goals
9
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
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
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
• Le prime features sono già supportate dai browser moderni
• Traceur by Google per compilare codice ES6 in ES5• dinamicamente (on the fly)• staticamente (via tool)
• es6-shim• Babel transpiler
Usare ES6 oggi
11
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
• Assegnazioni destrutturate
• Dichiarazione ed uso di Variabili e Scope
• Utilizzare le String Templates
Obiettivo: una sintassi alleggerita!
12
JavaScript CONQUISTERA’
IL MONDO!
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
Luciano MurruniSenior Software Developer
[email protected]@jimilucio
Chi sono?
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
Abilitare i browser alle specifiche ES6
14
Chrome e Firefox supportano le specifiche ES6.
Su Chrome dobbiamo abilitarle!
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
• Assegnazioni destrutturate
• Dichiarazione ed uso di Variabili e Scope
• Utilizzare le String Templates
Obiettivo: una sintassi alleggerita!
15
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
• Oggetti per la definizione, iterazione e manipolazione dei dati
• Come usare le Arrow Functions
• Implementare le Promises native
• Implementare Classi e Moduli
Nuove funzioni native.
16
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
Vantaggi Permette di assegnare valori con un supporto nativo alla corrispondenza di array ed oggetti.
Semplifica in modo sostanziale l'assegnazione o inizializzazione di più variabili con una singola istruzione.
Assegnazioni destrutturate
17
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
Esempio di assegnazione destrutturata con ES5
Esempio di assegnazione destrutturata con ES6
18
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
Dichiarazione di variabili e gestione dello scope!
Nuove parole chiavi per definire le variabili:
Const x = y; Consente di definire 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
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
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 definita nuovamente e valorizzata a10 in questo caso lo scope resta isolato.
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
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
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
22
L’esempio ci mostra in che modo è possibile usare i template all’interno di una stringa utilizzando la nuova sintassi ES6
risultato ottenuto
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
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, modifica, ricerca rimozione etc.
WeakMap() e WeakSet() hanno una gestione diversa della Memoria.
23
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
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
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
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()
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
26
Esempio di utilizzo dell’oggetto Set().
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
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
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
28
Definiamo un nuovo oggetto iterator
Esponiamoun metodo next()
Iteriamo il nuovo oggetto
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
Rest Parameters
• Rest non ha nulla a che vedere con i servizi web.
• Non ha un numero predefinito 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
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
30
Esempio in ES6: valori diventa un Array
Esempio in ES5: possiamo trasformare gli argomenti.
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
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 è definito e non da dove si usa
Contribuisce sempre più ad una facile manutenibilità del nostro codice
31
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
32
In ES5 dichiariamo una nuova funzione in questo modo:
ES6 semplifica questo approccio utilizzando le Arrow Function:
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
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
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
34
In ES5 dichiariamo una nuova funzione in questo modo:
ES6 semplifica questo approccio utilizzando le abbreviazioni
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
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
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
36
Il concetto di ereditarietà in ES5
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
37
Esempio di ereditarietà in ES6 con l’utilizzo delle classi
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
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 configurare come i moduli vengono caricati
38
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
39
Export ed import di moduli con ES6
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
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 • fulfilled • rejected • settled
40
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
41
L’esempio dimostra in che modo possiamo utilizzare le Promise native di ES6.
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
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
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
Altre risorse utili
Eseguire codice ES6 online: http://babeljs.io/repl/http://www.es6fiddle.net/
Plugin per convertire da ES6 ad ES5 attraverso NodeJS, oppure tramite task Grunt/Gulp http://babeljs.io/https://github.com/google/traceur-compilerhttps://github.com/babel/grunt-babelhttps://github.com/aaronfrost/grunt-traceur
43
ROME 27-28 march 2015 – Marco Casario + Luciano Murruni
Grazie!
44
Marco CasarioCTO [email protected]@marcocasario
Luciano MurruniSenior Software Developer
[email protected]@jimilucio