Negli ultimi 12 mesi ho avuto occasione di partecipare a numerose, se non tutte, le conferenze su Vue che si sono tenute un po’ in tutto il mondo, Amsterdam, Toronto, ecc.. complice anche il fatto che, piaccia o no, sono state trasmesse in diretta online per il motivo che ben sappiamo.
Non fa eccezione il vueday, quest’anno alla sua terza edizione e seconda online (precedentemente in Verona), tenutosi 29 aprile: la nostra personale giornata Vue italiana organizzata dal GrUSP sempre più impegnato in eventi tech. Avevo sentito parlare molto bene della prima edizione ancora dal vivo, pensate un po’, a Barcellona, ad un’altra conferenza Vue (siamo un meravigliosa community :P).
Di Vue si è già detto un po’ di tutto e lo stato dell’arte ad oggi è che siamo tutti in trepidante attesa di poter usare in produzione senza rischi la nuova versione 3 di cui tanto si è discusso appunto in ogni conferenza, ma quello che ho apprezzato molto di questa terza edizione è stata, fatto salvo per alcuni talk più introduttivi, la freschezza dei contenuti e l’impegno nel proporre qualcosa che non fosse già stato detto e ridetto.
Ho ovviamente un mio talk preferito, ma andiamo con ordine.
Dopo l’immancabile introduzione del GrUSP questa volta condotta da Michela Bertaina, quest’anno il cosiddetto Master of Cerimonies, è stato Tim Benniks, un volto particolarmente noto per chi fa parte del mondo Vue, il quale ha saputo anche riempire i “cambi palco” con piccole interviste ad ogni speaker su domande tecniche sia da parte dei partecipanti che da parte della sua personale curiosità 😛
Si entra perciò nel vivo della conferenza e a rompere il ghiaccio è Anthony Fu, core team member di Vue e Vite che, con il suo talk intitolato Composable Vue 3, ci lascia consigli e pattern su come scrivere le Composition API, pro e contro di questa nuova funzionalità presente in Vue3.
Le composition API, per chi non lo sapesse, arrivano per risolvere un problema annoso riguardante i mixin di Vue, ovvero estrazioni di porzioni di codice e logica che è necessario usare in più componenti, ma che sfortunatamente hanno parecchi cavilli. In questo articolo è spiegato molto bene cosa non va nei mixin e come le Composition API risolvono il problema.
Talk, quello di Anthony, che gli dà anche modo di presentare una libreria open source, come la totalità dei progetti nei quali è coinvolto, ideata da lui e molto utile, VueUse, che raccoglie utilities di Vue Composition essenziali da utilizzare sia con Vue2 che Vue3.
È poi la volta di Alexander Lichter che con Nuxt.js and the Composition API invece ci parla, anzi ci invita ad usare, le composition api in Nuxt già dalla versione attuale (2.x.x) tramite il plugin @nuxtjs/composition-api (che estende il plugin @vue/composition-api utilizzabile invece su applicazione Vue pure) se non vogliamo rinunciare ad usare un po’ di Vue3 nei nostri progetti. Utilizzando questo plugin, invece, avremo già un progetto predisposto al loro utilizzo e la migrazione al futuro Nuxt 3, annunciata per la fine (?) di quest’anno, sarà più facile (non 100% indolore, ma comunque più facile).
Dopo Alexander, Jessica Sachs con Testing with Vite and the Cypress Component Test Runner ci convince (oh, a me m’ha proprio convinta) che eseguire gli unit test nel browser è molto più semplice e comprensibile che eseguirli nel terminale. Jessica lavora in Cypress e ci ha proposto un test runner da utilizzare per testare i componenti in Vue. Questo è stato il mio secondo talk preferito perché dopo il suo intervento mi è venuta propria voglia di provare a testare con Cypress (purtroppo, come accade per molti, nel mio lavoro quotidiano i test sono un’attività che non mi capita quasi mai di fare, ma che mi rendo conto possa rivelarsi molto utile).
Il mio talk preferito invece è stato quello di Samuel Snopko, Head of Developer Relationship in Storyblok, un CMS headless di cui avevo già sentito parlare e avevo anche tentato di provare, ma che ora, specialmente dopo il suo talk, voglio assolutamente fare sul serio. Nel suo talk, A sneak peek into the future headless eCommerce, il più lungo peraltro perché aveva veramente un sacco di cose da dire, ha presentato varie implementazioni che si possono fare con Storyblok, poche slide, ma tanta demo che ho personalmente apprezzato. Lo stack che ha presentato si compone di Nuxt, VueStorefront, Storyblok e Commercetools. Ha cominciato quindi con l’installare in locale VueStorefront Next che è costruito sopra a Nuxt e lo ha collegato al progetto in cloud del suo account Storyblok, dal quale poteva quindi a quel punto vedere un’anteprima del suo locale. La UI del nuovo VSF è basata su Storefront UI che è una libreria a componenti costruita con il principio dell’atomic design che perfettamente si adatta alla gestione dei contenuti in Storyblok, anch’essa divisibile in componenti. Ha pertanto mostrato come sia facile dare un CMS visuale ai content editor che possono quindi spostare in pagina e configurare come vogliono ogni singolo componente direttamente dall’editor di Storyblok e come, allo stesso tempo, lo sviluppo dei componenti da parte degli sviluppatori sia, oltre che divertente, anche rassicurato dal fatto che, pur dando molta flessibilità, il codice resta al sicuro nella codebase del progetto. In aggiunta ha collegato anche CommerceTools, nel quale aveva già creato quattro prodotti, integrandolo attraverso l’utilizzo del plugin di VueStorefront per CommerceTools, che poi ha montato come componente nella home page direttamente dall’editor di Storyblok. Difficile descrivere in poche righe tutti i passaggi, consiglio per chi può di rivedersi il video.
A seguire A Better Design-Dev Handoff Experience: Code-based Design System, il talk di (James) Heda Weng che ha parlato delle difficoltà che ci sono spesso fra designer e developer nell’elaborazione stilistica di un layout, di come il design system sia uno strumento molto utile per i designer affinché si lavori sempre su un design aderente e consistente (necessità ulteriormente accentuata su grandi progetti) e di come framework come Vuejs, che è basato sui componenti, perfettamente si adatti a portare il design system anche direttamente nello sviluppo.
È poi la volta del Master of Cerimonies, Tim Benniks, con The magical combination for creating a modern website, che inizia paragonando i sistemi tradizionali per costruire un sito, come possono essere WordPress o Drupal, in cui la Digital Experience Platform, intesa come esperienza di gestione del sito, è tutta all’interno della piattaforma scelta, quindi si tratta di un “Best of suite”, mentre il futuro, secondo lui è un “Best of breed”, dove per ogni pezzo dell’applicazione (CDN, build, API, frontend, CMS, analytics, ecc..) è possibile scegliere il migliore tool per quello specifico progetto. E raggiungere risultati di performance ottimi. Come ha fatto lui per il suo personale sito, il quale stack comprende Nuxt con deploy statico, Prismic per la gestione dei contenuti, Algolia per la gestione della ricerca dei video e Cloudinary per l’hosting delle immagini. Il tutto deployato e ospitato da Vercel.
E per concludere Denny Biasolli, che non conoscevo, ma che ho piacevolmente scoperto essere pure un mio conterraneo, ha condotto un talk dal titolo Introducing Vuex in your project, introduttivo ma con una spiegazione molto semplice e chiara, sull’utilizzo di Vuex, per la gestione degli stati in Vue, attraverso la creazione di una simpatica app basata sul gioco del Bingo. Non ha mancato anche di illustrare come testare Vuex tramite i Vue Tests Utils per Vuex.
Il successo di una conferenza, inteso da un punto di vista del contenuto, quindi, nello specifico, lato talk, si evince dal tornare a casa e avere una voglia matta di provare ciò che si è visto. È indubbiamente una sensazione personale perché chiaramente dipende anche dal livello e dalla conoscenza di una determinata tecnologia di ogni partecipante rispetto ai talk proposti, ma quella di quest’anno è stata una conferenza dalla quale sono “tornata a casa” (metaforicamente parlando, ahimè, perché io a casa c’ero già, sigh) con un paio di cose che “devo assolutamente provare!”
Quello che speriamo vivamente è che si possa tornare “in presenza” il più presto possibile (già dal prossimo anno magari?) perché sì, è vero che ascoltarsi una conferenza da casa è comodo, non ci sono levatacce da fare né treni da prendere (o perdere!), ma l’esperienza dal vivo e il networking che si crea in queste occasioni è impagabile e vale molto di più del solo costo del biglietto in sé. Questa tipologia di eventi e momenti di incontro sono molto importanti, sotto diversi fronti, perché permettono lo scambio e la crescita grazie al confronto, soprattutto in conferenze internazionali come quelle del GrUSP, jsday e phpday oltre a questa, che creano davvero l’occasione per una reunion di developer da tutto il mondo.
È anche vero che, la trasmissione online, porta quasi indubbiamente un’audience maggiore perché in questo modo è possibile raggiungere anche chi sta dall’altra parte dell’emisfero e che probabilmente fatica un po’ di più ad organizzare un viaggio del genere, ma questo forse può essere un di più che si potrà mantenere anche dopo, quando si potrà tornare tutti a Verona per chi lo vorrà.
Articolo scritto da Lorena Ramonda
Front End Developer @ Bitbull
Nata come web designer e poi convertita al front end puro, attualmente lavoro per Bitbull, azienda specializzata nell’e-commerce.
Dal 2018 sviluppo in VueJs e Nuxt, stack che adoro e con il quale ho collaborato a realizzare il primo e-commerce headless completamente custom.