Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ES6: The future of Javascript

FEVR
January 20, 2016

ES6: The future of Javascript

"ES6 o Javascript Harmony è la nuova versione di Javascript che andrà a sostituire nel prossimo futuro la versione attuale ES5.
Con questa nuova versione JS matura ulteriormente strizzando un occhio a linguaggi più consolidati come Python e Ruby.
In questo Meetup analizzeremo le principali novità introdotte da ES6 e vedremo come iniziare da subito ad utilizzarlo nei nostri progetti attraverso dei tool chiamati "transpiler" che compilano l'ultima versione di Javascript nella versione supportata dai browser attuali."
Ospiti del primo meetup di Gennaio i ragazzi di TrevisoJS

FEVR

January 20, 2016
Tweet

More Decks by FEVR

Other Decks in Technology

Transcript

  1. View Slide

  2. Treviso JS
    JavaScript e Prosecco a Treviso

    View Slide

  3. ES6: Javascript Oggi

    View Slide

  4. Speakers

    View Slide

  5. Robert Casanova

    View Slide

  6. Nicholas Ruggeri

    View Slide

  7. Cosa vedremo oggi?

    View Slide

  8. Differenze e novità di ES6
    Integrazione di ES6 nel workflow

    View Slide

  9. Cos'è ES6?

    View Slide

  10. ECMA è l'organizzazione che definisce gli standard di
    alcuni linguaggi tra cui Javascript
    Attualmente la versione supportata dai browser moderni
    è la ES5
    ES6 è il nuovo standard Javascript a partire da Giugno
    2015

    View Slide

  11. Variabili

    View Slide

  12. ES5
    Variabili definite con la parola chiave "var"
    Scope "Visibilità" della variabile relativa alla funzione in
    cui viene definita o globale se fuori da una funzione.
    Antipattern: omettere l'uso di "var"

    View Slide

  13. ES6
    Variabili definite con la parola chiave "var", "let", "const"
    "let" permette di definire "variabili di blocco"
    "const" definisce una constante
    decostructing
    parametri funzioni con valori di default

    View Slide

  14. Funzioni

    View Slide

  15. ES5
    Definire una funzione con la keywork function
    Il valore di this dipende dal contesto.

    View Slide

  16. ES6
    Definire una funzione con la keywork "function" o come
    arrow function
    Il valore di this in un arrow function è quello dell' oggetto
    corrente

    View Slide

  17. Oggetti

    View Slide

  18. ES5
    Un oggetto è definito come {chiave: valore} in cui la
    chiave è una Stringa

    View Slide

  19. ES6
    possibilità di definire un Prototype per estendere altri
    oggetti (__proto__ e super)
    sintassi migliorata per funzioni e autoassegnamenti
    nomi delle proprietà dinamici

    View Slide

  20. Classi

    View Slide

  21. ES5
    Le classi vanno definite con una Costructor Function
    Ereditarietà macchinosa.

    View Slide

  22. ES6
    Introduzione delle keyword
    "class","extends","static",...
    Programmazione OO più simile ad altri linguaggi, dettagli
    implementativi nascosti.
    Getter e Setter

    View Slide

  23. Promises

    View Slide

  24. ES5
    Esistono dei plugin per implementare le Promise in ES5
    jQuery Deferred è una implementazione molto simile alle
    Promise disponibile con jQuery.

    View Slide

  25. ES6
    return new Promise((resolve, reject) => {})

    View Slide

  26. Concatenare stringhe

    View Slide

  27. ES5
    La concatenazione utilizza l'operatore +

    View Slide

  28. ES6
    Utilizzando il carattere '`' è possibile definire una
    template string
    Una template string può essere multiline e utilizzare dei
    placeholder per le variabili invece di concatenarle con il
    '+'

    View Slide

  29. Strutture Dati

    View Slide

  30. ES5
    Array e Oggetti

    View Slide

  31. ES6
    Typed Array, Set, Map, WeakSet, WeakMap

    View Slide

  32. SUPPORTO

    View Slide

  33. "If you haven’t learned ES6 yet, the time is now."

    View Slide

  34. Vista la recente pubblicazione, non tutte le nuove
    funzionalità sono supportate dai JavaScript engine più
    diffusi ma ....
    http://kangax.github.io/compat-table/es6/

    View Slide

  35. ... non c'è da preoccuparsi!
    Questi due tool (i cosìddetti transpiler) forniscono tutto
    quello di cui abbiamo bisogno.

    View Slide

  36. View Slide

  37. Babel e Traceur sono dei compilatori JavaScript.
    Trasformano il tuo codice ES6 in ES5.

    View Slide

  38. Entrambi sono degli eccellenti compilatori.
    Ci sono solamente due differenze importanti:
    Babel converte in un codice più leggibile
    Traceur non supporta JSX

    View Slide

  39. ES6 ED I TASK MANAGER

    View Slide

  40. Le community opensource ha creato diversi plugin per i più
    famosi task manager.

    View Slide

  41. Con Gulp 3.9, ora possiamo utilizzare ES6 grazie a vari
    plugin: tra i più famosi troviamo, gulp-babel, gulp-traceur e
    gulp-regenerator (consigliato da Addy Osmani).

    View Slide

  42. View Slide

  43. Anche per chi utilizza Grunt non ci sono problemi, infatti
    sono disponibili plugin sia per Babel con grunt-babel, sia per
    Traceur con grunt-traceur

    View Slide

  44. View Slide

  45. ES6
    ED I MODULE LOADER

    View Slide

  46. Chi utilizza Webpack o Browserify può stare tranquillo ed
    inizare ad utilizzare ES6 senza problemi grazie a...

    View Slide

  47. View Slide

  48. Webpack:
    Browserify:
    https://github.com/babel/babel-loader
    https://github.com/babel/babelify

    View Slide

  49. CONCLUDENDO

    View Slide

  50. Se utilizzate task-manager, modules loader o iniziate un
    nuovo progetto...

    View Slide

  51. ... non avete più scuse per non iniziare ad usare ES6.

    View Slide

  52. "ES6 is JavaScript."

    View Slide

  53. CONTATTI

    View Slide

  54. facebook.com/trevisojs
    treviso.js.org
    @nicksruggeri
    @robb_casanova

    View Slide

  55. BRAVI TUTTI.
    GRAZIE.

    View Slide

  56. DOMANDE?

    View Slide