Gitbaritalian
developer
podcast
9

JAMSTACK Gatsby Strapi e Jigsaw, programmare siti web in modo intelligente

Serie 1
Episodio 9
Durata 23 minuti

Programmare pesante, tirare su una infrastruttura complessa, webserver, database non è sempre la scelta migliore, specie se si vuole creare un semplice sito vetrina. Per farlo im modo semplice ci viene in aiuto il Jamstack Jamstack Javascript Api Markup. Jigsaw o gatsby per creare rapidamente il sito, e un pannello di amministrazione perfetto con strapi senza scrivere una linea di codice. Oggi in questa puntata vi parlo della mia esperienza.

Capitoli 00:00 Intro 01:09 Il nuovo sito del podcast 04:00 Jamstack Javascript Api Markup 07:46 Jigsaw i componenti di Laravel, Markdown per fare il sitoweb senza troppa programmazione 🤓 08:41 Netlify 10:25 Gatsby, programmare in javascript + react per realizzare il sito web 12:59 Il backend? CMS Headless, un pannello di amministrazione del sito, neanche una riga di codice 😆 16:16 Strapi 22:08 Saluti

Links Utili

https://jamstack.org/

https://jigsaw.tighten.co/

https://www.netlify.com/

https://www.gatsbyjs.org/

https://strapi.io/

Contatti @brainrepo su twitter o via mail a info@gitbar.it

Crediti Le sigle sono state prodotte da MondoComputazionale Registrato negli studi di Radio Nuoro Centrale Le musiche da Blan Kytt - RSPN

Trascrizione

Trascrizione automatica realizzata con servizi Amazon AWS Transcribe

