JAMstack demistificante: un'intervista a Phil Hawskworth

Alcuni di voi potrebbero aver sentito parlare di JAMstack e forse anche di come passare da WordPress a Hugo, ma JAMstack è un'opzione praticabile per qualsiasi tipo di progetto?

Ho parlato con Phil Hawksworth, un ingegnere front-end che (dopo 9 anni di lavoro nelle agenzie è tornato a lavorare su un prodotto standalone) ora si sta concentrando sullo sviluppo di strategie per le tecnologie JAMstack per rendere la creazione per il web più semplice, veloce e più sicuro. Phil ospiterà anche JAM_stack ldn, una conferenza dedicata ai generatori di siti statici, serverless e JAMstack a Londra, dal 9 al 10 luglio.

Vitaly: Quindi ciao e benvenuto a una delle nostre conversazioni con i nostri relatori a Smashing Conf e persone generalmente simpatiche. Potresti ricordare quelle volte in cui FTP era una cosa importante e forse stai ancora implementando il motivo per cui FTP è uno spazio perfettamente sicuro, quindi non devi preoccuparti di questo. Ma le modifiche sono elevate che non stai più utilizzando FTP e invece passa a flussi di lavoro basati su Git e probabilmente alla distribuzione continua. Tutti questi fischietti e campanelli fantasiosi. E quindi oggi sono molto felice di dare il benvenuto a Phil Hawksworth che sta attualmente lavorando a Netlify, Relazioni con gli sviluppatori [non udibile 00:10:00]. Ciao Fil. Come va oggi?

Phil: Sto benissimo, come stai Vitaly? È bello vederti.

Vitaly: Aw, sto andando alla grande. È sempre un piacere vederti. Sei come un raggio di sole che trasmette Netlify e Jump Stack e tutto il resto.

Fil: Ci provo. Non sono nemmeno marchiato, che occasione persa.

Vitaly: Va bene, va bene. Ma devi dirmelo, quindi quella gemma o jen o jeet, tipo, jem? È jem?

Phil: Marmellata. È marmellata. È tutta una questione di marmellata.

Vitaly: È tutta marmellata. Quindi il JAMstack. Per sviluppatori o designer, in realtà non ho mai sentito il termine prima. Se volessi magari riassumere cos'è e perché è buono e quali sono i vantaggi in primo luogo. Perché mai vorresti passare dal tuo vecchio stack tradizionale a JAMstack. Forse potresti riassumerlo brevemente.

Phil: Fammi vedere se posso provare perché si è tentati di dire, JAMstack, JAM sta per Javascript, API e mockup. Ma questo di per sé non spiega molto, semplicemente sapendo cosa rappresenta. Quindi, in realtà, JAMstack riguarda un modo per distribuire e servire siti Web che non si basano su un server di origine, non si basano su richieste che colpiscono continuamente un server attivo.

Phil: Quindi potresti avere più familiarità con stack come lo stack LAMP che era Linux, Apache, MySQL e PHP, quello era il tipo di stack che serviva il tuo sito lì. Con JAMstack, diventa un po' diverso perché ci siamo spostati di un livello, allontanandoci dal server e avvicinandoci al browser, quindi sta pensando molto a entrare in un browser il più velocemente possibile e quindi utilizzare le tecnologie nel browser per migliorarlo e aumentarlo in seguito. Quindi JAMstack è tutto incentrato sul pre-rendering dei siti, inserirlo nel browser e poi magari migliorarlo, aumentarlo, l'esperienza con Javascript in esecuzione nel tuo browser, magari fare richieste alle API e quel genere di cose.

Phil: Quindi questo è il modello, cercare di evitare di avere un server che devi mantenere perché so che mantenere un server è difficile. Non so voi, ma ho molti siti che sono andati via quando ho voltato le spalle a loro per alcuni anni. Avevo bisogno di aggiornare PHP, il che significava che dovevo aggiornare la versione di Linux che ho fatto una volta in una luna blu. Quindi mantenere i server è difficile, quindi l'idea di JAMstack è cercare di rendere il più semplice possibile servire i siti come risorse statiche e quindi sfruttare al massimo tutte le API e le incapacità del browser per fare l'aumento e fare più cose con loro lì.

