 Quindi Cristiana Zancas, sviluppatore software per i commerce, è esperto di WooCommerce. Io oggi vorrei più che altro parlare di Cristiano nel senso globale di Cristiano. No, volevo dire che Cristiano insieme a diverse altre persone della comunità WordPress è uno dei fautori della rinascita della comunità nel 2015, quindi il fatto che oggi siamo qui a Milano è anche merito di un gruppo supervolenteroso di persone che si sono impegnate un sacco per far rinascere la comunità WordPress in Italia, creare degli eventi sempre più capillari e siamo crescendo un sacco ed è una cosa bellissima. Quindi grazie per questo super contributo a te in rappresentanza di tutti gli altri. Oggi Cristiano ci parla di GraphQL, quindi un più interessante strumento per creare degli Adless CMS e vedremo come WordPress insieme a Gatsby può essere utilizzato come base dati per un front-end libero da ogni schema. Grazie Alice, grazie a tutti voi. Il titolo è in inglese, è Talk, qualcuno si aspetta un Talk in inglese? No, perfetto. Ok, non volevo forse. Allora oggi parleremo di questo, ma senza il… perché nel 28 gennaio del 2016 è successo una cosa importante, c'è stata la prima conferenza che ha promosso le REST API in WordPress perché WordPress non ha da sempre avuto le REST API, gli ha avute grazie a una persona che si chiama Ryan McHugh. Questa persona faceva parte appunto di un gruppo di altri, questi si vedete, c'è insieme a Dennis, io e Luca Tumedei che eravamo a quella conferenza e lui appunto nel 2016 ha fatto sì che dentro il core di WordPress 4.7 ci fossero le REST API. Prima di quel momento WordPress non aveva le REST API, che cosa sono le REST API? Le REST API sono un modo per connettere i dati al di fuori di WordPress, cioè senza fare delle autenticazioni al database direttamente. Quindi cosa è successo da quel momento? Da quel momento WordPress può anche essere un CMS Headless. Quanti hanno mai sentito parlare di che cos'è un CMS Headless? Ah, perfetto, allora siamo in casa. Quindi andiamo avanti. In più ultimamente si parla molto di Jamstack. Jamstack è l'insieme delle tecnologie JavaScript e API, come vi ho detto prima, e markup. Quindi cosa significa che i dati possono essere scollegati dall'interfaccia, in un modo molto più scollegato di quanto noi siamo abituati a vedere in WordPress. Questo ci permette di concentrarsi molto più sul front-end utilizzando delle tecnologie JavaScript moderne come appunto eGasby. E quindi fare una progettazione del nostro sito in un modo abbastanza innovativo. Però ho visto anche dei post in merito questo argomento che parlano di CMS Headless come il futuro e i temi invece da buttare via. Non li buttiamo via. Nel senso che qui abbiamo degli autori dei signori temi in sala e quindi no. La tecnologia Jamstack è fantastica, è una bomba, vi consiglio di provarla. Ma per siti in cui c'è una complessità di workflow che i temi risolvano già benissimo, significarebbe inventare la ruota, ovvero riscrivere in React, soprattutto in questo caso AndoGasby, riscrivere tutto il workflow. Ci sono parecchi ingredienti nel realizzare un sito, un WordPress Headless, come vedremo oggi. Ho voluto leincarli un po' perché magari possono spaventare. Però in realtà la cosa molto interessante è che si può sviluppare un tutto in locale e poi mettono in produzione come dovremmo fare sempre tutti, cosa che magari non è sempre vera. Però questi sono gli strumenti che vi consiglio di utilizzare in locale. Abbiamo MAMP, Mondomac, XAMP, Flywheel che è una novità abbastanza recente per sviluppare in locale e vi consiglio di provarlo c'è anche una versione gratuita oppure tutti gli ambienti Linux che permettono alle vari varianti di MariaDB, MySQL, etc. Quindi la parte più a sinistra, la parte più semplice, la parte più essa un po' più avanzata per poter sviluppare un WordPress e Gatsby insieme. Online invece è necessario avere questi altri strumenti, GitHub o Bitbucket, quindi tecnologia Git, Netlify che mette insieme il tutto e un Custom Hosting o WordPress.com. La cosa interessante è che Gatsby può anche prelevare i dati da un WordPress.com, quindi un sito semplicissimo, a bassissimo costo, ma con una versatilità veramente notevole. Che cosa fa Netlify? Netlify mette insieme il mondo dinamico e il mondo statico per generare un web statico, perché noi stiamo parlando proprio di questo della creazione di un sito HTML statico, addirittura con un plugin di Gatsby possibile creare anche un sito sans JavaScript, proprio HTML puro. Questo può avere dei pro e dei contro, quindi non è sempre la scelta migliore. Come vedete, i repository che si possono utilizzare sono anche GitHub, GitHub e Bitbucket, si aggiunge appunto il setting per fare il comando e si genera e si fa il deploy del sito statico. Se avete delle domande da farmi fatemele... No, alla fine, come hai detto lì, non me le fate. Allora, questa è una novità proprio mentre facevo le slide. Gatsby ha creato Gatsby Cloud e una sorta di Netlify, ma non l'ho ancora ben capito perché ha la build in beta, quindi non so bene quanto si sovrapponga Netlify, però tenetelo sotto occhio perché permette di fare il deploy in un Cloud Gatsby nativo perché lo fanno loro, quindi dategli un'occhiata. La cosa è molto bella che si collega al talk che c'è stato precedentemente perché gli ingredienti back-end per fare un sito Adless, un Warpless Adless, si sono Warpless ma con i custom post-type che per fortuna, quindi non devo profondire perché le avete visti prima, e gli AdVast and Custom Field, quindi... però esattamente come avete visto nel talk precedente, senza andare veramente a fondo di queste tecnologie, basta proprio veramente pochi righe di codice che oggi mi sa che non avremo il tempo di vedere, però se volete io sono qua per farvele vedere. GraphQL, che cos'è GraphQL? GraphQL è il ponte tra il back-end e il front-end. Dopo vi farò vedere degli esempi. È una tecnologia che permette di utilizzare... è un linguaggio SQL, ma permette di fare delle query in modo veramente molto immediato e da provare, veramente valoroditivo. Scusatemi, ma sono un contusiasta di questa roba perché mi sta ultimamente, sembra un 16 anni, perdonati. Il front-end, invece, per il front-end ha bisogno di queste tecnologie. Node.js, NPM e NVM, che ve lo consiglio, perché ho avuto, non so se avete mai provato, ma tutti i casini che ci sono quando c'è una versione di Node che dice no, attenzione, va in conflitto, voglio la 5.4, 5.6. Quello fa il versioning, il gestice, il versioning del Node. Quindi dice, ok, va in conflitto con il 5 e con il 10.2. Allora uso il 10.1. Senza NVM impazzite, quindi ve lo stra consiglio, perché non lo dicono in tante. E poi Gatsby finalmente appare il nostro framework preferito. C'è il nostro tool di sviluppo. Perché Gatsby è uno static-side generator. È un framework in JavaScript che permette, quindi, venire ai dati di WordPress con Netify per pubblicare in statico. Perché è un sito statico? Allora, due grandi vantaggi. Velocità e sicurezza. Un sito statico non ve lo bucano. C'è un video bellissimo di, adesso scusate, non mi ricordo, no, però chi è fatto il plugin di GraphQL per WordPress, che fa poi più a vedere un finto tweet che ho usato bucato, un sito fatto in Gatsby, no, è una fake news, perché non è possibile, perché sono pagine HTML. Non è abbastanza da nerd, non c'è tanto da ridere. E poi la velocità. La velocità, perché vi giuro, soprattutto su mobile è veramente impressionante. Quindi, però sempre per siti di cui non c'è una necessità di un workflow complesso. Quindi non sono, ma anche su questo è uscito for a tweet, non for i nomi, perché non mi piace, però dove c'è una persona che ha detto, boh, è uscito Gatsby e sono, è morto tutto. E Matt Mulleweg ha risposto sotto, no, quindi no, non è vero, ma non perché vuole a difendere la sua, il suo ecosistema, perché in effetti non è la soluzione a tutti i mali. Che cos'è Gatsby? È un framework JavaScript, la definizione nel suo sito originale e is a free open source framework based on React. Infatti, attenzione, come diceva Matt tempo fa, studiate JavaScript, studiate React, perché React è alla base di Gutenberg e di molto grande parte del JavaScript presente in WordPress. Quindi Gatsby è fatto in React e quindi in teoria siamo in casa, come diceva prima anche nel tuo precedente. GraphQL è un linguaggio, appunto, che è un linguaggio tipo SQL che permette di arrivare ai dati con meno codice e meno complessità di un linguaggio SQL ordinario, standard. Gatsby si installa in quattro comandi. NPM install Gisa per global, Gatsby CLI, perché si installa in riga di comando. Quindi la prima cosa è installiamo la riga di comando di Gatsby. Poi lanciamo Gatsby, new Gatsby site. In questo caso viene creato un sito che si chiama Gatsby site. Si entra dentro il Gatsby site. Il comando che si lancia è GatsbyDevelop, boom, c'è anche un server all'interno, conto dello sviluppo del tool di Gatsby e quindi all'indirizzo localhost 8000 sia Lellow World. Che sarebbe questa pagina qua? Quindi voi, dopo che avete dovuto superare i casini perché chiaramente io l'ho fatta semplice in realtà installare nod, NPM, eccetera, in locale, sappiate che non è proprio immediato, ognuno poi con le sue installazioni può metterci in diverso tempo. Però quattro comandi e siamo dentro Gatsby, ok? Siamo dentro di un server di Gatsby, quindi senza bisogno di questo è un server suo. Come parla con Warpress Gatsby? Parla con un plugin che Gatsby ci mette a disposizione. Gatsby Source Warpress. Quindi entriamo in un mondo anche questo ho fatto a plugin in cui altre persone hanno scritto quello che ci serve. Queste sono le caratteristiche del plugin, punto che abbiamo visto prima, quindi può gestire anche da siti con centinaia e centinaia di post, testato fino al 900. Può usare anche auto e quindi con autenticazione e può creare anche imagine responsive. Quindi plugin diciamo che fa diverse cose. E che cosa permette di far comunicare a Warpress in Gatsby? Quasi tutto. I post, le pagine, i tag. Usando anche i custom post type, e gli Advanced Custom Field, praticamente abbiamo in mano uno strumento che ci permette di avere un front end completamente libero da tutti gli schemi che abbiamo avuto fino ad oggi. Grazie a questo plugin, quindi non dobbiamo scrivere noi le connessioni con i dati. Ci vengono messe a disposizione. Quando si stalla un plugin in Gatsby, attenzione che è un errore che si fa molto spesso, bisogna anche dichiararlo nel file gatsbyconfig.js che c'è all'interno di Gatsby. Poi volevo farvi notare una cosa. Questa è la parte che riguarda la configurazione punto di Gatsby source Warpress. Base URL è un qualcosa che in questo caso vedete con un Envo puntato, perché ve l'anticipo, magari se volete lo approfondiamo, permette di gestire il locale remoto con un file esterno. In modo a che io quando lavoro in locale faccio puntare un file punto ev, Envo locale, e quindi non vado ogni volta a sovrascriver gli indirizzi perché la comodità che c'è nell'utilizzare Gatsby è che è possibile, in modo molto semplice, sviluppare il locale e fare il deploy su un Netlify per vedere poi dati in remoto. Questo per far vedere la ricchezza dei dati che le resti PI offrono in Warpress, come vedete c'è, questo è un dettre indirizzo sopra Gatsby punto, Gatsby punto WP. Praticamente questo è quello che esce fuori in Warpress con le resti PI attivate, ovvero in Warp standard. Come vedete escono fuori tanti dati. Che cosa facciamoli con GraphQL e Gatsby? Andiamo a prendere questi dati delle resti PI e li formattiamo col markup di JavaScript. Questi sono gli endpoint come diceva prima giustamente, infatti non ci siamo ma si d'accordo, però davvero è pazzesco perché per fortuna appunto li hai già indicati, questi sono tutti gli endpoint che Gatsby tira su e che puoi gestire quindi poi nella compilazione dei dati. Lanciando il comando di Gatsby develop non si tira su solo sito, ma si tira su anche un'interfaccia grafica per gestire le query con GraphQL. Praticamente a questo indirizzo che vedete underscore GraphQL è possibile vedere questo. Si chiama GraphQL, perché è l'interfaccia visuale di GraphQL. Quindi come vedete, la parte a sinistra quella blu è il GraphQL, solo graffe e quando voi schiacciate lo spazio del computer ad ogni voce, perché all world press post sono, io voglio vedere tutti i post, quando io schiaccio lo spazio, viene for age che sarebbe la lista degli oggetti nell'array e poi dopo appaiono mentre voi schiacciate, io ho evitato il live coding perché il terrore è che tutto si rompe, per esempio quindi perdonate, dice uno screenshot, però è molto bello vederlo in live e quindi io non devo sapere neanche prima quali sono i dati, ho spazio del computer e vedo tutto e poi cosa faccio? Questa query qua a sinistra, schiaccio il play che c'è lì in altro e a destra, boom, mi tira fuori quello che io sto cercando. Se quello che sto cercando copio quella parte blu a sinistra e la incollo in Gatsby. Quindi la cosa incredibile è che voi fate del test sulle query al volo sui dati grazie a quel plugin che avete visto prima, installato e quindi i dati li tirate su con quello che vedete a sinistra che sono 11-10 righe di code. Quindi è una complessità a creare tutto l'environment, ma una volta che è tirato su con delle competenze di JavaScript, di React, è un po' di tutto l'ecosistema war per essere chiaro, bisogna sapere un po' di database, un po' di tutto, però alla fine non è tanto complesso, per esempio in giro ho visto tanti talk che parlano tanto di GraphQL, tanto di Gatsby, ma pochi che parlano di tutto l'ecosistema insieme, perché l'ecosistema insieme è una bomba per certe cose. Se volete vedere una prova live di quello che vi sto parlando, questo è un prototipo, è veramente scarno, provate col cellulare ad aprire questo indirizzo qua. Questo è il test di cui stavo parlando adesso. Praticamente se voi vedete in questo indirizzo qui c'è un sito molto scarno, è un esempio di un hotel che se abbiamo... un attimo cerco di farvelo vedere. No, non dite ancora niente. Allora, questo che vedete, innanzitutto vi consiglio di verificare in quanto tempo carica le pagine quando cliccate sulle varie voce. Questo è un hotel demo, assolutamente demo, come potete notare, che ha appunto un on page. Questi sono dei custom post type che si chiamano stanze, sono qua sotto e non nella pagina precedente, perché offerte anche lui a sua volta c'ha dei campi che gli dicono no, qua sotto tirano le voci. Poi, quando cliccate sull'italio delle pagine di questo ipotet di Colbergo, vi faccio notare che non sono caricate in locale, sono online, però, la velocità dell'apertura è notevole. Poi, la cosa anche interessante è che si può anche fare. Questo è il blog che c'è nel WordPress standard di tutti i normali. Come vedete, ok? Vi faccio notare la velocità, quando ci sono tanti immagini, però, la cosa anche interessante è che tutto questo può diventare in una web app, quindi non solo un sito molto veloce statico, ma un sito che, quando voi aggiornate i dati in una parte WordPress, mettendo una chiave giusta, quindi chiamando in Netlify una stringa con un codice, in automatico li aggiornano anche nel vostro Netlify statico. Tra l'altro, qua sopra, voi vedete che sbilovo.netlify. In realtà, su Netlify potete mettere il vostro dominio, ovviamente, cioè non tanto ovviamente, adesso lo ho detto, quindi si può fare. Quindi, voi cominciate che questo può essere un sito per un cliente, un cliente che ha bisogno di, magari, non complessità e non dei workflow pazzeschi, ma che ha bisogno di un sito semplice di gestire, ma potente da punto di vista di layout, perché questo è scarnissimo ed è la semplicità. Però, immaginate che voi su il GitHub avete il front-end JavaScript Gatsby. Su WordPress avete i 50.000 plug-in e tutte le vostre funzionalità gratuite come sempre siete abituati a utilizzare e potete uscire con un front-end che non ha nulla che vedere con le cose che siamo abituati, ma con una cosa completamente libera da ogni esperienza passata. Vediamo un po' se riesco a entrare per avviarvi un po' un... per farvi del colpo che dicevo prima. Questo invece è in locale. Questo è il comando che lancia... Vedete che ho fatto bene non farlo live, comunque. Comunque, lanciando questo comando, appare poi viene creato in locale tutto il web server e quindi questa dimostrazione che, come vi consiglio voi, non fate live coding, perché... Ah, e cosa partendo? Però il tempo è finito, quindi quando stavo per iniziare la cosa bella, lancio solo GraphQL. Lancio solo, vi faccio vedere per la parte più interessante che ha andato ancora finito. E per farvi vedere le query... Eccole qua. Ah, proprio sul più bello. Questa è la dimostrazione che live coding nelle presentazioni non si fa mai. Va bene. È morto tutto. C'era un computer... Grazie.