DE{CODE}: 2022—Anno dello sviluppatore di WordPress

Non c'è mai stato un momento migliore per specializzarsi nello sviluppo di WordPress. WordPress continua a divorare Internet come il sistema di gestione dei contenuti (CMS) preferito al mondo e persino il CMS senza testa più popolare. In questa sessione principale di DE{CODE} 2022, Jason Cohen, fondatore e Chief Innovation Officer di WP Engine, discute le sfide e le opportunità che si prospettano per gli sviluppatori di WordPress e i progetti su cui WP Engine sta lavorando per semplificare la loro vita.

Guarda il video completo qui sotto!

Slide della sessione:

Trascrizione del testo completo

JASON COHEN : Salve e benvenuti a DE{CODE}, la conferenza annuale di WP Engine in cui celebriamo lo sviluppatore di WordPress. Mi chiamo Jason Cohen e sono il fondatore di WP Engine. Voglio dare il via al DE{CODE} di quest'anno con una convinzione, ovvero che il 2022 è l'anno dello sviluppatore di WordPress. Spiegherò perché credo che quest'anno abbia così tante promesse e opportunità per tutti noi e poi voglio parlare di come puoi accelerare la tua carriera in questo mercato.

Quindi vorrei iniziare con una domanda, ogni comunità di sviluppatori di software è nota per qualcosa, quindi per cosa sono noti gli sviluppatori di WordPress? Direi che gli sviluppatori di WordPress sono noti per creare bellissimi siti Web che gli editori adorano. Quindi ecco cosa intendo, sappiamo tutti che ci sono milioni di siti web là fuori che usano WordPress ma ci sono anche persone come Under Armour, un marchio multinazionale di abbigliamento che usa WordPress e assume sviluppatori WordPress.

Ora Under Armour ha realizzato vendite per 5 miliardi di dollari l'anno scorso, quindi non usano WordPress solo perché è gratuito. Possono permettersi di acquistare qualsiasi software desiderino. Usano WordPress perché soddisfa i loro requisiti e impiegano sviluppatori WordPress perché sai come soddisfare tali requisiti e produrre siti Web belli e facili da aggiornare. Come questo.

O National Geographic, è uno dei marchi multimediali più venerati al mondo e Nat Geo ha bisogno di siti Web belli e facili da aggiornare con una sofisticata gestione delle risorse digitali in grado di gestire un'esperienza ricca di contenuti multimediali. Quindi ovviamente assumono sviluppatori di WordPress. È un caso d'uso per cui sei famoso. E per quanto riguarda la tecnologia? Una moderna azienda tecnologica userebbe WordPress?

Sì, il team di Dropbox può creare un CMS da zero se lo desidera oppure può utilizzare qualsiasi tecnologia di Site Builder che appare di continuo. Ma Dropbox sceglie di lavorare con WordPress e gli sviluppatori di WordPress per le parti del loro sito che devono essere attraenti e facili da pubblicare. Che dire di un caso d'uso in cui il team di marketing desidera utilizzare una tecnologia front-end diversa da WordPress?

Quindi vogliono usare WordPress per il CMS ma qualcosa di diverso per il front-end, possono ancora usare WordPress? Ovviamente, questo è WordPress headless. Quindi possono fare una scelta come ha fatto Android Authority e andare con WordPress headless. Quindi Android Authority utilizza ancora WordPress come CMS per gestire gli scrittori, i contenuti, i media, tutto ciò che è necessario per gestire il back-end del sito Web, ma il front-end è gestito da un framework diverso.

E quando un marchio vuole l'approccio senza testa, come l'autorità di Android, chiama comunque gli sviluppatori di WordPress perché vogliono le prestazioni e la sicurezza di un sito web disaccoppiato, certo, ma hanno bisogno che il sito corrisponda al loro flusso di lavoro di pubblicazione e a tutte le altre cose che ' Ci aspettiamo che negli ultimi quasi 20 anni WordPress abbia alimentato il loro sito web. E gli sviluppatori di WordPress sanno come farlo.

