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

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.
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).
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
45. ES6 ED I MODULE LOADER
46. Chi utilizza Webpack o Browserify può stare tranquillo ed inizare ad utilizzare ES6 senza problemi grazie a...
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?