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

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