benvenuti su bar, il podcast dedicato al mondo dei developer.
In mezzo artigiani in mezzo artisti che ogni giorno infilavano le mani nel fango per creare nel modo più efficace possibile quei prodotti digitali che quotidianamente utilizzando tu eccomi qua, sono mancata una settimana e vi chiedo scusa siete bario? Sono ben repo e mi sto scusando perché in realtà ho saltato l'appuntamento di giovedì scorso l'ho saltato perché sono super impegnato col lavoro e anche questa situazione coronavirus non ha aiutato.
Ma tranquilli, non sono infetto e non ho preparato una vera e propria puntata, anche perché questo periodo sta lavorando per un grosso cliente che mi assorbe il novanta per cento del mio tempo ufficio dalle otto del mattino a mezzanotte e mezzo l'una quindi credetemi, anche volendo non sono riuscito a prepararlo.
Però voglio parlarvi di un ragionamento che ho fatto l'altro giorno quando ho iniziato a pensare di realizzare il nuovo sito di inflitto del podcast ha ad oggi è semplicemente un'installazione di la' ravel buttata bene, però ero cu con una paginetta si interfaccia alle per ottenere le puntate e quindi le informazioni tipo il titolo l'immagine il testo e linkando poi direttamente alla pagina di stryker per l'ascolto e questo va bene.
Però in realtà volevo qualcosa di piu'.
Volevo qualcosa di più perché tutto nasce dalla esigenza è di indicizzare fare un po' odisseo al zitto del podcast e fare un po' di so per cercare di posizionarlo in quella lista di risultati riguardanti appunto un po' di casta di programmazione in italiano.
Per farlo devo produrre i contenuti.
Una delle strategie che ho pensato è quella di generare il transcript caricare i transcript mi permetterebbe di essere indicizzato ancora meglio, però essendo un po' di casa non proprio brevissimo, durando le puntate tra i venti e i trenta minuti, il testo trascritto diventa un pochino lungo è lo spazio di testo dato da riker non permette il caricamento completo, quindi ho pensato di fare semplicemente una pagina per ogni puntata dove si le note dell'episodio la trascrizione, il e tutto quello che riguarda appunto tutte le informazioni dell'episodio che voglio passare.
Quindi in buona sostanza, se vuoi fare il figlio di mark è attualmente una però sta sue roku potrei continuare a tenere un lara belle semplicemente implementare, fare un crud per l'inserimento delle degli episodi e ho pensato che forse tenere un'installazione di lava il solo per fare un sito pseudo statico perche'.
In realtà di questo si tratta alla fine un'impalcatura, ma alla fine dei conti è un sito che cambia una volta a settimana fondamentalmente e cambia solo di quella quella piccola porzione, cioè un episodio in più nella lista del testo e quindi un belle poteva essere sovradimensionato qual era l'alternativa l'alternativa in e' è senza dubbio quella di passare a un'architettura diversa l'architettura è diversa è l'architettura chiamata james park.
Jen stacca questo nome che sembra complesso è in realtà un acronimo molto semplice per jack stack un'architettura che va a generale dei siti statici.
In realtà un sito stack se vogliamo pensare da un sito jen stack ci viene molto semplice pensare alle documentazioni dei linguaggio dei libri.
Più siamo molto spesso sono dei siti gente oppure ai siti che vengono stati nelle dei gis anche quelli il novanta per cento dei casi sono appunto dei siti e fatico un'architettura gesta.
Di cosa si tratta? Si tratta semplicemente di siti o applicazioni che vengono in qualche modo rilasciati, distribuiti attraverso dei file, prenderà utilizzati e che vengono servite attraverso le cdn, quindi non hanno bisogno di serve di un web server per girare in realtà qual'è il processo.
Io ho un motore, alcuni li conosciamo, sono molto famosi.
Jacky.
Li rubo nulla a Sgarbi e ce ne sono una marea.
E cosa fanno? Non fanno altro che prendere i contenuti.
Unirli con un temple è andare a generare una serie di pagine html.
Queste pagine sono statiche, quindi sono dei semplici file HTML, magari CSS, che vengono poi dl.
Quindi innanzitutto si aumenta la performance perché essendo dei viene, essendo file statici a non c'è bisogno che siano passati.
Renderti a Ramstein, per esempio, e non esponendo delle delle chiamate server al pubblico, sono sicuramente più sicuri, sono più economici ed è più facile che scalino.
Questo perché in realtà i costi di hosting su una CDN sono decisamente inferiori a rispetto a tenere web server.
E poi, sa, non hanno tutte le rotture di scatole dovute alla al mantenere un web server del codice che gira rotture di scatole.
Altra cosa importante l'architettura Jack Stack prevede che tutto il contenuto del tuo sito sia su un gate, quindi sia version atto, quindi insomma, posso in qualche modo andare avanti o indietro nella storia del mio sito per cui stiamo fatto qualche fesseria.
Posso tornare indietro? Uno due Comit ripristinare il sito alla versione precedente questa cosa molto importante pero' detto questo voglio realizzare il sito di lo voglio fare creando i contenuti su mark che il modo più facile per crearli tra l'altro è possibile, si chiede le intestazioni dov'è inizializza delle variabili ed ho dei valori alla testa del marta, una valori che poi possono essere interpretati e posizionati in spazi specifici del mio tempio.
Per farlo utilizza un motore, si chiama è usa i componenti di lara Vella è prendendo in pasto una lista di pagine di file down e detto in blade mi va a generare a bill.
Dare un sito statico è che poi io posso andare ad annoiare questa cosa molto interessante.
Questo anche perché in realtà posso riutilizzare parte delle direttive blade che degli elementi brady che mi sono fatto per il sito quando ancora pensavo di volerlo realizzare sulla nave e' semplicemente cambiando il puntatore alle variabili e sarà presto realizzato.
La il Bild si fa chiamando appunto uno script da linea di comando ed è rilasciato in realtà il vero deploy ho intenzione di farlo su net fai è un servizio che ti mette a disposizione una cdn è un sistema di online per non di papà di billings è di sanjay per bill dare il tuo sito quindi tu cosa fai? Tu semplicemente vai a modificare il file, ma da un po' i tuoi templi fai la comit della modifica e uscì subito bit bucket che sono gli hosting di kitt perdite per cui ti kit e automaticamente se colleghi fai questo repository è configuri un file di configurazione appunto di fai ma sono due dighe dove gli dici quale script a eseguire per fare la bild del sito e quale la cartella dove ci sarà il sito il dato né ti fai automaticamente si interfaccia questo deposito rimane in ascolto quindi sa quando tu fai una pusher e il tuo sito e' lo rilascia nella sua cdl, rendendo quindi il sito facilmente raggiungibile all'indirizzo il tuo progetto punto appunto come in realtà è possibile associare dei dns per cui alla fine riuscirai ad avere un sito col nome dominio appunto il punto con quello che sono, per cui così hai presto ho fatto il tuo sito.
In realtà Gibson non è la soluzione più potente in questi giorni ha avuto modo di vedere Gatsby e devo dire che me ne sono innamorato.
Questo perché jigsaw permette il building di uno scrive di un sito da file march down a meno che tu scriva dei componenti specifici.
Gatsby invece ragiona in modo diverso, si basa se è scritte usare act e tu non fai altro che costruire delle pagine che se non sono altro che componenti e ubriaca.
E poi ci sono tutta una serie di che permettono a Gatsby di interfacciarsi con una serie di che è questo il passaggio interessante di Gatsby se permette di ricevere in ingresso dei farmaci da paura bene Gatsby di permettere di ricevere dei farmaci da una delle piazze i e delle che implementano graff, quella e' tutta un'altra serie di sorgenti che si sono davvero tantissime.
Tutte queste sorgenti vanno a confluire dentro il il script di sgarbi che andando quindi eseguendo va a generare tutta una serie di pagine statiche.
Sono pagine statiche, quindi anche, diciamo più simpatiche ai motori di ricerca, quindi non deve fare in nessuna è server side rendering, cosa che invece dovresti fare le facce non si dorme freak se vuoi che si indicizzato nel modo migliore.
Bene, questa è più o meno come rilascero' il sito, quindi userò questo perché è molto è più semplice.
Anche se un domani potrei rifare tutto utilizzando Gatsby.
Questo perché questo perché in realtà non preclude la possibilità di estendere il sito di bar qualora volesse spenderlo.
Beh, sarebbe interessante anche inserire adesso non so quali, ma anche dei contenuti strutturati che possono venire dai AI Oh oh, sorgenti più complesse.
E beh, in quel caso ad otterrei Gatsby.
Mentre però pensavo a una ipotetica adozione di Gatsby, che, ripeto, non sarà nella fase zero.
Però intanto mi porto avanti con lavoro e prova a immaginarlo.
Potrei avere un problema oggi a generare i contenuti di Barra sono solo io.
È in realtà per il podcast A per il sito, al podcast.
Penso che sarò sempre solo io Non non ci saranno delle esigenze così stringenti.
Però se volessi proiettare la mia visione in modo più più più ampio e portare questo approccio anche ad alcuni clienti, per esempio aiuto finanziario che sto seguendo adesso, questi questo periodo Beh, potrebbe essere interessante.
Qual è il problema? In realtà è la fase di generazione di contenuti e io non posso chiedere al mio cliente di scrivere dei file finché li genero io va bene, ma se dovesse chiederlo a lui probabilmente avrei dei problemi.
E quindi mentre ragionavo su questa cosa sono approdato nel fantastico mondo dei CMS headless chiamati così perché sono dei CMS senza testa.
Quindi sono dei content management system che non hanno però il lato di fronte qua all'inizio quando vi ho parlato di stacca Gem diligence tac e gli ho detto che uno dei vantaggi che aveva è appunto l'essere, il nostro sito è completamente disaccoppiare dal motore di generazione contenuti e chi ha avuto modo di lottare con WordPress sa quanto può essere interessante riuscire ad avere una M s.
Quindi un motore di gestione contenuti di Isacco piatto col fronte sa quanto in inferno è gestire questi due elementi insieme in un unico monolite, tanto che WordPress spesso WordPress punto comunque commerciale quello che vende in realtà il motore l'applicazione per generare sia già stata sta andando è andato da qualche anno in quella direzione, creando wordpress punto commi javascript e quindi un per la generazione di contenuti che poi vanno a confluire appunto essere vendere sul motore standard di cuore fatta questa parentesi.
Però, in realtà io non adoro molto Walt presso questo piccolo inciso che ci tengo a dirlo, è fatta questa questa parentesi.
Dico che ci sono una serie di prodotti commerciali molto interessanti che offrono dei pannelli di controllo per la generazione di contenuti.
Uno di questi è con te Full che ti mette a disposizione.
Appunto, queste questa schermate descrivere in modo semplice e contenuti senza dover creare dei file.
Il market town, naturalmente.
Io cosa vado a vedere? Vado a cercarmi delle soluzioni.
Open-source offrì dove ci posso mettere le mani, giocare, piegarle a mia utilità.
E tu ami ami ami a mio piacimento.
E sono approdato su questa piattaforma che non conoscevo e che si chiama strappi, strappi e un'applicazione fatta in javascript è che non fa altro che generare un emesse e delle quindi ti permette di creare da una parte la struttura del contenuto.
Quindi che ne so? La mia puntata del podcast ha un titolo una srl ha un fa il una descrizione, un transcript un'immagine.
Io costruisco la mia struttura, la salvo automaticamente.
Ho un sistema pronto per fare il crud.
Quindi il cliente appendete d'élite della dell'episodio e con un'interfaccia abbastanza semplice.
La cosa che più mi ha stupito e realtà è che questi dati oliva da inserire dentro strappi strappi che tra l'altro può girare con una serie di database da si mongo db passando per maestre quello e' possibile in una volta inseriti questi dati vengono esposti da strappi attraverso una hai e resta oppure attraverso un'epigrafe quella cosa molto interessante.
Questo perché in realtà dall'altro lato gaza di cui vi ho parlato prima, si può interfacciare in fase di building con queste per estrapolare i contenuti nel dare il sito simpatico e su una cdl e quindi questa soluzione mi ha un po' stupito un'altra, cosa che mi è piaciuta tantissimo di strappi la possibilità di costruire dei delle strutture di contenuto articolate come si fa? Beh, per ogni contenuto si può si possono costruire dei campi, quindi se il mio contenuto un oggetto immaginiamo le come delle proprietà e le proprietà sono testo data le proprietà classiche.
Insomma è andata bene, ma la cosa più importante in realtà e che si possono costruire dei componenti dei componenti che vanno in qualche modo house a strutturare delle proprieta' complesse.
Vi faccio un esempio immaginiamo di voler fare il sito degli alberghi della città di Lione perché è un esempio un po' banale, ma per capirci bene la struttura sarà nome, descrizione e poi avro' galleria fotografica Bene, se cosa andro' a fare, andrò a fare un componente galleria fotografica che permette l'inserimento di una lista di fotografia e descrizione.
Anzi miniatura fotografia grande e descritto equivale a costruire il componente galleria che contiene una lista di componente.
Foto dalla galleria Il componente foto della gallery conterrà una foto e la descrizione e la la la.
Una volta che andrò a creare questa cosa lato quindi pannello di controllo cosa vedrò? Vedro' un forma con una lista con un tastino più cliccando su quel taschino più mi aprirà un'interfaccia dove potro' dare la mia miniatura approdare la mia foto grande inserire la mia didascalia con piu' sotto per inserire l'elemento successivo.
Questa cosa è fantastica anche perché si può realizzare senza neanche codice un'altra cosa importante di strappi e che mi ha affascinato.
Credetemi, è stata la possibilità di gestire i diritti in modo molto preciso.
Questa cosa mi è piaciuta tantissimo.
Questo perché in realtà strappi permette anche un sistema di autenticazione, il che puoi fare.
Insomma con un out è e quindi lei piace.
Poi ti rispondono a seconda dell'utente e ti possono rispondere che è sulla lista degli alberghi.
Lo vedono solo gli utenti di questo tipo autenticati per via discorrendo.
Quindi in realtà ha un sacco di funzionalità e soprattutto in un'accoppiata gatsby strappi mi permette di a disaccoppiare il motore di generazione, il contenuto dal motore di visualizzazione.
Quindi posso cambiare completamente la visualizzazione, la struttura del sito senza modificare il mio cms.
Posso dei contenuti su ne siti diversi ancora più importante e quindi insomma so no ecco come.
Cosa vi posso dire? Sono senza dubbio delle tecnologie.
Molto interessante.
Ritornando al piccolo in questa fase il fitto di bar sarà fatto con jigsaw e dei file mark darcy però non escludo un domani di implementare sempre sul jen stacca questa architettura più spero che la puntata vi sia piaciuta.
Lo so, è un po' diversa dalle solite è una fortuna essere riuscito a registrare credetti e anche per questa settimana e tutto.
Mi scuso di nuovo per aver saltato episodio della settimana scorsa e vi ricordo che se mi fa piacere potete iscrivervi con il vostro client.
Porca sta a il podcast.
Davvero? In Italia.
Altra cosa importante per qualunque comunicazione segnalazione potete trovarmi su Twitter a Heat flebo in Repubblica come cervello? Beh, poco me deposito e nulla.
Ci sentiamo la prossima settimana.
Bar.
Il circolo dei full Stack E' Bello.
Per una volta a settimana ci troviamo davanti a due birre e compra il ceppo.
Parliamo linguaggi e tecniche di sviluppo web, di metodologie e di strumenti immancabili nella cassetta degli attrezzi dei fusti.
Ho bisogno di una mano. Aiutami a rendere più conosciuto il nostro podcast. Parlane con gli amici o con i colleghi e iscriviti usando Apple Podast o Google Podcast. Questa tua azione ci aiuterà a salire nella classifica dei podcast di tecnologia ed essere utili anche a qualcun’altro. Se non ti va, amici come prima😄