Rendere felici gli editori è ciò che gli sviluppatori di WordPress hanno una meritata reputazione per fare e anche i concorrenti di WordPress lo sanno. Alcune delle startup e dello sviluppo web più chiacchierate continuano a parlare di WordPress. Quando navighi sui loro siti Web, una delle cose che vedi in comune è che c'è sempre una pagina che propone agli sviluppatori di WordPress. Non importa dove guardi, tutti sono interessati agli sviluppatori di WordPress.

Ecco perché dico che il 2022 è l'anno dello sviluppatore di WordPress perché hai imparato ciò di cui ogni editore ha bisogno e quelle esigenze non sono cambiate, hanno solo accelerato. Ad esempio, ogni editore ha bisogno di traffico organico da motori di ricerca come Google, ovviamente lo fanno, e le persone parlano ancora di come farlo tutto il tempo. È nuovo? No, ovviamente no. Essenzialmente gli stessi articoli sono stati pubblicati per anni e anni e gli sviluppatori di WordPress sono esperti in questo.

Che ne dici di un test A/B? O meglio ancora, nessun test del codice A/B? È fantastico. È innovativo, vero? Ora dovrai arrampicarti e imparare questi nuovi strumenti. Beh, solo che non lo fai perché lo fai da anni. Ad esempio, anche questa idea ha ottenuto finanziamenti VC otto anni fa. Ad esempio, non ci sono cambiamenti qui. Non ci sono ancora i test A/B No Code e sai già come fare tutto questo. Siete già esperti in tutto questo. Bello.

Molti di voi conoscono anche i recenti cambiamenti nella ricerca di Google che utilizza l'esperienza della pagina come fattore di ranking. L'esperienza della pagina significa cose come la velocità della pagina e altre cose e potresti anche saperlo come l'aggiornamento di Core Web Vitals. Google ha mai apportato modifiche come questa prima a cui hai dovuto reagire? Beh, sì, tutto il tempo in realtà, giusto? E tu sai come farlo.

Sì, è uno strumento nuovo ma rendere veloci i siti web, visto che è importante non è una novità e Google ha utilizzato la velocità della pagina come fattore di ranking per molto tempo e ha cercato di dedurre se un visitatore del sito sarebbe soddisfatto per molto tempo . Queste sono tutte cose in cui sei già esperto. Quindi, in un certo senso, il mondo non cambia. Ed è bello festeggiare perché quando si tratta di servire gli editori in questi modi, gli sviluppatori di WordPress sono già all'avanguardia. Siete già esperti.

Ma ci sono altri aspetti dello sviluppo web in cui vedo un vero cambiamento. Dove il mondo sta cambiando rapidamente. Ed è per questo che consiglio agli sviluppatori di WordPress di pensare come un architetto. Quindi un architetto combina le esigenze del cliente con l'arte. Un architetto combina anche requisiti e arte con la tecnologia corretta, sia che si tratti di materiali da costruzione o software e infrastrutture.

Ciò significa che devi essere in grado di utilizzare tutta la tecnologia disponibile e ciò significa sfruttare le nuove innovazioni. Ora può essere spaventoso perché dover imparare qualcosa di nuovo può essere dirompente ma fa anche parte del lavoro. Quando abbiamo deciso di essere sviluppatori di software, una delle cose del software è che cambia continuamente. Quindi, se vogliamo essere bravi sviluppatori di software o bravi architetti, dobbiamo stare al passo con le ultime novità in modo da scegliere la tecnologia giusta per i diversi lavori che svolgiamo.

Quindi cose come i test A/B e la SEO potrebbero cambiare molto lentamente e fondamentalmente non cambiare affatto, ma la tecnologia lo è e devi essere al top ed è di questo che voglio passare i prossimi 20 minuti a parlare. Quali sono alcune di queste cose? Quindi quali sono alcuni di questi nuovi entusiasmanti cambiamenti nella tecnologia che penso dovresti dare un'occhiata e forse anche adottare? Voglio darvi un assaggio di quello che vedo come il focolaio di interessanti cambiamenti nel nostro spazio.

