DE{CODE}: 2022 — Anul dezvoltatorului WordPress

Nu a existat niciodată un moment mai bun pentru a vă specializa în dezvoltarea WordPress. WordPress continuă să mănânce internetul ca sistem de management al conținutului (CMS) favorit din lume și chiar și cel mai popular CMS fără cap. În această sesiune principală de la DE{CODE} 2022, fondatorul WP Engine și directorul șef de inovare Jason Cohen discută despre provocările și oportunitățile care le așteaptă dezvoltatorilor WordPress și proiectele la care lucrează WP Engine pentru a le ușura viața.

Urmăriți videoclipul complet de mai jos!

Slide-urile sesiunii:

Transcriere text integral

JASON COHEN : Bună ziua și bun venit la DE{CODE}, conferința anuală a WP Engine unde sărbătorim dezvoltatorul WordPress. Numele meu este Jason Cohen și sunt fondatorul WP Engine. Vreau să încep DE{CODE} de anul acesta cu o convingere, și anume că 2022 este anul dezvoltatorului WordPress. Voi explica de ce cred că anul acesta este atât de promițător și de oportunități pentru noi toți și apoi vreau să vorbesc despre cum vă puteți accelera cariera pe această piață.

Deci, permiteți-mi să încep cu o întrebare, fiecare comunitate de dezvoltatori de software este cunoscută pentru ceva, așa că pentru ce sunt cunoscuți dezvoltatorii WordPress? Aș spune că dezvoltatorii WordPress sunt cunoscuți pentru crearea de site-uri web frumoase pe care editorii le iubesc. Deci, iată ce vreau să spun, știm cu toții că există milioane de site-uri web care folosesc WordPress, dar aveți și oameni precum Under Armour, un brand multinațional de îmbrăcăminte care folosește WordPress și angajează dezvoltatori WordPress.

Acum, Under Armour a făcut vânzări de 5 miliarde de dolari anul trecut, așa că nu folosesc WordPress doar pentru că este gratuit. Își pot permite să cumpere orice software doresc. Ei folosesc WordPress pentru că le îndeplinește cerințele și angajează dezvoltatori WordPress pentru că știi cum să iei acele cerințe și să produci site-uri web frumoase, ușor de actualizat. Ca acesta.

Sau National Geographic, este unul dintre cele mai respectate mărci media din lume, iar Nat Geo are nevoie de site-uri web frumoase, ușor de actualizat, cu management sofisticat al activelor digitale, care poate gestiona o experiență bogată în media. Deci, desigur, angajează dezvoltatori WordPress. Acesta este un caz de utilizare pentru care ești faimos. Și cum rămâne cu tehnologia? Ar folosi WordPress o companie modernă de tehnologie?

Da, echipa de la Dropbox poate construi un CMS de la zero dacă ar dori sau ar putea folosi oricare dintre tehnologia Site Builder care apare tot timpul. Dar Dropbox alege să lucreze cu dezvoltatorii WordPress și WordPress pentru părțile site-ului lor care trebuie să fie atractive și ușor de publicat. Dar un caz de utilizare în care echipa de marketing dorește să folosească o tehnologie frontală diferită de WordPress?

Deci vor să folosească WordPress pentru CMS, dar ceva diferit pentru front-end, mai pot folosi WordPress? Desigur, asta este WordPress fără cap. Deci, ei pot face o alegere așa cum a făcut Android Authority și pot merge cu WordPress fără cap. Deci, Android Authority încă folosește WordPress ca CMS pentru a gestiona scriitorii, conținutul, media, toate lucrurile care sunt necesare pentru a gestiona back-end-ul site-ului, dar front-end-ul este gestionat de un cadru diferit.

Și când un brand dorește abordarea fără cap, cum ar fi autoritatea Android, ei apelează în continuare dezvoltatori WordPress pentru că doresc performanța și securitatea unui site web decuplat, sigur, dar au nevoie ca site-ul să se potrivească cu fluxul de lucru de publicare și cu toate celelalte lucruri pe care le are. Ne-am așteptat, în ultimii aproape 20 de ani, că WordPress a alimentat site-ul lor. Și dezvoltatorii WordPress știu cum să facă asta.