Vitaly: Giusto, ha senso. Bene, in effetti, ci siamo trasferiti a JAMstack 2 anni fa o giù di lì.

Phil: Due anni?

Vitaly: Sì, è stato un bel viaggio per noi. E, naturalmente, abbiamo imparato alcune lezioni lungo la strada. Ma mi chiedo, diresti che essenzialmente ogni progetto potrebbe trarre vantaggio in qualche modo dallo spostamento o dallo spostamento di alcune parti di esso su JAMstack o tipo, dove vedi i suoi limiti? È qualcosa che potenzialmente ogni sviluppatore potrebbe utilizzare in un progetto o è qualcosa che è in qualche modo dedicato a un particolare gruppo di siti Web o un gruppo di progetti?

Phil: Sì, voglio dire, è allettante dire, oh sì, puoi usarlo per tutto, ma penso che dovresti stare attento a dirlo su qualsiasi tecnologia. Sai, devi davvero scegliere i casi d'uso e assicurarti che siano adattati bene. Direi il primo istinto quando pensi a un sito JAMstack e magari pensi a qualcosa che viene servito come asset statico, magari direttamente da una CDN. Potresti pensare che va bene solo per i siti che non cambiano molto spesso, sono citazione su citazione, statici, non cambiano. Ma in realtà, non è proprio così perché ora esistono così tanti strumenti che possono ridurre l'attrito nell'implementazione delle cose.

Phil: Puoi distribuire molte volte al giorno, o molte volte all'ora se lo desideri e far sembrare le cose molto più dinamiche di quanto avrebbero potuto fare prima. Quindi alcuni di quei casi d'uso in cui pensi che non sarebbero appropriati; anche quelli entrano effettivamente nell'ovile. Il momento in cui diventa difficile, forse, è quando creiamo siti che hanno molte molte pagine, molte centinaia di migliaia o molti milioni di pagine perché il modello JAMstack ha davvero molto senso quando puoi pre-generare il tuo sito quindi potresti utilizzare un generatore di siti statici. Quelli sono davvero in voga al momento; quelli sono davvero molto popolari.

Phil: Ma ovviamente, devono fare un lavoro ogni volta che distribuiscono un aggiornamento, quindi se hai un sito, magari come un sito di giornali, che ha molti milioni di pagine, il lavoro necessario per rigenerarlo può essere abbastanza, sai, può richiedere molto tempo, quindi è allora che inizi a imbatterti in alcuni dei limiti di dove JAMstack può essere, in qualche modo, semplicemente utilizzato. Puoi iniziare a diventare un po' furbo e iniziare a aggirarlo se, sai, sei molto molto furbo, ma introduce sicuramente alcune sfide.

Phil: Una delle cose che sto iniziando a vedere da una varietà di diversi generatori di siti statici come Gatsby per esempio o React Static, e anche Hugo. I team dietro quei generatori di siti statici stanno iniziando a esplorare i modi in cui puoi eseguire la generazione progressiva delle pagine, quindi in altre parole, non ridistribuisci l'intero sito o rigenera l'intero sito ogni volta che qualcosa cambia, ma prova a trovare modi per fare build incrementali. È una specie di problema impegnativo da superare, ma al momento si sta lavorando su questo in modo che aiuterà anche a cercare di abbattere quella barriera. Ma, certamente al momento, trovare modi per utilizzare un sito JAMstack per un sito Web che ha molti milioni di pagine o molte centinaia di migliaia di pagine, è qui che può essere un po' difficile in questo momento.

