ES6: The future of Javascript

210a2116d2266c84d155f1d8a14f31ef?s=47 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

210a2116d2266c84d155f1d8a14f31ef?s=128

FEVR

January 20, 2016
Tweet

Transcript

  1. None
  2. Treviso JS JavaScript e Prosecco a Treviso

  3. ES6: Javascript Oggi

  4. Speakers

  5. Robert Casanova

  6. Nicholas Ruggeri

  7. Cosa vedremo oggi?

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

  9. Cos'è ES6?

  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
  11. Variabili

  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"
  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
  14. Funzioni

  15. ES5 Definire una funzione con la keywork function Il valore

    di this dipende dal contesto.
  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
  17. Oggetti

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

    la chiave è una Stringa
  19. ES6 possibilità di definire un Prototype per estendere altri oggetti

    (__proto__ e super) sintassi migliorata per funzioni e autoassegnamenti nomi delle proprietà dinamici
  20. Classi

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

    macchinosa.
  22. ES6 Introduzione delle keyword "class","extends","static",... Programmazione OO più simile ad

    altri linguaggi, dettagli implementativi nascosti. Getter e Setter
  23. Promises

  24. ES5 Esistono dei plugin per implementare le Promise in ES5

    jQuery Deferred è una implementazione molto simile alle Promise disponibile con jQuery.
  25. ES6 return new Promise((resolve, reject) => {})

  26. Concatenare stringhe

  27. ES5 La concatenazione utilizza l'operatore +

  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 '+'
  29. Strutture Dati

  30. ES5 Array e Oggetti

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

  32. SUPPORTO

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

  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/
  35. ... non c'è da preoccuparsi! Questi due tool (i cosìddetti

    transpiler) forniscono tutto quello di cui abbiamo bisogno.
  36. None
  37. Babel e Traceur sono dei compilatori JavaScript. Trasformano il tuo

    codice ES6 in ES5.
  38. Entrambi sono degli eccellenti compilatori. Ci sono solamente due differenze

    importanti: Babel converte in un codice più leggibile Traceur non supporta JSX
  39. ES6 ED I TASK MANAGER

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

    famosi task manager.
  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).
  42. None
  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
  44. None
  45. ES6 ED I MODULE LOADER

  46. Chi utilizza Webpack o Browserify può stare tranquillo ed inizare

    ad utilizzare ES6 senza problemi grazie a...
  47. None
  48. Webpack: Browserify: https://github.com/babel/babel-loader https://github.com/babel/babelify

  49. CONCLUDENDO

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

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

    ES6.
  52. "ES6 is JavaScript."

  53. CONTATTI

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

  55. BRAVI TUTTI. GRAZIE.

  56. DOMANDE?