A face editorii fericiți este ceea ce dezvoltatorii WordPress au o reputație bine câștigată pentru a face și chiar și concurenții WordPress știu acest lucru. Unele dintre cele mai discutate despre startup-uri și dezvoltare web continuă să vorbească despre WordPress. Când navigați pe site-urile lor, unul dintre lucrurile pe care le vedeți în comun este că există întotdeauna o pagină care prezintă dezvoltatorilor WordPress. Indiferent unde te uiți, toată lumea este interesată de dezvoltatorii WordPress.

De aceea spun că 2022 este anul dezvoltatorului WordPress pentru că ai stăpânit ceea ce are nevoie fiecare editor și acele nevoi nu s-au schimbat, ci doar s-au accelerat. De exemplu, fiecare editor are nevoie de trafic organic de la motoarele de căutare precum Google, desigur că o fac, iar oamenii încă vorbesc despre cum să facă asta tot timpul. Este nou? Nu, evident că nu. În esență, aceleași articole au fost postate de ani și ani, iar dezvoltatorii WordPress sunt experți în a face acest lucru.

Ce zici de testarea A/B? Sau și mai bine, testarea fără cod A/B? Asta e fantezie. Asta e inovator, nu? Acum va trebui să te amesteci și să înveți aceste noi instrumente. Ei bine, cu excepția faptului că nu o faci pentru că faci asta de ani de zile. De exemplu, această idee a obținut finanțare VC cu opt ani în urmă. Nu e nicio schimbare aici. Încă nu există testare fără cod A/B și știți deja cum să faceți toate acestea. Sunteți deja experți în toate acestea. Este frumos.

Mulți dintre voi știu și despre modificările recente în căutarea Google, care utilizează experiența paginii ca factor de clasare. Experiența paginii înseamnă lucruri precum viteza paginii și alte lucruri și este posibil să știți despre acest lucru, de asemenea, ca actualizare Core Web Vitals. A mai făcut Google vreodată modificări de genul acesta la care ai trebuit să reacționezi? Ei bine, da, de fapt tot timpul, nu? Și știi cum să faci asta.

Da, este un instrument nou, dar să faci site-uri web rapid, să fie important nu este nou și Google a folosit viteza paginii ca factor de clasare de mult timp și a încercat să deducă dacă un vizitator al site-ului ar fi mulțumit pentru o lungă perioadă de timp. . Acestea sunt toate lucrurile în care ești deja expert. Deci, într-un fel, lumea nu se schimbă. Și este frumos să sărbătorim, deoarece atunci când vine vorba de a servi editorilor în aceste moduri, dezvoltatorii WordPress sunt deja în fața curbei. Sunteți deja experți.

Dar există și alte aspecte ale dezvoltării web în care văd o schimbare reală. Unde lumea se mișcă rapid. Și de aceea îi sfătuiesc pe dezvoltatorii WordPress să gândească ca un arhitect. Deci un arhitect combină cerințele clientului cu arta. De asemenea, un arhitect combină cerințele și arta cu tehnologia corectă, indiferent dacă aceasta înseamnă materiale de construcție sau software și infrastructură.

Deci, asta înseamnă că trebuie să fii capabil să folosești toată tehnologia disponibilă și asta înseamnă să profiti de noile inovații. Acum, asta poate fi înfricoșător pentru că a trebui să înveți ceva nou poate fi perturbator, dar face și parte din job. Când am decis să fim dezvoltatori de software, unul dintre lucrurile despre software este că se schimbă tot timpul. Și așa că, dacă vom fi buni dezvoltatori de software sau buni arhitecți, trebuie să rămânem la curent cu cele mai recente lucruri, astfel încât să alegem tehnologia potrivită pentru diferitele locuri de muncă pe care le avem.

Așadar, lucruri precum testarea A/B și SEO se pot schimba foarte lent și, în principiu, nu se schimbă deloc, dar tehnologia este și trebuie să fii pe deasupra și despre asta vreau să petrec următoarele 20 de minute. Care sunt unele dintre acele lucruri? Deci, care sunt unele dintre aceste noi schimbări interesante în tehnologie pe care cred că ar trebui să le aruncați o privire, poate chiar să le adoptați? Vreau să vă ofer o privire a ceea ce văd ca fiind focarul schimbărilor interesante în spațiul nostru.

