 Allora, diciamo che con questa presentazione vi farò vedere un po' di tecnologie che sono, diciamo, delle tecnologie che appunto sono stati sviluppate da un'azienda americana di Sikama Rutsu. Nello specifico io vi farò vedere due delle tecnologie che abbiamo sviluppato loro, ma ne ho più avanti. Intanto io faccio la classica slide di presentazione, l'ho già fatta, comunque che dico qualcosa sempre su di me. Praticamente ho detto prima che faccio un stack web developer, amo definirmi web developer perché appunto io faccio operativi per i web. Da due anni lavoro in effetti tecnologici con un metodo di lavoro che è completamente agile e questo diciamo ha cambiato molto in una mia vita, perché comunque mi permette di avere diciamo ritmi, diciamo ritmi di un giusto compromesso orari vita privata a lavoro. In fatto è molto interessante, mi piace andare in bici, fare tracking, diciamo che il lavoro agile per come lo vedo io è un po' il futuro dell'organizzazione dei team per lavorare. Ok, allora di cosa si parla oggi? Alla fondamentalmente questa presentazione cercherà di affrontare quelle che sono le problematiche diciamo più ricorrenti quando si sviluppa un progetto warpes in team. Alla perché dico in team? Perché di fatto queste sono le problematiche che io ho sempre riscontato quando metto la mano al codice più di una persona, però nel nostro caso essendo un'azienda un pochino strutturata dove quando realizzano dei progetti warpes ci sono anche due, tre o quattro programmatore appunto che lavorano sul codice, è fondamentale avere un metodo di lavoro efficace e che non crei situazioni di problematiche varie. Quindi diciamo che i problemi di corrente erano queste appunto, cioè la difficoltà nel riflessinare i progetti all'interno del team, quindi il classico, il sito live, un membro del mio team deve fare una modifica, non c'è mai messo mano, riflessinarsi l'ambiente diventa un trammatico. Poi il disallinamento tra le dipendenze dei vari environment, quindi qui mi riferisco fondamentalmente al classico esempio di environment di sviluppo, quindi ambiente di sviluppo locale dove abbiamo, come so, dei plugin aggiornati all'interno della versione in produzione sono totalmente aggiornati oppure no. Di fatto questo disallinamento poi può creare delle problematiche, delle problematiche, perché comunque quando si va a scrivere il codice custom, magari ci sono alcune appunto implementazioni che possono reagire o meno in base appunto alle versioni di dipendenze, di immaginare i plugin. Un altro tasto dolente è la cattiva organizzazione del codice PHP che è un classico quello appunto di avere dei file function per capir che diventano enormi nel tempo, ma la mano che i clienti ci chiedono di far modifiche, vabbè dai mettiamolo nel function per capir e questo si allunga il rig del tempo. L'ultimo problema è chi ha pubblicato come volta, questo è un classico problema quando appunto più persone lavorano sul suo progetto non si sono mai appunto i rilasci con che criteri ne hanno fatti. Per superire un po' queste macro problematiche andiamo individuato nel corso del tempo. Certo, nel corso del tempo abbiamo definito un metodo portando dietro diverse tecnologie o comunque anche modo di lavorare e queste metodologie sono sentitizzabili in questi quattro punti. Il primo è utilizzare sempre un sistema diverse al contro, quindi Git. Git è la base per fare progetti con divisi in team. Purtroppo nel senso ci sono delle problematiche di base a utilizzare WordPress con Git. Purtroppo dopo vedremo appunto perché i tool che dimostrò ci vengono aiuti. L'installazione delle dipendenze da composere. Questo è uno dei momenti a cui tengo di più. Infatti è un classico avere sempre ambienti totalmente disarrenati o non sapere appunto magari che ne sono impagini che vengono pubblicati direttamente in produzione e poi negli envalumenti di sviluppo non se ne perde traccia, mentre appunto con la gestione delle dipendenze di la composere questo problema ad effatto non lo si può userare dopo vedremo perché ma si abbatte veramente di molto. L'organizzazione del codice è un problema appunto l'organizzazione del codice quindi c'è trovare dei metodi standard per appunto per appunto per metodi standard di sviluppo e che siano anche semplici persone che mettono le mani per prima volta sul codice di ritrovare subito funzionalità e quindi aggiungere modifiche o aggiungere appunto altre funzionalità. E' l'ultima è possibilmente cercare di rilasciare e cioè di fare distribuzione disautomatizzata cioè cercare di non fare pubblicazioni di FTP ma cercare di attuare delle politiche di disautomatizzata tramite pipeline ora questi sono concerti un pochino più tecnici comunque poi più avanti vediamo allora cosa parliamo oggi parliamo di fondamentalmente due tecnologie, due tools che sono Bedrock e Stage alla Bedrock il primo è letteralmente un boilerplate per installare per fare installazioni workplace di composere poi nel dettaglio vedremo come funziona Stage è fondamentalmente un starter ten, un white starter ten cioè è un tema vuoto fondamentalmente che però include al suo interno tutta una serie di sicureologie che ci aiutano a sviluppare feature e cose all'interno del nostro tema personalizzato A partiamo con l'introduzione di Bedrock, allora quindi vi lanco un attimo quelli che sono diciamo i punti di forza di Bedrock Bedrock come vedete è di fatto un installatore di workplace, cioè nel senso con Bedrock si va a fare un installazione di workplace che non è la canonica installazione quindi si prende la cartella dal sito di workplace la si scompatta nella public route e si fa un installazione qua si installa workplace direttamente da composere infatti appunto e non solo workplace anche tutte le sue dipendenze quindi di plugin un altro suo punto di forza è la possibilità di avere configurazioni specifiche per l'ambiente tramite appunto l'utilizzo dei file.temp una miglior organizzazione delle cartelle e una maggior oscurezza anche lì poi dopo nel dettaglio vedremo come Allora partendo dal primo punto, vivo composa perché vivo composa perché composa è lo strumento che ci permette di non perdere traccia e di avere sempre sotto controllo il versionamento delle dipendenze e qui mi rifo al problema che ho descritto prima, questo classico caso di avere in produzione n plugin in staging davenne altri, in development davenne altri ancora ecco con compose questo problema sia zero perché di fatto cioè i plugin che devono essere installati sono definiti nel file composer Jason e ci basterà di fatto un semplice comando per aggiornare le dipendenze e per aggiornare intendo aggiungere, rimuovere o fare upgrade o downgrade di dipendenze configurazioni specifiche per environment cosa vuol dire? Allora uno degli obiettivi di bedrock è quello di sequerare più possible configurazioni dal codice che vuol dire cercare di evitare assolutamente di avere variabili cablate nel codice e questo problema è risolto appunto con le introduzioni d'ottimbre e con le introduzioni di un sistema automatizzato diciamo di provisioning delle variabili d'ambiente tramite l'environment in cui ci troviamo cosa vuol dire? Vuol dire che di default praticamente bedrock supporta 3 tipologie di ambienti l'ambiente di downgrade che è quello su cui lavoreremo in locale l'ambiente di stage che di fatto è sempre anche la preproduzione se vogliamo che parla così e la produzione quindi ogni ambiente avrà di fatto un suo file di configurazione dove appunto potrò che ne so cambiare le impostazioni che ne so qui si può vedere ad esempio nello screenshot potremmo cambiare il comportamento del debug o di quant'altro ok ok passiamo poi all'altro punto che era la gestione delle cartelle io prima ho detto bedrock ha un sistema di gestione delle cartelle da loro stessi definito migliore allora di fatto bedrock ha una struttura delle cartelle un po' differente della classica salazione di WordPress allora si fa un po' come logica come conosce, come funziona Drupal e c'è di fatto voi state abituate a avere dentro la public route le classiche cartelle vp content, vp admin e così via ecco bedrock ragiona un po' diversamente perché per aumentare la sua sicurezza praticamente cosa succede tutte le dipendenze sono praticamente esterne alla cartella su cui deve essere puntato il virtual host del dominio infatti praticamente il virtual host del dominio deve essere puntato sulla cartella web dove avremo all'interno appunto le classiche cartelle come le installazioni normali plugin, teni, vp content e così via mentre all'esterno avremo le configurazioni quindi con le variabili di ambiente e i vendor che appunto sono le dipendenze avendo il virtual host che punta la cartella web di fatto le cartelle esterne sono accessibili e quindi questo aumenta la sicurezza da qui si capirà però che bedrock ha bisogno appunto di una configurazione un po' particolare perché appunto dovendo avere il virtual host puntato sulla cartella web bisogna avere appunto la possibilità di modificarlo solamente siamo che oggi tutti gli hosting beh non male se dando la posizione qualsiasi cipana il permette appunto di fare la modifica del virtual host perché di default un dominio appunto la cartella public cioè nel caso dei installazioni bedrock il dominio deve puntare alla cartella public però in un ripeto sono configurazioni ormai abbastanza standardizzate tant'è che anche Drupal funziona così quindi forse rubano lo gestissimo complesso non lo so, potrei sbagliare comunque questo diciamo sono a grandilina punti di forza di come funziona bedrock poi dopo vedremo nello specifico un video un video con tutti gli step di massima di come fare appunto una configurazione bedrock quando c'è capitato l'host che non supporta tu dopo che dai sviluppato l'hai normalizzato per postarlo esatto, bisogna tenere ben presente bisogna differenzare bene le due cose la bedrock è un installatore di stanzi e warps via composer sage è uno starter term cioè sage lo si può installare anche su installazioni convenzionali di warps l'uno non escude l'altra nel senso è possibile tranquillamente installare lo starter term sage su installazioni standard di warps e appunto lo andiamo a vedere in un attimino come funziona sage a sage come vi ho raccinato è uno starter term è un starter term di fatto vuoto perchè non ci sono template organizzati in nessuna maniera non sono come i classici template dove ci sono delle impaginazioni standard lì è totalmente vuoto e privo di CSS poi include tutta una serie di tecnologie volte ha lo sviluppo di fatto di un pochino più tecniche allora perchè root sage io a sage ormai lo utilizzo io penso di utilizzare da più di 8 anni ho visto diverse lezioni e per me è diventato un po' uno standard diciamo i punti di forza alla sono il primo utilizza blade come gestione date in blade e poi dopo vedremo nello specifico che cosa sono all'interno un compilatore webpack che si chiama pade.js pronto all'uso con incluso tailwind che è fatto oggi è il primo CSS che va più di moda anche quello quale vedremo un secondo dopo nello specifico e poi come ultimo punto che diciamo secondo me il punto di forza massima del tema è l'utilizzo dei composers composers praticamente servono per fare per avere una ottima segregazione tra il codice PHP e le view, le vista ok però vi faccio una roccia panoramica appunto su questi tre step allora blade, blade cos'è? come ho già detto è un sistema di templating è un sistema di templating di l'aravi tra l'altro e a diversi punti di forza tra cui allora per me è tutto per mette l'eredi status e le view cosa significa? significa che io posso definire una vista e questa vista può essere stesa da più template poi è possibile eseguire codice PHP nativo puro all'interno dei blade è possibile e abdiamo all'interno dei classici controlleri di cluster quindi e tutti e tutti quelli canonici PHP hanno la peculiarità appunto di avere il soffisso punto blade punto PHP quindi diciamo un template blade di fatto non ho l'altro che avere appunto questa questa menclatura e e in ultimo diciamo la facilità di l'utilizzo dei parziali tramite le inclusione che si possono fare tra gli stessi, cosa vuol dire? praticamente blade è appunto un sistema di templating ha tutto un sistema di rinclusione per gli stessi, cioè in senso tu puoi spezzettare di fatto template in parti, a me piace questa definizione di atomic design è utilizzata un po' impropriamente in un concetto di template di motore template però mi piace questo concetto dove di fatto si va a realizzare parti di template atomiche che di fatto costruiscono delle molecole quindi degli organismi dei template nelle parti, immaginate che ne so una card di un preview, di un articolo per me è un elemento atomico che insieme ad altre card compongono un carosello che per me è una molecula insieme ad un titolo e un testo compongono un organismo più organismi compongono template mi piace questo questo approccio di design atomico appunto che grazie a blade si riesce a spezzettare in tanti file tutti i nostri template ok e bad è un wrapper per webpack praticamente è un gestore di dipendezza con cui praticamente c'è già pronta l'uso tutta la compilazione CSS tutto il check dei errori JavaScript con catenazione, minificazione immagini JavaScript CSS di fatto è un compilatore ready to use e a bordo è già dalla versione 10 di sage è già disponibile come dicevo prima a questo framework CSS che era molto di moda è stato soppiantato bootstrap comunque è che obald.js di fatto appunto estendo un compilatore webpack scrutta con questo tipo di tecnologia cioè da real type script e qualsiasi altro framework CSS si voglia io sono particolarmente comodo appunto perché ho attestato il tema tre comandi, siamo pronti a lavorare i Yarn si installa di dipendenze i Yarn build si fa una compilazione secca di tutti gli assets i Yarn dev si lancia appunto il sergerino per vedere in modalità sviluppo il risultato delle modi che si fa appunto a CSS JavaScript naturalmente i Yarn si può aggiungere dipendenze come con npm quindi si può aggiungere classici plugin perzi come gesto di Ipka Roselli o quant'altro l'ultimo punto Composers questo qui secondo me è il punto di forza di Sage punto di forza perché? perché qui ci si fa la prima premessa che era quella del content della function php che diventa gigantesca nel corso degli anni perché si va sempre a mettere i pezzi di codice per le varie funzionalità che i clienti ci chiedono Composers ci dà incontro perché praticamente ci permette composers è un approvaccio di programmazione php che ci permette di segregare appunto la logica php dai template ottenendo di fatto un codice più organizzato e diciamo il legato ai template cosa voglio dire praticamente lo si può lo si può vedere anche diciamo in questo screenshot allegato alla slide cioè di fatto Composer non sono anche dei classici php che estendono appunto la classe Composer nella quale si può di fatto dichiarare il collegamento tra la classe stessa e un parziare quindi un blade di quelli di cui abbiamo parlato prima e quindi praticamente si lega si lega la classe al template e di fatto all'interno della classe possiamo fare quello che vogliamo quindi la classe di solito facciamo manipolazione del codice manipolazione dei dati manipolazione dei dati quindi facciamo un picquiri facciamo ordinamenti facciamo recuperi tramite ppi sterne li elaboriamo tramite ovviamente delle funzioni private all'interno della classe php e le rifassiamo alla vista che abbiamo definito appunto sopra quello che vedete static view ripassiamo appunto a quella vista delle variabili e le ripassiamo appunto il metodo che vedete lì sotto che si chiama appunto una simple function width che appunto ritorna un array di oggetti i cui nome di fatto sarà reutilizzabile per essere sotto forma di variabile php quindi in questo caso vedete c'è una stringa che si chiama roots a cui è stato assegnato un valore un'altra stringa quindi un titolo ecco quella stringa roots lì sarà recuperabile nel template a cui è stato associato in questo caso al parziale ad esempio con una variabile dollaro roots ecco questo metodo di fatto ci permette di legare logica php anche a dei piccoli dei frammenti di codice quindi come vi dicevo prima magari immaginate appunto la card, l'apredito della card di un articolo può avere la sua logica segregata php dedicata in una classe che andremo a definire come la potrà avere allo stesso tempo un qualsiasi archive un qualsiasi un qualsiasi che ne so un archive di sassonomia oppure un qualsiasi template anche il bello appunto di composere questo che appunto la logica è applicabile a qualsiasi template di qualsiasi livello parlo di livello perché ad esempio la versione precedente di stage era la nuova e permetteva appunto tramite un concetto un po' differente si chiamavano controller invece di computer tramite dei controller si poteva cioè legare la logica php solamente a parti di cioè dei template di primo livello quindi per intendersi single page, single archive e così via mentre in questo caso si può legare la logica appunto anche a piccoli frammenti di template ok diciamo quei sono un po' a grandi linee i punti chiave delle due tecnologie quindi badrock installatore di compositi di distanze world plus, stage, start and end ora io per vedere di vedendo conto che possono essere un po' nogliose con queste esperiazioni quindi con un video vorrei provare a farvi vedere un attimino la facilità diciamo di di utilizzo di questi strumenti ora è un video che io ho registrato e fondamentalmente è un'installazione da zero di badrock per le depresente che è ovvio che ci sono delle acquisiti io ho trattato scritto un documento franco lo condividiamo con tutti esatto e ora nel specifico andiamo attimino a vedere appunto come avviene un setup tipico di badrock appunto un'installazione world plus e poi del relativo tema allora praticamente a badrock si esegui da riga di comando quindi da riga di comando ci si posiziona all'interno della cartella dove si vuole fare l'installazione e si lancia questo comando che è compose create project root badrock è una stiglia che è recuperabile appunto dal sito e lui fa tutte le sue cose ecco di fatto qui è già installato e basta poche arci basta provvigenare il file il file dottembre il file dottembre e il file per intenderci il vpconfig per intenderci e dove stanno le nostre variabili d'ambienti le variabili i database user name and password per intenderci quindi basterà modificare appunto il dottembre con le variabili di ambiente e dopodiché si potrà tranquillamente fare accedere al sito all'installazione e finalizzare l'installazione tramite il classico processo quindi infatti io potrei vedere che se riaggiono la pagina probabilmente mi fate l'installazione canonica di works naturalmente io qui per comodità avevo già creato un database tramite in MySQL classico database MySQL comunque qua io faccio tutto il processo di installazione canonica di fatto in questo in questo step avendo già tramite compose tirato giù tutte le difendenze li potrei tranquillamente creare il mio kit potrei fare la mia initializzazione kit e di fatto la mia installazione orpese non sarebbe altro che un file composer fondamentalmente un file composer e poco altro naturalmente si dice tutto anche la struttura delle cartelle ma naturalmente tutte le difendenze non verranno mai aggiunta al kit perché appunto poi vengono a scaricare tramite compose quando l'ambiente viene rinizializzato ora qua faccio login e qui voglio far più vedere un attimino la potenza di composer allora io ho fatto l'installazione basa quindi l'installazione basa e lui ti raggiù naturalmente l'ultima versione di volpe scostiamo a 6.02 che è l'ultima versione e cosa faccio ora voglio fare un downgrade voglio tornare alla 5.0 così perché magari il mio tema non girava sulla 6 quindi vado nel file composer.json vado nel brapper di require qui esatto quella versione 6.02 e vado a cercarmi la difendenza di volpe scostiamo a la 6.02 io qui ci metto una versione più meno recente quindi metto la 5.9 mi apro naturalmente il mio terminale e lancio il semplice comando di volpe scostiamo a l'ultima versione quindi praticamente composer andrà a vedere che è stata aggiornata nella difendenza nel file composer.json e farà naturalmente intervedere questo caso era richiesto naturalmente da volpe su un aggiornamento di sistema da un piccolo refresh e quindi la mia versione di volpe scostiamo a punto come definita nel composer.json tornata alla 5.9.0 e viceversa naturalmente si può fare upgrade ora io qui la potrò alla 6.0 e ricarò la solita cosa la potenza di composere è proprio questa nel senso di fatto definendo questo file che è un file.json che è quello che viene aggiunto nel repository cioè gestire la dipendenza esatta di gestire una dipendenza esatta che poi di fatto sarà importata in tutti i nostri environment di stage, produzione e sviluppo, ora poi riporto naturalmente all'ultima produzione e adesso vi faccio vedere invece come installare una dipendenza tersa questo qui naturalmente era come fare downgrade ho fatto vedere fondamentalmente come si fa downgrade o upgrade del core di warp, solo andiamo a vedere come si fa l'installazione di un plugin quindi per fare l'installazione di un plugin basta zare su un vppages e la directory con tutte le indiciziazioni di tutti i plugin fri disponibili si c'è che il plugin che si vuole in questo caso andrò a metter il classic editor, quindi mi copio la stringa, vado nei require metto una virgola e incolo la mia stringa prima di fare, vi faccio magari vedere che la parte di plugin naturalmente non ho niente esatto quindi se a questo punto lancio il mio composerupdate naturalmente qua mi troverò il mio installato classic editor, ecco praticamente perché composer con composer avremo sempre traccia di chi ha messo cosa ma anche avremo sempre un alineamento delle difendenze su tutti e questo diciamo secondo me è uno dei fonti di maggiore forza esattamente, si perché poi naturalmente bisogna è chiaro che in questa presentazione non ho modo di scendere nel tecnico che lo avrei in questo tempo, però naturalmente lavorando, naturalmente su repository git nel nostro caso qui l'unica modifica è l'unica modifica che su repository troveremo è l'aggiornamento di file composer perché poi tutte le altre file che composer ha tirato giù naturalmente sono, vanno a fare in direttore che sono ignorate dal git e quindi questo è il momento che avrei naturalmente i file molto più snelli ed è tutto sotto controllo ok, ora passiamo con il video il secondo video che è il video di installazione Sage, quindi di fatto quella che avete visto è un'installazione Bedrock, ora allo stesso modo, sempre tramite composer, io andrò ad installare Sage che è il nostro il nostro start-up tempo allora quindi questo è naturalmente il tema di default, che si vede con quella con quella pagina e cosa faccio? Prima di tutto Sage ha bisogno di una dipendenza a livello globale che si chiama Acorn anche quello lo potete vedere poi nel PDF che vi daremo che fondamentalmente è una dipendenza che si aggiunge tramite tramite composer che vai a saldare tutta una serie di utili di Laravel per utilizzare appunto i componenti di Laravel all'interno di Sage ok, quindi abbiamo un'esso Acorn, ora potete vedere che possono fare tranquillamente l'installazione mi tolgo il video, quindi di fatto andiamo, navighiamo la materiale di comando dentro la cartella dei teni ecco, dentro la cartella dei teni basta lanciare il comando composer create project, Sage nome cartella, in questo caso io la chiamerò vp come la chiamerò vp-meeting-metach0 e e lancio in video e anche poi la nostra installazione è pronta ecco qua, il termo è installato fondamentalmente quindi vado all'interno della cartella del tema e lancio, ora facciamo un controllo per farli vedere appunto le dipendenze, il tema ha bisogno di node e di yarn che devono essere installati globalmente e troverete anche quello tutto nelle varie guide di appunto di loose Sage quindi si lancia il comando yarn il comando yarn è di fatto scarica tutte le dipendenze che servono a webpack per fare le varie compilazioni di cui ho parlato prima, quindi compilazioni CSS compilazioni JavaScript con tanto, se aggiungono la pagina dei teni a comparto magicamente Sage standard termo, quindi se lo attivo di fatto cambio tema e introdentende, naturalmente sarà tutto rotto perché non ho fatto una build non ho fatto una build quindi devo fare una build, quindi la build è quella azione di yarn che crea un pacchetto di tutti gli assets quindi cosa fa quello va praticamente a prendere tutti i file CSS mai tutti i file termine i file javascript gli preprocessa gli minifica, gli unisce e fa un bundle che va a finire dentro la cartella public che poi appunto il tema andrà a rileggere tramite appunto un file che è stato generato e renderà il tema appunto disponibile ok diciamo che la diciamo tutto il workflow di installazione sia di Bedrock e di Sage sono terminati