Vitaly: Oh, è interessante. Quindi in realtà l'idea di essere quindi al servizio di un div dello stato che hai ed essenzialmente che qualunque cosa devi costruire, come un nuovo portale, deve essere in qualche modo impaginata, quindi è interessante vedere che ciò accada. Perché anche tu, solo di recente, penso che due settimane fa, è uscito un articolo di Jason Pamental in cui l'idea era in realtà molto simile in cui avresti effettivamente caricato i caratteri, quindi hai caricato la prima pagina di cui hai bisogno e poi carica il secondo e poi li unisci in modo da creare un nuovo carattere, come anche il caricamento incrementale del carattere.

Fil: Interessante.

Vitaly: Sarebbe davvero interessante esplorarlo.

Phil: Sì, e non è solo tanto il caricamento, è la generazione-

Vitaly: La generazione, la costruzione.

Phil: Sì, esattamente.

Vitaly: Ho capito. Ma quali pensi siano le sfide comuni che la maggior parte degli sviluppatori ha? Beh, voglio dire, prima lasciami tornare indietro. Se non hai mai lavorato su JAMstack prima e sei molto a tuo agio e soddisfatto del tuo stack LAMP e volevi forse esplorare le possibilità e i vantaggi come la sicurezza e le prestazioni di JAMstack. Come inizieresti effettivamente? Cosa sposteresti, cosa significa cambiare il flusso di lavoro?

Phil: Quindi, le modifiche al flusso di lavoro possono effettivamente essere piuttosto profonde perché stai portando via molta dell'infrastruttura da cui normalmente dipenderesti e dici che in realtà possiamo farla finita e iniziare a distribuire le cose direttamente su una CDN. Ma in termini di come qualcuno potrebbe iniziare a sperimentare questo, è probabile che stiano già utilizzando alcuni degli aspetti di questo. Sai, anche sui modi tradizionali di costruire cose per il web.

Phil: Se pensi a come costruire qualcosa sullo stack LAMP, è probabile che ci siano nel tuo PHP lì, stai facendo cose come scrivere un modello che estrae i dati da una fonte di dati, in questo caso, il database MySQL o qualcosa del genere del database, rendendo queste cose in vista e poi ricevendole servite. Ed è un po' simile a come funzionano i generatori di siti statici. Hanno modelli, raccolgono dati da qualche parte che potrebbe essere una sorta di dati strutturati in file o potrebbe colpire una sorta di database o un'API di contenuto. In ogni caso, sta acquisendo dati, combinandoli con modelli, generando visualizzazioni e l'unica differenza è che non lo fa su richiesta, lo fa in anticipo. Quindi, alcuni dei passaggi logici in quel tipo di passaggi cognitivi per uno sviluppatore potrebbero non essere così enormi.

Phil: Il cambiamento più grande sta nel pensare a come distribuire le cose. Perché in realtà ciò che stai implementando è la tua totalità delle risorse create e renderizzate ogni volta che vuoi eseguire un'implementazione. Ciò inizia a portare cose come la gestione del contenuto e la gestione del codice tutte nello stesso posto in modo che cose come il controllo visivo su tutte queste cose insieme. Quindi inizia a essere un modo leggermente diverso di pensare a come potresti sviluppare e gestire i siti e il contenuto al suo interno. Quindi ci sono alcuni cambiamenti lì. Ma la cosa bella è che molti generatori di siti statici possono essere abbastanza semplici per iniziare a sperimentare e la cosa bella è che non hai bisogno di un sacco di infrastrutture per farlo. Quindi la cosa bella è che puoi davvero iniziare a costruire le cose direttamente sulla tua macchina locale. Stai eseguendo un generatore di siti statici direttamente sulla tua macchina e puoi avere un'idea davvero chiara di quale sarà il risultato senza doverti appoggiare a molte altre infrastrutture.

Phil: Quindi quel tipo di primo passo, la rampa, può essere abbastanza superficiale per iniziare a dire "beh, proverò questo particolare set di strumenti. Posso eseguirli localmente". E avrai una buona certezza che quando distribuirai l'output di quello da qualche parte, sarà esattamente lo stesso in cui lo distribuirai come sarebbe localmente. Questa è una delle cose che amo del rendering di cose statiche perché non dipendi da molte infrastrutture e parti mobili per servirle. Puoi guardarli sul server statico sulla tua macchina e pensare: "sì, è così che funzionerà quando si spegne su una CDN".