Deci, cea mai mare schimbare a așteptărilor utilizatorilor cu care ar trebui să vă familiarizați se numește experiențe digitale adaptative. Aceasta este ca personalizarea, dar mai mult. Utilizatorii doresc ca aspectul, senzația și funcționalitatea site-ului să se adapteze la mediul și condițiile lor specifice și chiar la istoricul lor, chiar dacă nu se autentifică. Acum, când oferiți o experiență digitală adaptativă personalizată, utilizatorii vor fi mai mulțumiți de site-ul lor și de fapt, există o mulțime de date care, atunci când site-urile web sunt adaptive, convertesc mai bine, oamenii rămân mai mult timp pe site, fac clic pe mai multe link-uri și așa mai departe.

Cu alte cuvinte, ca companie media, mai multe clicuri înseamnă mai multe venituri din reclame. Ca companie de comerț electronic, mai multe conversii înseamnă mai multe venituri. Ca companie de tehnologie sau orice fel de companie care vinde lucruri online, chiar dacă nu este comerț electronic, mai mulți oameni implicați înseamnă mai multe clienți potențiali sau mai multe venituri. Deci, în toate cazurile, o experiență digitală mai adaptabilă, adică clienți mai fericiți, înseamnă literalmente mai multe venituri pentru clienți. De aceea contează atât de mult.

Acum vestea bună pentru noi este că multe dintre progresele web deblochează capacitatea de a oferi aceste experiențe adaptative. Deci, hai să explicăm asta. Să arătăm câteva exemple. Cum funcţionează asta? Deci, iată un exemplu real, o revistă online avea cerința de a utiliza forumurile HubSpot pentru a colecta clienți potențiali. De ce forumuri HubSpot? Deci, forumurile HubSpot folosesc o tehnică numită câmpuri progresive.

Ceea ce înseamnă aceasta este că după ce utilizatorul completează un formular, oferă informațiile poate pentru a descărca o hârtie albă sau pentru a obține în alt mod ceva, HubSpot își amintește că, deci data viitoare când acea persoană dorește să obțină ceva, nu i se cere din nou informațiile respective. Asta înseamnă că persoana are mai multe șanse să obțină mai multe informații, să interacționeze mai mult cu site-ul și să nu fie deranjată.

Acesta este un exemplu grozav de experiență adaptativă. Dar există un compromis. Utilizarea acestui script terță parte, cum ar fi forumurile HubSpot și au existat altele în acest exemplu, a încetinit site-ul web. De fapt, scorul lor pentru dispozitive mobile a fost de doar 40 din 100, ceea ce înseamnă că site-ul lor este lent și înseamnă că nu se vor clasa la fel de bine în SEO. Deci vrei această experiență adaptivă, dar creează o problemă de viteză. Ce faci cu asta?

Deci, aici intervine această nouă tehnică numită Partytown. Așa că Partytown mută scripturile de la terți ca acesta din firul principal al motorului JavaScript al browserului și le încarcă într-un fir separat. Așadar, acest lucru înseamnă că site-ul devine interactiv mult mai rapid, astfel încât utilizatorii să nu fie blocați să întreprindă acțiuni, să interacționeze, iar scorul farului se mută de la 40 la 90 doar prin utilizarea Partytown cu aceeași funcționalitate cool și adaptabilă.

Deci, puteți avea scripturi adaptive care sunt cu adevărat cool, dar lente și să nu fie încet. Asta e tare. Acesta este, ca arhitect, genul de lucruri pe care ar trebui să le faci pentru a face site-urile web ale clienților tăi grozave. Deci, aceasta este o modalitate de a face JavaScript rapid. O altă performanță importantă este media, pe care poate o știți deja, dar așteptați. Așa că oricine, dar mai ales editorii cu o mulțime de media, își dorește imagini frumoase, mari, care să arate grozav.

Dar dacă imaginile sunt pur și simplu mari, atunci sunt lent de descărcat și asta va încetini întregul site, în special pe telefoanele mobile și pe rețelele mobile. Deci acum există noi formate de imagine care arată la fel pentru un om, dar sunt mult mai mici și, prin urmare, se încarcă mult mai repede. Și probabil știți despre unele dintre aceste formate, cum ar fi poate ați auzit de WebP. Dar s-ar putea să nu știți despre AVIF, AVIF, care este chiar mai mic decât WebP, dar încă arată la fel cu ochiul liber.