Quindi il più grande cambiamento nelle aspettative degli utenti con cui dovresti familiarizzare si chiama esperienze digitali adattive. Questo è come la personalizzazione, ma di più. Gli utenti desiderano che l'aspetto e la funzionalità del sito si adattino al loro ambiente e condizioni specifici e persino alla loro cronologia anche se non effettuano l'accesso. Ora, quando offri un'esperienza digitale adattiva personalizzata, gli utenti saranno più soddisfatti del loro sito Web e infatti, ci sono un sacco di dati che quando i siti Web sono adattivi, convertono meglio, le persone rimangono sul sito più a lungo, fanno clic su più collegamenti e così via.

In altre parole, come società di media, più clic significano maggiori entrate pubblicitarie. Come azienda di e-commerce, più conversioni significano più entrate. Come azienda tecnologica o qualsiasi tipo di azienda che vende cose online, anche se non si tratta di e-commerce, più persone coinvolte significano più contatti o maggiori entrate. Quindi, in tutti i casi, un'esperienza digitale più adattiva, che significa clienti più felici, significa letteralmente maggiori entrate per i clienti. Ecco perché è così importante.

Ora la buona notizia per noi è che molti dei progressi del Web sbloccano la capacità di offrire queste esperienze adattive. Quindi spieghiamo questo. Mostriamo alcuni esempi. Come funziona? Quindi ecco un esempio reale, una rivista online aveva l'obbligo di utilizzare i forum HubSpot per raccogliere lead. Perché i forum HubSpot? Quindi i forum HubSpot utilizzano una tecnica chiamata campi progressivi.

Ciò significa che dopo che l'utente ha compilato un modulo, fornito le informazioni magari per scaricare un white paper o ottenere qualcosa in altro modo, HubSpot lo ricorda, quindi la prossima volta che quella persona vuole ottenere qualcosa, non gli vengono chieste di nuovo quelle informazioni. Ciò significa che è più probabile che la persona ottenga maggiori informazioni, interagisca maggiormente con il sito e non sia disturbata.

Questo è un ottimo esempio di esperienza adattiva. Ma c'è un compromesso. L'utilizzo di questo script di terze parti, come i forum HubSpot e ce n'erano altri in questo esempio, ha rallentato il sito web. In effetti, il loro punteggio mobile faro era solo di 40 su 100, il che significa che il loro sito è lento e significa che non si classificheranno così bene nella SEO. Quindi vuoi questa esperienza adattiva ma sta causando un problema di velocità. Cosa fai a riguardo?

Quindi è qui che entra in gioco questa nuova tecnica chiamata Partytown. Quindi Partytown sposta script di terze parti come questo fuori dal thread principale del motore JavaScript del browser e lo carica in un thread separato. Ciò significa che il sito diventa interattivo molto più rapidamente, quindi agli utenti non viene impedito di intraprendere azioni, interagire e il punteggio del faro è passato da 40 a 90 semplicemente utilizzando Partytown con la stessa fantastica funzionalità adattiva.

Quindi puoi avere gli script adattivi che sono davvero fantastici ma lenti e renderli non lenti. Questo è figo. Questo è, come architetto, il tipo di cose che dovresti fare per rendere grandiosi i siti web dei tuoi clienti. Quindi questo è un modo per rendere veloce JavaScript. Un altro grande pezzo di performance sono i media, che potresti già conoscere, ma aspetta. Quindi chiunque, ma soprattutto gli editori con molti media, desidera immagini belle e grandi che abbiano un bell'aspetto.

