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

mailto:[email protected]

mailto:[email protected]

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

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:specification_drafts#release_candidate_drafts

http://wiki.ecmascript.org/doku.php?id=harmony:specification_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 fly)• staticamente (via tool)

• es6-shim• Babel transpiler

Usare ES6 oggi

11


• Assegnazioni destrutturate

• Dichiarazione ed uso di Variabili e Scope

• Utilizzare le String Templates

Obiettivo: una sintassi alleggerita!

12

JavaScript CONQUISTERA’

IL MONDO!


Luciano MurruniSenior Software Developer

[email protected]@jimilucio

Chi sono?


Abilitare i browser alle specifiche ES6

14

Chrome e Firefox supportano le specifiche ES6.

Su Chrome dobbiamo abilitarle!


• Assegnazioni destrutturate

• Dichiarazione ed uso di Variabili e Scope

• Utilizzare le String Templates

Obiettivo: una sintassi alleggerita!

15


• 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


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


Esempio di assegnazione destrutturata con ES5

Esempio di assegnazione destrutturata con ES6

18


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


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.


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, modifica, 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

Definiamo un nuovo oggetto iterator

Esponiamoun metodo next()

Iteriamo il nuovo oggetto


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


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 è definito 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 semplifica 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 semplifica 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 configurare 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 • fulfilled • 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

https://leanpub.com/understandinges6/read/

https://github.com/getify/You-Dont-Know-JS

http://es6rocks.com/


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

http://babeljs.io/repl/

http://www.es6fiddle.net/

http://babeljs.io/

https://github.com/google/traceur-compiler

https://github.com/babel/grunt-babel

https://github.com/aaronfrost/grunt-traceur


Grazie!

44

Marco CasarioCTO [email protected]@marcocasario

Luciano MurruniSenior Software Developer

[email protected]@jimilucio

es6 are you ready?

Software

codice es6

es6 specs7http

via tool es6

uso di variabili

gestione dello scope

sintassi alleggerita

string templatesobiettivo

javascript conquisterail