Deci, simpla trecere la imaginile AVIF poate accelera dramatic acel site de reviste sau chiar orice site. Acum iată chestia amuzantă. Am spus, probabil știi asta. Am făcut o prezentare despre AVIF anul trecut când avea doar câteva luni și acum un an mai târziu, îl folosești? Nu, aproape nimeni nu o folosește. Potrivit W3Techs, mai puțin de 0,1% dintre site-uri folosesc AVIF, chiar și cu WebP, mai puțin de 4% dintre site-uri îl folosesc.

Deci, acestea sunt tehnici care, într-un anumit sens, sunt vechi sau ar trebui cunoscute și totuși ești încă de ultimă oră dacă le folosești. Este o modalitate foarte ușoară de a accelera site-urile web, care, desigur, este bună pentru utilizatori și bună pentru SEO cu formate de imagine, iar oamenii încă nu o fac în general. Acum, puteți descoperi că WordPress nu acceptă AVIF, dar acceptă imagini WebP.

Deci, poate WebP-uri suficient de bune pentru clientul dvs., folosind WordPress obișnuit sau poate acesta este un alt motiv pentru a utiliza WordPress fără cap, deoarece atunci este mult mai ușor să susțineți automat AVIF. Depinde de dvs. să jonglați cu cerințele clienților, să jonglați cu capacitățile tehnice și să vă dați seama care este modalitatea corectă de a pune totul împreună. Dar cred că, ca arhitect, pur și simplu ignorarea acestui lucru nu este o opțiune bună. Cred că ar trebui să dezvolți o tehnică aici, deoarece este o modalitate atât de ușoară de a-ți ajuta clienții.

Deci, să ne uităm la o altă inovație care se întâmplă pe front end, și anume setările utilizatorului pe desktop-uri și telefoane. Există acum aceste noi setări bazate pe web care nu existau în urmă cu cinci ani, iar vizitatorii site-urilor web ale clientului dvs. se așteaptă acum ca aceste setări să fie respectate. Deci, există lucruri precum mișcare redusă, dimensiunea fontului pentru oameni ca mine, care ar prefera ca web-ul să fie un pic mai mare, preferințe pentru modul de lumină și întuneric, indiferent dacă este vorba de un moment al zilei sau este doar o preferință a utilizatorului în orice moment, sau accesibilitate, asigurându-vă că site-urile web funcționează bine chiar și pentru persoanele cu diferite moduri de a interacționa cu web-ul. Poate pentru orbi sau alte circumstanțe speciale uneori pentru reglementare.

Și acest lucru este frumos pentru utilizatori, cred, dar este multă muncă pentru tine, deoarece trebuie să implementezi site-uri care acceptă toate acestea. Și mai este o problemă aici. Când construiți un site care este adaptabil, fie că este vorba de capabilitățile dispozitivului ca acesta sau de alte lucruri, lucruri care depind de utilizator, cum îl testați? Cum vă asigurați că acest lucru va funcționa corect în toate aceste circumstanțe diferite?

Deci, un lucru cu care suntem obișnuiți cu toții, cred că în acest moment este că îmi voi lua site-ul și îl voi testa pentru dimensiunea unui telefon mobil, apoi îl voi testa pentru un iPad și apoi testați-l pentru un laptop, poate testat din nou pentru un ecran super lat, dar sunt deja trei sau patru lucruri pe care am primit un test. Dar acum – ei bine, ce zici în fiecare dintre aceste cazuri, ce se întâmplă dacă dimensiunea fontului este setată cu adevărat mare? Mai arată corect? Testezi asta? Cum rămâne cu modul de lumină versus modul întunecat? Adică de încă 2 ori numărul de lucruri pe care trebuie să le testați.

Deci fiecare dintre aceste lucruri, dimensiunea fontului, modul de lumină, accesibilitatea, utilizarea diferitelor tipuri de browsere, toate acestea multiplică combinațiile de lucruri pe care trebuie să le testați. Deci e cam greu. Deci, pentru unii oameni, asta ajung pentru testarea automată. Poate că unele dintre aceste cazuri pot fi gestionate prin teste automate, mai degrabă decât o ființă umană care se uită la totul de fiecare dată.