Vitaly: Mm-hmm (affermativo); E anche l'infrastruttura quando guardiamo, ad esempio, al modo in cui costruiamo il singolo [non udibile 00:10:07], e c'è un numero enorme di opzioni su ciò che potresti fare. Per il server, per il client e tutto il resto.

Fil: Sì.

Vitaly: E quindi, penso, nel nostro caso, perché stiamo costruendo uno scheletro che viene distribuito direttamente tramite CDI con contenuti e tutto e migliora con Javascript. In realtà era abbastanza ragionevole e tranquillo, non direi facile, ma aveva senso passare a quel tipo di configurazione. Perché alla fine, è solo il contenuto che lascia la pagina. È solo HTML con alcune aree di commento e casella di ricerca e poche altre cose. Ma se ti stai muovendo verso un'applicazione davvero autonoma, forse anche un'applicazione finanziaria, l'online banking, questo genere di cose. Pensi ancora che JAMstack sarebbe una buona opzione da considerare se stai avendo qualcosa che richiede molta logica? Ha bisogno di un server o no?

Phil: Beh, odio tirare fuori la vecchia frase, "dipende". Ma un po' dipende. Detto questo, ci sono molte applicazioni che funzionano altrettanto bene essendo un'applicazione Javascript come avere effettivamente un componente lato servizio. Lo dico con una certa cautela perché sono un po' vecchio stile quando si tratta di sviluppo web e mi piace molto inserire le cose nel browser come HTML il più possibile e quindi avere una filigrana molto alta da cui si migliora progressivamente da. Quindi personalmente non mi piace fare tutto in Javascript e spedire semplicemente un tag body vuoto e quindi eseguire tutto tramite Javascript.

Phil: Detto questo, a volte è perfettamente accettabile. Se stai pensando a un certo tipo di applicazione che, ovviamente, dipenderebbe fortemente da Javascript e conosci il tuo pubblico. Questo può essere del tutto ragionevole. Ci sono cose che sono state spedite di recente. In realtà sto pensando a qualcosa che è stato spedito a Google IO perché, ad esempio, il team di Chrome ha messo insieme un gioco che era molto pesantemente Javascript e che funzionava magnificamente in modo statico. Ci sono molti casi d'uso in cui può funzionare.

Phil: Tornando al tuo esempio finanziario, lavoravo, il mio primo vero lavoro in realtà era mettere i numeri sugli schermi per consentire ai trader di scambiare usando le tecnologie web e questo era prima dei socket web, era prima dell'Ajax, era prima di qualsiasi cosa davvero è stato utile per aiutarti a farlo ed è piuttosto impegnativo, ma più recentemente faresti molte cose del genere in Javascript e questo ha perfettamente senso. Puoi iniziare a fare richieste sicure alle API direttamente dal browser. Ora ci sono molti modelli per eseguire l'autenticazione e l'autorizzazione direttamente dal tuo browser. Quindi, in molti modi, questo può semplificare lo stack per le istituzioni finanziarie che vogliono costruire alcune di queste cose perché il modo in cui possono disaccoppiare alcune di queste cose può renderle molto più gestibili. Quindi penserei sicuramente che il modello JAMstack potrebbe funzionare perfettamente anche in quello scenario.

Vitaly: Ok, quindi forse torneremo ora per esplorare quel mondo di JAMstack e front-end. Di cosa sei più eccitato in questi giorni, Phil? Se guardi JAMstack e il front-end in generale, è qualcosa che ti tiene davvero sveglio la notte quando ti svegli la mattina sperando che sì, ci lavorerò un giorno. Un giorno lo farò. Hai [diafonia 00:13:33]

