 grazie grazie allora partiamo subito intanto volevo sapere mi dicono sempre quelli bravi chiedono per alzata di mano quanti sviluppatori sono nella sala però quanti web designer giù di lì ok alzi la mano ed è l'ultima volta chi è capaci di alzare la mano così molto in meno ma sì ci sta come numero allora iniziamo non so se avete sentito questa frase guttenberg è il futuro di war press quando sento la parola futuro la prendo sempre con le molle perché c'è chi la usa s'proposito e quindi bisogna capire il modo classico per capire cos'è il futuro è andare a vedere la roadmap dei prodotti quello che è stato fatto quello che è il presente di fatto perché qui è ora è più importante del futuro è quello che verrà fatto infatti se andate nella sito di war press c'è la roadmap del progetto e vedete che nella prima fase che è stata completata è stato introdotto il bloc editor chiamato guttenberg appunto e la seconda fase è in via di conclusione nel 2019 poi ci saranno altre due fasi almeno in previsione vi sarete trovati in quella in quel momento in cui dovate scegliere tra pillo la rosa e pillo la blu insomma di dover ristallare quanti di voi hanno mantenuto il classico editor un buon numero un po' per l'effetto nostalgia comunque jQuery è la libreria di use interface più utilizzata da sempre tiriamo si è l editor che c'era anche in passato e alcuni hanno fatto il fork cioè hanno clonato il progetto di war press e hanno fatto classico press io divido tra progressisti e conservatori ma c'è un fondo di verità sappiamo che javascript è strano ok strano oppure semplicemente c'è una bassa conoscenza di javascript e php in accoppiata con lo stack tecnologico apure metodi magici chiamati quindi siamo siamo in buona compagnia il rischio è quello se non si studia è quello di fare la fine della rana bollita chi non conosce la metafora significa che se la rana salta e l'acqua è già bollente salta subito fuori ma come è stato per i grandi cambiamenti cioè dal 2015 già met meulenweg il CEO di automatic l'azienda che sta dietro war press ci diceva di studiare javascript perché il mondo il mondo moderno del sviluppo nuovo approccio è quello che nel front end c'è principalmente javascript quindi se invece voi in questa gradualità non l'avete avvertita o non l'avete presa troppo in considerazione col tempo da oltre 5 anni fate la fine della rana bollita cioè siate diciamo così di fronte allo sviluppo front end andate molto più a rilento perché javascript è riluttabile significa che jeff adwood che è co founder di stack overflow la piattaforma dove fate domande tecniche diceva che se una applicazione sarebbe potuta essere scritta in javascript verrà scritta in javascript cosa porta a non voler affrontare javascript in particolare quella che viene chiamata javascript fatigue perché uno sviluppo moderno abbiamo tanti tool in realtà a contorno che ricalcano un po quello che è stato per lo sviluppo del back end e cioè package manager transpiler che servono semplicemente uno su tutti bubble che serve per vedremo dopo per la compatibilità con i vari browser in modo bundler uno su tutti sempre web pack perché uno su tutti dico sempre perché si vanno a stabilire alla fine degli standard più utilizzati quelle anche le soluzioni più stabili di fatto e ci sono un sacco di librerie perché io vengo dal mondo lo sviluppo di back end li avevamo centinaio migliaia di librerie adesso ne abbiamo tantissime nel mondo nod dal 2010 in poi questa fatica viene semplificata da warpress perché è introdotto vp script che in qualche modo vi nasconde un po la complessità sotto il cofano vi lascia dei preset per i vari bubble per i vari web pack e diciamo che in sintesi non vi per il lazy developer non vi sforza a capire cosa c'è dietro anche se la differenza tra un buon sviluppatore e un meno buono diciamo così è proprio andare ad aprire il cofano e capire cosa c'è dietro perché ricordate una cosa il lavoro che noi facciamo è di knowledge worker lo sviluppo è un processo di apprendimento il codice che viene fuori sono side effect quindi dovete chiedervi che lavoro voglio fare se volete farlo sviluppatore siete dei knowledge worker dovete studiare e abbracciare il cambiamento ritorniamo al browser e alla compatibilità io dopo nella slide successiva ve lo anticipo parlo di zucchero sintattico quando mi chiedono cosa è cambiato non lo sviluppo software in questi ultimi anni io dico sempre cambiato ben poco ma ovviamente i browser non sono tutti compatibili con s6 successivi quindi i principali sono compatibili con s5 questo significa che sono stati introdotte tutte del uno strato e di funzionalità che sono molto utili per scrivere un codice più legibile più manutenibile ma in realtà siamo nell'era dello zucchero sintattico potremmo scrivere in questo modo che vedete qui a destra il codice perché alla fine worker se non si è inventato niente ha preso react se l'è wrappato cioè l'ha portato all'interno del suo progetto l'ha astratto con le sue ipi ma in realtà noi potremmo scrivere benissimo qualsiasi componenti in questo modo che s5 oppure preferiamo scriverlo in jsx in realtà quello è già script che però è html like xml like e quindi per noi è più leggibile poterlo scrivere così provate ad avere per ogni nodo un elemento nuovo e dover gestire un qualcosa di usi verboso il mio ambiente qual è molte di voi userano xamp ma compagnia bella flywheel come ambiente io preferisco e indico di usare docker perché perché potete tirare sulla vostra istanza potete passare l'immagine a qualcun altro che lavora con voi semplicemente la solleva cioè la manding running e a tutto l'ambiente già configurato non si può nodo ovviamente everywhere composer per le dipendenze in php io uso vi sostoglio code ma qualsiasi editor in cui avete dato completamento moderni quello che nel backhand è sempre stato un integrate development environment unide e con i vostri boilerplate con i vostri snippet git perché ovviamente ancora vedo altri sistemi di versionamento ma git è lo standard de facto allora qui nel titolo della slide usato un principio agile che conosce qualcuno conosce il manifesto agile ok timidi timidi ma qualcuno c'è che dice working software over comprehensive documentation significa che andiamo a vedere direttamente il codice così si impara sviluppare software non leggendosi chissà guanta documentazione c'è l'handbook del bloc editor il primo link dove partite con i tutorial i tutorial vi spiegono un po le basi il secondo link subito che vi invita l'handbook stesso e andare su guttenberg examples andate subito su s next c'è la versione e s 6 successivi di javascript perché non credo in futuro vera scritto e si è andato a vedere le core library non sono scritte nella versione precedente i guttenberg ad esempio vi fanno esempi molto banali ma vi incomincio a fare entrare nella logica dei blocchi che alla fine abbiamo detto è react style subito dopo il passo è abbastanza un bel salto perché nei package book library sono quelli che sono già i blocchi presenti nel core quindi andate alzate il livello per capirlo e alla fine e vedremo tra a breve ci sono tantissime librerie di terze parti che hanno creato i blocchi per voi qual è lo starter kit come abbiamo detto prima quando parlavo della javascript tick c'è vp script che non è altro anche qui un wrapper di react script con i vari preset e quant'altro in alternativa create guttenblog questi servono sono dei tool da riga di comando con nodde molto facile crearli che servono semplicemente per avviare per fare il loader quant'altro di tutti i componenti o vp cli io non lo consiglio vp cli poi se c'è qualcuno esperto vp cli in sala poi mi dirà però più che fare lo scaffolding cioè creare tutta la struttura nel file system del progetto non mi sembra che ti dà poi tutti questi vantaggi o di utilizzarlo a meno che tu non lo voglia personalizzare allora voi dovete pensare a guttenberg come due sistemi separati una di frontend guttenberg che può vivere di sua natura un'applicazione già la scrivete di fatto e dietro worpress che è beckenders a service quello che dico sempre è che worpress sta diventando idles cms sta esponendo le sue pi a me non interessa che dietro ci sia worpress un altro cms siamo cms agnostica però per comunicare questi due mondi fanno una registrazione del blocco prendendolo nelle varie librerie che worpress ha scritto in javascript e lato client significa creare un file javascript tu registri un blocco quello che gli devi dare questa un esempio dai guttenberg ad esempio il namespace e il nome del blocco in questo caso rispettivamente guttenberg è che samples e exemplo 01 basic s next siamo siamo molto discrittivi nei nomi dei blocchi comunque per dire che questo deve essere univoco all'interno del sistema poi ci sono varie proprietà il titolo l'icone da dash icon oppure dovete definirle voi una ma la cosa interessante qui è che dovete vedere ormai worpress come un framework non più come cms cioè i framework sono quelle cose che vi dicono loro come dovete scrivere il codice vi danno loro le regole edit e save sono due funzioni la prima quando entrate in amministrazione in fase di editing viene invocata quella quando invece andate a salvare o andate nella visualizzazione del frontend come utenti viene caricata questa questa parte qui lato server side worpress deve sapere che esiste questo blocco quindi dovete ripetere il namespace il nome del blocco dirgli come sempre noi worpress per caricare dei javascript dei stili dei css quant'altro dovete sempre indicarli prima a codarli registrarli e poi con register block type che per fantasia dalla camel case lo scrivete quali underscore dovete caricare lo style che è la proprietà che è lo stile che viene caricato nel frontend l editor stile se volete in qualche modo che lo stile sia differenti in fase di editing di amministrazione e infine la parte di script che deve essere caricata per la gestione dell'editing del blocco allora chi viene da react qualcuno viene da react qua wow quasi nessuno orgogliosamente però sollevano la mano benissimo ci sono le props ci sono dovete pensare al blocco e immaginate un blocco che abbia un'immagine con una scritta ok l'immagine è un attributo perché io devo caricare l'uri l url per quell'immagine il testo che è stato in sovraimpressione di un'immagine ovviamente è un testo che sarà salvato da qualche parte per ricreare quel blocco gli attributi hanno questo parametro type questo ad esempio un attributo di un blocco il blocco dovete immaginarlo come un oggetto javascript e quel blocco ha un suo stato un suo stato che tiene memoria questo number attribute e text attribute sono rispettivamente di tipo number string vuol dire che quando voi salvate se realizzate nel database la situazione lo stato del blocco e avete assegnato a text attribute un valore come detto ad esempio per originalità il warpress deve salvarlo in un contenitore che ospita html quindi per mettere questa informazione sotto forma di oggetto javascript va a serializzare il jason all'interno di un commento e c'è anche qui warpress non si è inventata niente c'è una libreria hpq che dopo vi lascio il link che va a passare quello che è presente in post content dentro il database parentesi ovviamente siete quasi tutti sviluppatori però la tabella vp post all'interno da database c'è un campo che si chiama post content dove c'è tutto il contenuto del post e all'interno ogni blocco avrà dedicato e sarà contenuto all'interno di commenti ma cosa succede se io invece voglio andare a recuperare un blocco che contiene come uri l'uri del di un'immagine non avremo solo il type che indica il testo che segnala l'url ma avremmo anche l'attributo source che deve dire a hpq nelle ritrovie di dire guarda che mi devi andare a recuperare un attributo quel attributo lo trovi perché è contenuto in un oggetto che ha come classe ma image e l'attributo è il nome dell'attributo src ecco quello che fa cioè dentro il post content c'è questo qui lui va a vedere va con se lettore a trovare mai image poi va a recuperare l'attributo src questa stringa questa stringa viene caricata in fase di editing per visualizzare l'immagine stessi allora qual è la reference per studiare gli attributi l'handbook non è così ricco ancora forse nei contributori dei ci si può lavorare questa il primo link l'hpq quella che vi diceva la libreria che fa lo sporco lavoro per wordpress cioè va a passare cioè significa scansionare nel database e va a recuperare i blocchi i bloc attribute questo è l'handbook il secondo link dove trovare tutte le informazioni sui bloc attribute e l'ultimo secondo me è un bel articolo perché spiega quello che dovrebbe spiegare probabilmente l'handbook sugli attributi il processo qual è il processo che nel mondo dell'informatica c'è la serializzazione la deserializzazione significa che voi avete un post il post è un insieme di blocchi una lista di blocchi questi blocchi ognuno ha il suo stato cioè i suoi attributi le sue proprietà che lo caratterizzano quindi voi avete uno stato del post quando salvate se realizzate cioè andate a vedere quello che vi ho fatto vedere prima nei commenti viene salvato semplici se è un source può essere salvato all'interno dei commenti in post content poi hpq va a passare per voi questo contenuto in post content crea i suoi bloc attribute e riporta lo stato in fase di editing e quindi viene invocata la famosa funzione di edit che vedevamo prima con le blocche pi potete gestire tutta la situazione e vederne la parte di visual editor la cosa importante da capire che se realizzato avete in post content tutto l'informazione relativa i blocchi cosa fa warpress per voi porta in memoria il loggetto che rappresenta il blocco l'oggetto in JavaScript che voi potete manipolare utilizzare su guttenberg c'è da dire che possiamo fare blocchi statici possiamo mettere tutto dentro save quando salviamo e però quello che potete fare nel save restituire nulla e dire va beh sposto tutta la parte di rendering del blocco nella parte php per farlo quando in la server side nel codice c'è la registrazione del blocco voi chiamate la render callback e di fatto questo è un nome lunghissimo sempre degli esempi di guttenberg exemplos andate a prendere questa funzione e lì costruite il rendering del vostro blocco anche perché se e dico se no è così lo assicuro se andate a modificare un blocco un blocco nella fase di save cosa fa warpress quando carica il blocco va a vedere in post content qual è il contenuto che dovrebbe renderizzare sul browser va a vedere quello che compone con save dice aspetta non è più lo stesso blocco è disalineato quindi c'è una fase di validazione che dice che non vi riconosci in fase di etich il blocco stesso se lo spostate invece in php questo meccanismo di validazione salta dove trovare i blocchi in realtà è dove non trovarli perché c'è una proliferazione il problema non è tanto trovare i blocchi o farne di propri il problema è che i blocchi non è così facile utilizzarli l'altro giorno ero al mitapp di torino e abbiamo detto ormai warpress è uno strumento per webdesign per utenti finali perché dovete mettere mano molto css quindi se dovete usare tenete in considerazione di usare quelli in cui c'è anche la gestione del layout altrimenti e anche se e anche nelle eventualità che c'è non è poi così semplice fare diciamo così un qualcosa di non lineare e di blocchi sovrapposti la cosa interessante che è cloud blocks c'è immaginate che la tendenza adesso è di andare tutto sul cloud no e di usare le content delivery network significa che voi i blocchi potete che in questo momento vengono messi all'interno di un plugin installati poi vedremo che sta arrivando la block directory però potete mettere una cdn e co blocks intelligentemente fa questo plugin che in realtà si va a chiamare la cdn dove scarica gli asset tra cui i blocchi che gli servono quindi immaginate in un futuro prossimo se non adesso che potete caricare i vostri asset i vostri blocchi sul cloud e recuperarli con la vostra cdn questo è il mercato cioè gli hosting services hanno incominciato ad accappararsi vp engine atomic blocks goded di acquisito co blocks e sta nascendo la block directory quindi a punto di vista di opportunità di business significa che oltre template e plugin ci sarà possibilità di blocchi premium guttenberg è un'applicazione abbiam detto il frontend si sta allontanando dal back end warp sta diventando sempre più back end as a service e guttenberg è sendo una applicazione javascript la potete associare a qualsiasi altro cms che ce l'ha fuori guttenberg aperto sul progetto e scusate drupal le strong ideas che ci sono qua così cerchiamo anche di lasciare più spazio possibile alle domande spero che ce ne siano che i pacchetti nod stanno andando sul cloud che il frontend sta diventando cms agnostic che gli interessa che cms c'è dietro chiamo le mie piai hai esposto le reste piai o adesso le graph ql io vedo semplicemente un repository di dati che mi espone un'interfaccia il market place dei blocchi premium starà a venire c'è una ossificazione di warpress se avete vedi visto google sta facendo una un verticale sulle news tra cui è diventato anche min sponsor e ricordiamo che google è passato con amp ad essere semplicemente un modo per rendere il mobile più veloce così a detta di loro a fare di amp un framework un framework e la mia idea è proprio quella che il browser sarà la piattaforma del futuro i cms sono dei meta framework ci dicono come possiamo lavorare e ci agevrono quel lavoro ma la realtà di fatto è che ogni due settimane stanno aumentando le pi su browser e significa che di fatto noi possiamo scrivere la nostra applicazione javascript di frontend interfacciarsi col browser stesso con questo vi lascio alle domande queste alcuni link il podcast le slide la newsletter gli eventi dove sono e sono aperto in largo anticipo giusto alle domande grazie