Deci, este bine, dar nu este un răspuns complet, deoarece un test automat nu va ști dacă site-ul în modul întunecat arată OK. Acesta este cu adevărat ceva ce o ființă umană trebuie să judece. Deci chestia asta cu testarea este încă un puzzle și voi reveni la el în scurt timp pentru că vă voi arăta următoarea piesă de tehnologie care, printre altele, ajută și la acest puzzle de testare.

Așa că următorul lucru pe care îl voi arăta este ceva foarte frumos pe care personal sunt foarte încântat că ajungem în CSS și HTML, pentru că mi-am dorit asta. Și, de fapt, chiar am construit personal cod pentru a încerca să fac asta în JavaScript, pentru că mi-am dorit atât de mult. Și acum vine în mod nativ la CSS și HTML, ceea ce înseamnă că va fi disponibil peste tot. Și Performant și toate celelalte instrumente îl vor sprijini. Și așa că sunt foarte încântat de asta.

Deci ce este? Deci, este posibil să fiți familiarizat cu interogările media CSS. Deci, acest lucru vă permite să oferiți un aspect sau un aspect diferit în funcție de dimensiunea întregului ecran. Dar acum există ceva nou pentru layout-urile adaptive, care se numește interogări container CSS. Deci, în loc de un aspect care curge diferit din cauza dimensiunii întregului ecran, o singură componentă poate afișa diferit doar în funcție de dimensiunea sa sau doar în funcție de componentele din jurul ei.

Deci, de exemplu, s-ar putea să am o componentă ca cele pe care le vedeți aici, care au o versiune mai largă și una mai îngustă. Acum s-ar putea să am nevoie de versiunea îngustă pe telefon și versiunea largă pe un laptop. Acesta este modul obișnuit în care ne gândim la asta. Dar dacă în versiunea largă am de fapt trei coloane? Deci, în fiecare coloană, vreau un microfon îngust.

Acum vedeți că actualul CSS nu acceptă asta. Spune doar că întregul ecran este lat, așa că ești lat, spre deosebire de da, ecranul poate fi larg, dar ești într-o coloană, așa că trebuie să te comporți ca și cum ai fi pe un telefon. Asta fac interogările containerului. Super entuziasmat de asta. Acum, aceasta este doar o parte dintr-o tendință și mai mare, care este o schimbare la a gândi paginile web, nu ca o pagină web întreagă, ci gândirea la aceasta în termeni de componente. Bucăți dintr-o pagină.

Acum, ca dezvoltator PHP, sunteți obișnuit să separați unele lucruri. Stilurile merg aici, funcțiile merg acolo, layout-urile întregii pagini merg acolo și așa mai departe. Dar trecerea la componente este o schimbare mai mare. Se spune că piesa care se află în interiorul unei pagini ar trebui să fie compusă din aceste componente individuale reutilizabile. Tehnologia de bază a web-ului, cum ar fi CSS și HTML, se îndreaptă către componente, așa cum tocmai ați văzut cu această componentă, cum ar fi să mă gândesc unde ar trebui să se bazeze dimensiunea mea pe mine, nu pe pagina mai largă.

Desigur, puteți vedea acest tip de gândire și în Gutenberg. Deci utilizatorii WordPress nu mai scriu aceste pagini lungi. Ei asamblează blocuri. Blocurile sunt componente. Unități pe care le puteți reutiliza și asambla în orice mod doriți, fie că este vorba de fragmente de conținut, cum ar fi text sau un titlu sau o imagine, sau aspecte precum coloane și file și tot felul de alte lucruri.

Și, desigur, cu editarea completă a site-ului, acest lucru merge și mai departe. Acum, așezarea întregii pagini, de asemenea, cu blocuri care sunt componente, este modul în care o facem cu WordPress, așa că aceasta este o schimbare pe care trebuie să o îmbrățișați ca dezvoltator WordPress pentru a nu rămâne în urmă. Pentru că fie că te uiți la tehnologia de bază, cum ar fi HTML și CSS, fie că te uiți la unde a mers deja WordPress și unde merge cu Gutenberg și editarea completă a site-ului, toate acestea indică faptul că trebuie să te gândești la lucruri din componente, poate chiar să dezvolte lucruri precum componente.

