Video https://www.youtube.com/watch?v=j5prAoFZWiI Nel talk parleremo di Vue3! Un'overview a 360 gradi sulla nuova e più recente versione del noto framework. Partiremo dai cambiamenti, analizzeremo le differenze, tra la versione che conosciamo e quella nuova, e guardando con attenzione le nuove funzionalità che il framework ci mette a disposizione.

2. 🙏

3. Andrea Campaci
Chi sono?
IT Technical Architect
//andreacampaci.it
info@andreacampaci.it

4. andreacampaci/meetup-presentation-vue3
Repository Github

5. Cos’è VueJs?
The Progressive JavaScript Framework

6. I punti di forza
Framework Javascript di dimensioni ridotte
Curva di apprendimento molto bassa
Approccio Component Base come React
Flessibile
Typescript o JS
CSS o SCSS o LESS
Reattivo
HTML o Render functions o JSX
Cos’è VueJs?

7. Crescita di interesse 🚀
Cos’è VueJs?
https://www.gurutechnolabs.com/top-front-end-frameworks/

8. Crescita sull’utilizzo 📈
Cos’è VueJs?
https://2019.stateofjs.com/front-end-frameworks/

9. Changes

10. Core
Changes
https://increment.com/frontend/making-vue-3
“Vue 3 è più veloce, più piccolo, più mantenibile ed e
maggiormente integrato allo standard nativo.”
Evan You

11. Miglioramenti
Changes
• Il Virtual DOM è stato riscritto per migliorare le performance;
• Supporto a Typescript;
• Più flessibilità nella creazione dell’app e delle configurazioni che
erano globali in Vue2;
• Riduzione del pacchetto;

12. Perché riscriverlo?
Changes
• Riduzione del debito tecnico;
• Facilitare i contributor;
• Le funzioni di render di Vue3 impiegano meno di 1/10 del CPU
time rispetto alla versione 2;

13. Bundle size
Changes
Vue2 Vue3

14. Cosa cambia?
Changes
Creazione dell’app Vue L’applicazione si crea con la factory createApp()
La proprietà data Obbligatorio l’uso della prop data come metodo
Registrazione
Componenti e plugin vengono registrati sotto
l’istanza tornata dal metodo createApp()
Life cycle hooks
Rinominare beforeDestroy() e destroyed() in
beforeUnmount() e unmounted()
Transizioni Rinominato la prop da v-enter a v-enter-from
Registrazione Vuex Registrazione mediante factory createStore()
Registrazione Rounter Registrazione mediante factory createRouter()

15. New features
Teleport component Appende un’elemento sotto un altro pezzo di DOM
Fragment Root template con più elementi fratelli
Composition Api Modalità opzionale per sostituire le option props
Changes

16. Composition Api

17. Cosa serve?
Composition Api
Come i React hooks, la Composition API permette di comporre la
propria logica utilizzando le helper API esportate in un modulo ad
hoc.
Permette di utilizzare nel componete solo le funzionalità di cui
abbiamo bisogno facendo si che il codice sia più ottimizzato.
Inoltre, su grandi componenti facilita la lettura rispetto all’approccio
Mixin(che resta valido) e di conseguenza il riutilizzo di codice.
https://composition-api.vuejs.org/#summary

18. Vantaggi
Composition Api
• Riutilizzo del codice;
• Organizzazione del codice;
• Approccio funzionale;

19. Svantaggi
Composition Api
• É richiesta la conoscenza degli operatori;
• Ref e reactive possono essere facilmente confusi;
• Avere tutto in un unica funzione setup() potrebbe far storcere il
naso;

20. Component
Composition Api
data() methods computed watch
Setup()

21. Setup()
Composition Api

22. Life cycle hooks
Composition Api
beforeCreate setup()
created setup()
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted
errorCaptured onErrorCaptured

23. TS

24. Supporto “nativo”
Typescript
• Per utilizzare i types per la creazione di componenti si consiglia
di usare defineComponent;
• vue-class-component (beta)
• vue-property-decorator (in attesa di vue-class-component)
Classi/Decorators

25. Migrazione
https://v3.vuejs.org/guide/migration/introduction.html
Ultima versione: v3.0.5

26. CDN
Migrazione

27. Consigli
Migrazione
https://v3.vuejs.org/guide/migration/introduction.html
Sezione: supporting-libraries
https://github.com/vuejs/awesome-vue/issues/3544

28. 💾 code time

29. 🤔 dubbi?

30. Thank &

31. '