Es6 are you ready?

transcript

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

Marco Casario

CTO Comtaste

www.linkedin.com/in/marcocasario

http://training.codemotion.it

Introduzione

Introdotto da Netscape. Supportato da IE 3

Introdotto ES3.

Il Nulla !

Introdotto ES5. JS frameworks.

Finalizzato ES6.

ES6 Specs: 700 pagine !

ES6 Specs

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

ES6 Goals

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

• 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

• Assegnazioni destrutturate

• Dichiarazione ed uso di Variabili e Scope

• Utilizzare le String Templates

Obiettivo: una sintassi alleggerita!

JavaScript CONQUISTERA’

IL MONDO!

Luciano MurruniSenior Software Developer

l.murruni@comtaste.com@jimilucio

Chi sono?

Abilitare i browser alle specifiche ES6

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!

• 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.

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

Esempio di assegnazione destrutturata con ES5

Esempio di assegnazione destrutturata con ES6

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.

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+

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.

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.

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()

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().

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)

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

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.

In ES5 dichiariamo una nuova funzione in questo modo:

ES6 semplifica questo approccio utilizzando le abbreviazioni

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.

Il concetto di ereditarietà in ES5

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

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

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/

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

Grazie!

Marco CasarioCTO Comtastem.casario@comtaste.com@marcocasario

Luciano MurruniSenior Software Developer

l.murruni@comtaste.com@jimilucio