Și acest lucru este adevărat chiar și atunci când te uiți la rețeaua mai largă a dezvoltării frontend, cum ar fi site-urile web fără cap și lumea JavaScript, este exact aceeași poveste. Deci cadrele JavaScript ca acestea, react, view și unghiulare, pe care aproape toată lumea le folosește unul dintre ele, au fost bazate pe componente de la început. Pentru ani. Nu pui lucrurile în fișiere separate, pui componente în fișiere separate și le reutilizați.

Deci, acesta este lucrul pe care, fie că folosești JavaScript cu headless, fie că folosești WordPress sau doar scrii HTML și CSS brut, tot trebuie să te gândești la componente. Deci are multă valoare. Este un fel cum programarea orientată pe obiecte a încapsulat datele și codul. În mod similar, componentele web încapsulează aspectul și senzația, comportamentul, deci și datele și codul și le fac reutilizabile, ceea ce este minunat.

Un alt lucru, pe lângă faptul că sunt reutilizabile și componabile, este că sunt testabile individual. Așadar, aceasta se întoarce la lucrul de testare despre care vorbeam. Deci, puteți lua o componentă, chiar și doar un buton, și apoi o puteți testa în aceste contexte diferite. Cum arată butonul când textul este mare sau mic? Cum arată butonul pe diferite tipuri de browsere? Cum arată butonul în modul de lumină sau în modul întunecat și așa mai departe.

Când testați doar un buton izolat, este mult mai ușor să testați tot felul de combinații, este mai ușor să remediați erori și așa mai departe. Și apoi aveți acest buton frumos reutilizabil pe care nu trebuie să îl testați în continuare după aceea. Deci, având o serie de componente care pot fi testate individual, ceea ce este mai ușor, acum puteți compune pagini care funcționează doar prima dată. Deci, asta face parte din răspunsul din nou la hei, cum testez și construiesc aceste site-uri web care funcționează bine în toate aceste circumstanțe diferite?

Deci componente, este o modalitate ca arhitect, cred că trebuie să abordați site-urile web. Deci, ca dezvoltator WordPress, înțelegeți deja atât de mult din lume. Înțelegi cum să lucrezi cu editorii. Înțelegi cum să le transformi cerințele în viața reală. Înțelegi cum să amesteci codul și arta și cerințele și să faci site-uri web minunate și eficiente.

Trucul este această nouă tehnologie pe care să o înveți și să o introduci, astfel încât, în loc să fii lăsat în urmă, să folosești lucruri precum experiențele adaptive și instrumentele din spatele acestora și componentele pentru a construi aceste lucruri. Prin urmare, la DE{CODE}, prezentările de aici sunt concepute pentru a vă ajuta să faceți exact asta. Deci, la DE{CODE} avem o pistă pentru WordPress fără cap, puteți afla când să folosiți headless pentru un client, când să nu folosiți headless. Avem ateliere pentru a vă ajuta să începeți cu headless de la zero, foarte rapid ca în câteva minute. Așa că, dacă ești curios despre asta, du-te să le verifici.

Avem, de asemenea, breakout-uri pentru comerțul electronic și gestionăm WordPress și alte subiecte. Și sfatul meu este că, pe măsură ce parcurgeți ziua, pe măsură ce vă uitați prin toate aceste sesiuni, să absorbiți tot ce puteți, să luați notițe etc., dar să căutați unul, două sau trei lucruri pe care le spuneți, OK, acelea. sunt lucrurile pe care o să le încerc. O să învăț acele lucruri. O să încerc să aduc acele lucruri într-un proiect. O să devin bun la asta. Poate chiar mă întorc și eu la clienții mei existenți și spun, hei, haideți să vă facem upgrade site-ul pentru a folosi acest lucru.

Așa că fii cu ochii pe care sunt acele câteva lucruri pe care le vei lua și le vei pune în practică ca arhitect. Așa că continuă să încânți acei editori, continuă să te extinzi în noi frontiere, continuă să crești ca arhitect și anul acesta, 2022, va fi cel mai bun an al tău ca dezvoltator WordPress. Mulțumiri.