Ma se le immagini sono semplicemente grandi, allora sono lente da scaricare e questo rallenterà l'intero sito, specialmente sui telefoni cellulari e sulle reti mobili. Quindi ora ci sono nuovi formati di immagine che sembrano uguali a un essere umano ma sono molto più piccoli e quindi si caricano molto più velocemente. E probabilmente conosci alcuni di questi formati, come forse hai sentito parlare di WebP. Ma potresti non sapere di AVIF, AVIF, che è persino più piccolo di WebP ma sembra ancora lo stesso ad occhio nudo.

Quindi il solo passaggio alle immagini AVIF può velocizzare notevolmente il sito di quella rivista o qualsiasi altro sito. Ora ecco la cosa divertente. Ho detto, probabilmente lo sai. Ho fatto una presentazione su AVIF l'anno scorso quando aveva solo pochi mesi e ora un anno dopo, lo stai usando? No, quasi nessuno lo usa. Secondo W3Techs, meno dello 0,1% dei siti Web utilizza AVIF anche con WebP, meno del 4% dei siti Web lo utilizza.

Quindi queste sono tecniche che in un certo senso sono vecchie o dovrebbero essere conosciute e tuttavia sei ancora all'avanguardia se le usi. È un modo davvero semplice per velocizzare i siti Web, il che, ovviamente, è positivo per gli utenti e per la SEO con formati di immagini e le persone generalmente non lo fanno ancora. Ora potresti scoprire che WordPress non supporta AVIF ma supporta le immagini WebP.

Quindi forse WebP è abbastanza buono per il tuo cliente, usando il normale WordPress o forse questo è un altro motivo per usare WordPress senza testa perché è molto più facile supportare automaticamente AVIF. Sta a te destreggiarti tra i requisiti del cliente, le capacità tecniche e capire qual è il modo giusto per metterli insieme. Ma penso che come architetto, semplicemente ignorare tutto questo non sia una buona opzione. Penso che dovresti sviluppare qualche tecnica qui perché è un modo così semplice per aiutare i tuoi clienti.

Quindi diamo un'occhiata a un'altra innovazione che sta avvenendo sul front-end, ovvero le impostazioni utente su desktop e telefoni. Ora ci sono queste nuove impostazioni basate sul Web che non esistevano cinque anni fa e i visitatori dei siti Web dei tuoi clienti ora si aspettano che tali impostazioni vengano rispettate. Quindi ci sono cose come il movimento ridotto, la dimensione del carattere per le persone come me che preferirebbero che il Web fosse tutto un po' più grande, le preferenze della modalità chiara e scura, sia che vada dall'ora del giorno o sia solo una preferenza dell'utente in qualsiasi momento, o l'accessibilità, assicurarsi che i siti web funzionino bene anche per le persone con vari modi di interagire con il web. Forse per i non vedenti o altre circostanze speciali a volte per regolamento.

E questo va bene per gli utenti, immagino, ma per te è molto impegnativo perché devi implementare siti che supportano tutto questo. E qui c'è un altro problema. Quando costruisci un sito che è adattivo, che si tratti di funzionalità del dispositivo come questa o altre cose, cose che dipendono dall'utente, come lo provi? Come ti assicuri che funzioni correttamente in tutte queste diverse circostanze?

Quindi, come una cosa a cui siamo tutti abituati, penso che a questo punto prenderò il mio sito e lo testerò per le dimensioni di un telefono cellulare, quindi lo testerò per un iPad, e poi provalo per un laptop, forse testato di nuovo per uno schermo super ampio ma sono già tre o quattro cose che ho testato. Ma ora– beh, che dire in ciascuno di questi casi, e se la dimensione del carattere fosse davvero grande? Sembra ancora giusto? Lo stai testando? Che dire della modalità luce rispetto alla modalità oscura? Questo è un altro numero di volte 2 di cose che devi testare.