Phil: Sì, e questo è il tipo di cosa in cui la tua risposta può essere diversa giorno dopo giorno perché sembra che questo mondo si muova così velocemente. E questo di per sé è una delle cose che mi eccita così tanto. Ora che stiamo iniziando a vedere che le API del browser iniziano a progredire davvero e il tipo di cose che possiamo fare direttamente nel browser senza doverle implementare noi stessi. È un po' eccitante per me. Sono ancora molto un duffer quando si tratta di SVG. Dovrei spiegare la parola duffer, se qualcuno che non è inglese e sta guardando questo, significa uno sciocco. Significa che sono molto dietro la curva.

Phil: Ma mi ritrovo a voler davvero fare di più con gli SVG e le animazioni sono cose su cui sono solo molto indietro e voglio giocarci. Ma cose come le API del browser, che si tratti di cose per offline o per migliorare le prestazioni e in particolare al momento il modo in cui il caricamento dei caratteri sembra essere sempre più accessibile in modo che possiamo iniziare a creare davvero cose che visivamente sono molto ricche e più vicine a cosa potremmo voler fare con la tipografia. Sono un po' un secchione per quella roba, mi piace quel genere di cose, quindi voglio giocarci sempre di più.

Vitaly: Allora Phil, parlando di JAMstack conf a Londra. Puoi anche spiegare in poche parole di cosa si tratterà, qual è il focus e per chi è e qual è il tuo ruolo lì? Solo dietro le quinte, curando il contenuto e tutto il resto. Qual è il tuo ruolo lì?

Phil: Quindi ho avuto la parte divertente del lavoro. Quindi ho avuto l'opportunità di uscire e trovare relatori e trovare contenuti interessanti, quindi sono davvero entusiasta di come i programmi si uniscono. Abbiamo persone come Chris Coia che parleranno di potenziare gli sviluppatori front-end e di quanto possiamo fare con le tecnologie front-end ora basate su questo modello JAMstack. Abbiamo persone come Jake Archibald e Surma del team di Google Chrome che parleranno di cose come le prestazioni nel front-end e dei modi in cui possiamo davvero offrire esperienze di prestazioni elevate con hosting statico o infrastruttura o codice che viene eseguito direttamente in il browser.

Phil: Avremo anche Yuna Kravitz che parlerà di cose che hanno a che fare con CSS e Houdini e tutto questo genere di cose. E molto altro ancora. Parleremo anche di cose che hanno a che fare con il cambiamento culturale che un modello JAMstack può avere sulla tua organizzazione e sui tuoi progetti in modo che raggiunga davvero ovunque. Quindi sono un po' eccitato per questo. Avrò anche la possibilità di presentare tutte queste persone perché mi hanno permesso di scatenarmi e di essere anche l'MC, quindi questo significa che posso parlare con queste persone e fare alcune domande e questo genere di cose. Quindi penso che dovrebbe essere molto interessante per chiunque sia interessato allo sviluppo front-end e anche a nuovi modelli per distribuire progetti sul web in modo davvero efficiente.

Vitaly: Oh, quindi ti piacciono i riflettori sul palco, eh?

Phil: Sono un cercatore di attenzione. Dovresti saperlo ormai, Vitaly.

Vitaly: Oh, in realtà ho sempre pensato che fossi una persona molto umile, gentile e gentile, a quanto pare ero...

Phil: È un atto, è un atto.

Vitaly: Va bene, va bene. Phil, ci incontreremo tra un po', oh in realtà, domani.

Phil: Ci vediamo presto per un altro evento ma per il resto ci vediamo a luglio, nono e decimo luglio.

Vitaly: [non udibile 00:16:52] Quindi, con questo in mente, grazie Phil e firmando. Ciao ciao a tutti.

Phil: A presto.

Questo è un involucro!

Non vediamo l'ora di accogliere Phil alla SmashingConf Toronto 2019, con una sessione live su JAMstack. Ci piacerebbe vederti anche lì!

Facci sapere se trovi utile questa serie di interviste e chi vorresti che intervistassimo, o quali argomenti vorresti che trattassimo e ci occuperemo subito!