Quindi ognuna di queste cose, dimensione del carattere, modalità luce, accessibilità, utilizzo di diversi tipi di browser, tutto moltiplica le combinazioni di cose che devi testare. Quindi è piuttosto difficile. Quindi per alcune persone questo è ciò che raggiungono per i test automatizzati. Forse alcuni di questi casi possono essere gestiti attraverso test automatizzati piuttosto che un essere umano che guarda tutto ogni volta.

Quindi va bene, ma non è una risposta completa perché un test automatico non saprà se il sito in modalità oscura sembra a posto. Questo è davvero qualcosa che un essere umano deve giudicare. Quindi questa cosa del test è ancora un enigma e ci tornerò tra un po' perché vi mostrerò il prossimo pezzo di tecnologia che tra le altre cose aiuta anche con questo enigma del test.

Quindi la prossima cosa che mostrerò è qualcosa di veramente carino che sono personalmente molto entusiasta di poter inserire CSS e HTML, perché l'ho desiderato. E infatti, ho persino creato personalmente il codice per provare a farlo in JavaScript, perché lo desideravo così tanto. E ora sta arrivando in modo nativo su CSS e HTML, il che significa che sarà disponibile ovunque. E Performant e tutti gli altri strumenti lo supporteranno. E quindi sono molto entusiasta di questo.

Quindi, cos'è? Quindi potresti avere familiarità con le media query CSS. Quindi questo ti consente di offrire un layout o un aspetto diverso in base alle dimensioni dell'intero schermo. Ma ora c'è qualcosa di nuovo per i layout adattivi che si chiama query contenitore CSS. Quindi, invece di un layout che scorre in modo diverso a causa delle dimensioni dell'intero schermo, un singolo componente può essere visualizzato in modo diverso solo in base alle sue dimensioni o solo in base ai componenti che lo circondano.

Quindi, per esempio, potrei avere un componente come quelli che vedete qui, che hanno una versione più ampia e una versione più stretta. Ora potrei aver bisogno della versione stretta sul telefono e della versione larga su un laptop. Questo è il solito modo in cui ci pensiamo. Ma cosa succede se nella versione ampia ho effettivamente tre colonne? Quindi in ogni colonna voglio il microfono stretto.

Ora vedi che l'attuale CSS non lo supporta. Dice solo che l'intero schermo è largo, quindi sei largo invece di sì, lo schermo potrebbe essere largo ma sei in una colonna, quindi devi comunque comportarti come se fossi su un telefono. Questo è ciò che fanno le query del contenitore. Super entusiasta di questo. Ora, questa è solo una parte di una tendenza ancora più ampia che è un cambiamento nel pensare alle pagine web, non come un'intera pagina web ma pensandole in termini di componenti. Pezzi di una pagina.

Ora come sviluppatore PHP, sei abituato a separare alcune cose. Gli stili vanno qui, le funzioni vanno là, interi layout di pagina vanno là e così via. Ma il passaggio ai componenti è un cambiamento più grande. Sta dicendo che il pezzo è all'interno di una pagina dovrebbe essere composto in questi singoli componenti riutilizzabili. La tecnologia alla base del Web come CSS e HTML si sta spostando verso componenti come hai appena visto con questo componente come pensare dove la mia dimensione dovrebbe essere basata su me stesso e non sulla pagina più ampia.

Puoi anche vedere questo tipo di pensiero ovviamente in Gutenberg. Quindi gli utenti di WordPress non scrivono più queste lunghe pagine. Stanno assemblando blocchi. I blocchi sono componenti. Unità che puoi riutilizzare e assemblare come preferisci, che si tratti di parti di contenuto come testo o un titolo o un'immagine o layout come colonne e schede e tutti i tipi di altre cose.

E ovviamente con l'editing completo del sito questo va ancora oltre. Ora il layout dell'intera pagina, anche con blocchi che sono componenti, è il modo in cui lo stiamo facendo con WordPress, quindi questo è un cambiamento che devi accettare come sviluppatore di WordPress per non rimanere indietro. Perché se lo guardi dalla tecnologia sottostante come HTML e CSS o se guardi dove WordPress è già andato e dove sta andando con Gutenberg e l'editing completo del sito, tutto ciò indica che devi pensare alle cose nei componenti, forse anche sviluppare cose come componenti.

E questo è vero anche quando guardi alla più ampia rete di sviluppo frontend come nei siti web senza testa e nel mondo di JavaScript, è esattamente la stessa storia. Quindi framework JavaScript come questi, react, view e angular, che quasi tutti usano uno di loro, sono stati basati su componenti sin dall'inizio. Per anni. Non metti le cose in file separati, metti i componenti in file separati e li riutilizzi.

Quindi questa è la cosa che se usi JavaScript con headless o usi WordPress o scrivi semplicemente HTML e CSS raw, devi ancora pensare ai componenti. Quindi ha molto valore. È un po' come il modo in cui la programmazione orientata agli oggetti incapsula dati e codice. Allo stesso modo, i componenti web incapsulano l'aspetto grafico, il comportamento, quindi anche i dati e il codice, e li rendono riutilizzabili, il che è fantastico.

Un'altra cosa, oltre ad essere riutilizzabili e componibili, è che sono testabili singolarmente. Quindi questo torna alla cosa dei test di cui stavamo parlando. Quindi puoi prendere un componente, anche solo un pulsante diciamo, e poi puoi testarlo in questi diversi contesti. Che aspetto ha il pulsante quando il testo è grande o piccolo? Che aspetto ha il pulsante su diversi tipi di browser? Qual è l'aspetto del pulsante in modalità luce o modalità oscura e così via.

Quando si testa solo un pulsante in isolamento è molto più facile testare tutti i tipi di combinazioni, è più facile correggere i bug e così via. E poi hai questo bel pulsante riutilizzabile che non devi continuare a testare dopo. Quindi, avendo una serie di componenti testabili individualmente, il che è più semplice, ora puoi comporre pagine che funzionano solo la prima volta. Quindi questa è di nuovo parte della risposta a hey, come faccio a testare e costruire questi siti Web che funzionano bene in tutte queste diverse circostanze?

Quindi componenti, è un modo come architetto penso che tu abbia bisogno di avvicinarti ai siti web. Quindi, come sviluppatore di WordPress, capisci già così tanto del mondo. Sai come lavorare con gli editori. Capisci come convertire le loro esigenze nella vita reale. Capisci come mescolare codice, arte e requisiti e creare siti Web meravigliosi ed efficaci.

Il trucco è questa nuova tecnologia da imparare e da portare in modo che invece di essere lasciato indietro, stai sfruttando cose come esperienze adattive, e gli strumenti dietro quelle e componenti per costruire queste cose. E così in DE{CODE}, le presentazioni qui sono progettate per aiutarti a fare proprio questo. Quindi in DE{CODE} abbiamo una traccia per WordPress senza testa, puoi imparare quando usare senza testa per un cliente, quando non usare senza testa. Abbiamo workshop per aiutarti a iniziare con headless da zero, molto velocemente come in pochi minuti. Quindi, se sei curioso di questo, vai a dare un'occhiata.

Abbiamo anche breakout per l'e-commerce e gestiamo WordPress e altri argomenti. E il mio consiglio è che durante la giornata, mentre esamini tutte queste sessioni, assorbi ciò che puoi, prendi appunti, ecc. ma cerca quella, due o tre cose che dici, OK, quelle sono le cose che proverò. Imparerò queste cose. Proverò a portare queste cose in un progetto. Diventerò bravo in questo. Forse torno anche dai miei clienti esistenti e dico, ehi, aggiorniamo il tuo sito per usarlo.

Quindi tieni d'occhio quali sono quelle poche cose che porterai via e metterai effettivamente in pratica come architetto. Quindi continua a deliziare quegli editori, continua ad espanderti verso nuove frontiere, continua a crescere come architetto e quest'anno, il 2022, sarà il tuo anno migliore come sviluppatore WordPress. Grazie.