Demistificarea JAMstack: un interviu cu Phil Hawskworth

Unii dintre voi s-ar putea să fi auzit de JAMstack și poate chiar despre cum să treceți de la WordPress la Hugo, dar este JAMstack o opțiune viabilă pentru orice tip de proiect?

Am vorbit cu Phil Hawksworth, un inginer front-end care (după 9 ani de lucru la agenții a revenit să lucreze la un produs independent) se concentrează acum pe dezvoltarea de strategii pentru tehnologiile JAMstack pentru a face construirea pentru web mai simplă, mai rapidă și mai mult. sigur. Phil va fi, de asemenea, co-găzduire JAM_stack ldn, o conferință dedicată generatoarelor de site-uri statice, serverless și JAMstack la Londra, în perioada 9-10 iulie.

Vitaly: Salutare și bine ați venit la una dintre conversațiile noastre cu vorbitorii noștri de la Smashing Conf și cu oameni drăguți în general. S-ar putea să vă amintiți acele vremuri în care FTP era un lucru important și poate că de fapt încă vă desfășurați de ce FTP este un spațiu perfect sigur, așa că nu trebuie să vă faceți griji pentru asta. Dar schimbările sunt mari, că nu mai utilizați FTP și, în schimb, treceți la fluxuri de lucru bazate pe Git și, probabil, la implementare continuă. Toate aceste fluiere și clopote fanteziste. Și așa că astăzi sunt foarte fericit să-i urez bun venit lui Phil Hawksworth, care lucrează de fapt la Netlify, Relații cu dezvoltatorii [inaudible 00:10:00]. Salut Phil. Cum te simți azi?

Phil: Sunt grozav, ce mai faci Vitaly? Ma bucur sa te vad.

Vitaly: O, mă descurc grozav. Este întotdeauna o plăcere să te văd. Ești ca un soare care transmite Netlify și Jump Stack și tot.

Phil: Încerc. Nici măcar nu sunt marcat, ce ocazie ratată.

Vitaly: În regulă, în regulă. Dar trebuie să-mi spui, așa că acea bijuterie sau jen sau jeet, cum ar fi, jem? Este jem?

Phil: Jam. Este dulceata. Totul tine de dulceata.

Vitaly: Totul e gem. Deci, JAMstack. Pentru dezvoltatori sau designeri, de fapt nu am auzit niciodată termenul înainte. Dacă ați fi vrut să rezumați poate ce este și de ce este bun și care sunt beneficiile în primul rând. De ce ați dori vreodată să treceți de la stiva dvs. tradițională și bună la JAMstack. Poate ai putea rezuma pe scurt.

Phil: Lasă-mă să văd dacă pot încerca, pentru că este tentant să spun doar, JAMstack, JAM înseamnă Javascript, API-uri și machetă. Dar asta în sine nu explică prea multe, doar știind ce înseamnă. Deci, într-adevăr, JAMstack se referă la un mod de a implementa și de a servi site-uri web care nu se bazează pe un server de origine, nu se bazează pe solicitările care lovesc un server activ tot timpul.

Phil: Așa că s-ar putea să fiți mai familiarizați cu stive precum stiva LAMP care era Linux, Apache, MySQL și PHP, acesta era genul de stivă care servea site-ul dvs. acolo. Cu JAMstack, devine puțin diferit, deoarece ne-am cam mutat la un nivel, departe de server și mai aproape de browser, așa că se gândește mult la intrarea într-un browser cât mai repede posibil și apoi la utilizarea tehnologiilor din browser pentru a sporiți-l și sporiți-l mai târziu. Așadar, JAMstack se referă la pre-rendarea site-urilor, introducerea lui în browser și apoi, poate, îmbunătățirea acestuia, creșterea acestuia, experiența cu Javascript care rulează în browserul dvs., poate trimiterea de solicitări către API-uri și așa ceva.

Phil: Așadar, acesta este modelul, încercând să scapi de la un server pe care trebuie să-l întreținem pentru că știu că întreținerea unui server este dificilă. Nu știu despre tine, dar am o mulțime de site-uri care au dispărut când tocmai le-am întors spatele de câțiva ani. Aveam nevoie să fac upgrade PHP, ceea ce însemna că trebuia să actualizez versiunea de Linux pe care am făcut-o o dată pe lună albastră. Așadar, întreținerea serverelor este dificilă, așa că ideea JAMstack-ului este să încerce să fie cât mai simplu posibil să servească site-urile ca active statice și apoi să profite la maximum de toate API-urile și incapacitățile browserului pentru a face augmentare și a face mai multe lucruri cu ei acolo.

Vitaly: Corect, are sens. Ei bine, de fapt, ne-am mutat la JAMstack acum 2 ani și ceva acum.

Phil: Doi ani?

Vitaly: Da, a fost o călătorie pentru noi. Și, desigur, am învățat câteva lecții pe parcurs. Dar mă întreb, ați spune că, în esență, fiecare proiect ar putea beneficia într-un fel de la mutarea sau mutarea unor părți ale acestuia în JAMstack sau, unde vedeți limitările acestuia? Este ceva pe care, potențial, fiecare dezvoltator l-ar putea folosi într-un proiect sau este ceva care este oarecum dedicat unui anumit grup de site-uri web sau unui grup de proiecte?

Phil: Da, vreau să spun, este tentant să spui, oh, da, îl poți folosi pentru orice, dar cred că ar trebui să fii atent când spui asta despre orice tehnologie. Știi, chiar trebuie să alegi cazurile de utilizare și să te asiguri că sunt bine adaptate. Aș spune primul instinct atunci când te gândești la un site JAMstack și poate te gândești la ceva care este servit ca active statice, poate direct de la un CDN. S-ar putea să vă gândiți, ei bine, e bine doar pentru site-urile care nu se schimbă foarte des, sunt citate pe citate, statice, nu se schimbă. Dar, de fapt, nu este chiar așa, deoarece există atât de multe instrumente acum care pot reduce frecarea în implementarea lucrurilor.

Phil: Puteți implementa de multe ori pe zi sau de multe ori pe oră, dacă doriți, și faceți ca lucrurile să pară mult mai dinamice decât ar fi putut fi înainte. Deci, unele dintre acele cazuri de utilizare în care crezi că nu ar fi potrivite; chiar și aceia intră în stâlp. Momentul în care devine provocator, probabil, este atunci când creăm site-uri care au multe multe pagini, multe sute de mii sau multe milioane de pagini, deoarece modelul JAMstack are într-adevăr foarte mult sens atunci când vă puteți pre-genera site-ul. deci este posibil să utilizați un generator de site static. Alea chiar au în vogă în acest moment; acestea sunt cu adevărat populare.

Phil: Dar, desigur, trebuie să facă ceva de lucru de fiecare dată când implementează o actualizare, așa că dacă aveți un site, poate ca un site de ziare, care are multe milioane de pagini, munca necesară pentru a-l regenera. poate fi destul de, știi, poate dura mult timp, așa că atunci începi să te lovești de unele dintre limitările în care JAMstack poate fi, într-un fel, simplu utilizat. Poți începe să devii un pic viclean și să începi să rezolvi asta dacă, știi, ești foarte, foarte viclean, dar cu siguranță introduce niște provocări.

Phil: Unul dintre lucrurile pe care încep să le văd de la o varietate de generatoare de site-uri statice, cum ar fi Gatsby, de exemplu, sau React Static, și, de asemenea, Hugo. Echipele din spatele acelor generatori statici de site-uri încep să exploreze modalități prin care puteți face generarea progresivă a paginilor, astfel încât, cu alte cuvinte, nu reinstalați întregul site sau regenerați întregul site de fiecare dată când ceva se schimbă, ci încercați să găsiți modalități. pentru a face build-uri incrementale. Este un fel de o problemă dificilă de depășit, dar se lucrează în acest moment, așa că va ajuta să încercăm și să distrugem această barieră. Dar, cu siguranță în acest moment, găsirea modalităților de a utiliza un site JAMstack pentru un site web care are multe milioane de pagini sau multe sute de mii de pagini, acolo poate fi puțin dificil acum.

Vitaly: Oh, e interesant. Deci, de fapt, ideea de a fi atunci pentru a servi o div din starea pe care o ai și, în esență, că orice trebuie să construiești, ca un portal nou, trebuie să fie oarecum paginat în el, așa că este interesant să vezi că acest lucru se întâmplă. Pentru că, de asemenea, recent, cred că acum două săptămâni, a apărut un articol de Jason Pamental în care ideea era de fapt foarte asemănătoare, în care ați încărca fonturile, apoi încărcați prima pagină de care aveți nevoie și apoi încărcați pe al doilea și apoi le îmbinați într-un mod pentru a crea un font nou, cum ar fi și încărcarea incrementală a fontului.

Phil: Interesant.

Vitaly: Ar fi foarte interesant să explorezi asta.

Phil: Da, și nu este doar atât de mult de încărcare, ci de generație...

Vitaly: Generația, construcția.

Phil: Da, exact.

Vitaly: Am înțeles. Dar care crezi că sunt provocările comune pe care le au majoritatea dezvoltatorilor? Ei bine, vreau să spun, lasă-mă să mă întorc mai întâi. Dacă nu ați mai lucrat niciodată la JAMstack și sunteți foarte confortabil și mulțumit de stiva dvs. LAMP și ați vrut să explorați posibilitățile și avantajele precum securitatea și performanța JAMstack. Cum ai începe de fapt? Ce ai muta, ce înseamnă schimbarea fluxului de lucru?

Phil: Deci, schimbările aduse fluxului de lucru pot fi de fapt destul de profunde, deoarece luați o mare parte din infrastructura de care ați depinde în mod normal și spuneți că putem scăpa de asta și începem să implementăm lucrurile direct pe un CDN. Dar în ceea ce privește modul în care cineva ar putea începe să experimenteze cu asta, sunt șanse să folosească deja unele dintre aspectele acestui lucru. Știi, chiar și în mod tradițional de a construi lucruri pentru web.

Phil: Dacă te gândești la modul în care ai putea construi ceva pe stiva LAMP, există șanse în PHP-ul tău acolo, faci lucruri cum ar fi să scrii un șablon care preia date dintr-o sursă de date, în acest caz, baza de date MySQL sau un fel a bazei de date, redând acele lucruri în vedere și apoi oferindu-le servicii. Și asta este oarecum similar cu modul în care funcționează generatoarele statice de site. Au șabloane, preiau date de undeva care ar putea fi un fel de date structurate în fișiere sau ar putea atinge un fel de bază de date sau un API de conținut. Oricum ar fi, este preluarea datelor, combinarea acestor date cu șabloane, generarea de vizualizări și singura diferență este că nu face asta la cerere, ci face asta înainte de timp. Deci, unii dintre pașii logici din acest tip de pași cognitivi pentru un dezvoltator ar putea să nu fie de fapt atât de mari.

Phil: Cea mai mare schimbare constă în a te gândi la modul în care implementezi lucrurile. Pentru că, de fapt, ceea ce implementați sunt activele dvs. construite, redate, de fiecare dată când doriți să faceți o implementare. Asta începe să aducă lucruri precum gestionarea conținutului și gestionarea codului, toate în același loc, astfel încât lucruri precum controlul viziunii asupra tuturor acestor lucruri împreună. Așa că începe să fie un mod ușor diferit de a gândi cum ați putea dezvolta și gestiona site-urile și conținutul din ele. Deci sunt câteva schimbări acolo. Dar lucrul bun este că o mulțime de generatoare de site-uri statice pot fi destul de simple pentru a începe să experimentezi, iar lucrul plăcut este că nu ai nevoie de o mulțime de infrastructură pentru a face asta. Deci, lucrul bun este că puteți începe cu adevărat să construiți lucruri chiar pe mașina dvs. locală. Executați un generator de site static chiar pe mașina dvs. și puteți obține o idee foarte bună a rezultatului, fără a fi nevoie să vă bazați pe o mulțime de alte infrastructuri.

Phil: Așa că genul ăsta de prim pas, pe rampă, poate fi destul de superficial pentru ca tu să începi să spui: „Ei bine, voi încerca acest set special de instrumente. Le pot rula local.” Și veți avea încredere că atunci când veți implementa ieșirea acestuia undeva, aceasta va fi exact aceeași în cazul în care o implementați ca și la nivel local. Acesta este unul dintre lucrurile care îmi place la redarea lucrurilor care sunt statice, deoarece nu depinzi de o mulțime de infrastructură și piese mobile pentru a le servi. Puteți să vă uitați la ele pe serverul static de pe propria mașină și să vă gândiți: „da, așa va funcționa atunci când va trece la un CDN”.

Vitaly: Mm-hmm (afirmativ); Și, de asemenea, infrastructura atunci când ne uităm, de exemplu, la modul în care construim single [inaudible 00:10:07], și există un număr mare de opțiuni de ceea ce ați putea face. Pentru server, pentru client și tot ce se află între ele.

Phil: Da.

Vitaly: Și așa, cred, în cazul nostru, pentru că construim un schelet și servește direct prin CDI cu conținut și totul și îmbunătățit cu Javascript. De fapt, a fost destul de rezonabil și destul de, nu aș spune ușor, dar avea sens să trecem la acest tip de configurație. Pentru că până la urmă este doar conținut care pleacă pe pagină. Este doar HTML cu câteva zone de comentarii și casetă de căutare și alte câteva lucruri. Dar dacă te îndrepți către aplicații cu adevărat de sine stătătoare, poate chiar aplicații financiare, online banking, așa ceva. Crezi totuși că JAMstack ar fi o opțiune bună de luat în considerare acolo dacă ai ceva care necesită multă logică? Are nevoie de server sau nu?

Phil: Ei bine, urăsc să scot la trap vechea frază, „depinde”. Dar depinde un pic. Acestea fiind spuse, există o mulțime de aplicații care funcționează la fel de bine fiind o aplicație Javascript, precum și având de fapt o componentă de serviciu. Spun asta cu o oarecare prudență pentru că sunt puțin mai vechi când vine vorba de dezvoltare web și îmi place foarte mult să introduc lucrurile în browser ca HTML cât mai mult posibil și apoi să am un filigran foarte mare de unde îmbunătățiți progresiv. din. Așa că personal nu-mi place să fac totul în Javascript și să trimit doar o etichetă de corp goală și apoi să rulez totul prin Javascript.

Phil: Acestea fiind spuse, sunt uneori unde este perfect acceptabil. Dacă vă gândiți la un anumit tip de aplicație care, desigur, ar depinde în mare măsură de Javascript și vă cunoașteți publicul. Asta poate fi complet rezonabil. Sunt lucruri care au fost expediate recent. De fapt, mă gândesc la ceva care a fost livrat la Google IO pentru, de exemplu, echipa Chrome a creat un joc care a fost foarte puternic Javascript și care a funcționat frumos servit static. Există o mulțime de cazuri de utilizare în care acest lucru poate funcționa.

Phil: Revenind la exemplul dvs. financiar, obișnuiam să lucram, de fapt, primul meu loc de muncă, a fost să pun numere pe ecrane pentru ca comercianții să schimbe folosind tehnologii web și asta a fost înainte de socket-uri web, a fost înainte de Ajax, a fost înainte de orice. care a fost util pentru a vă ajuta să faceți asta și este un fel de provocator, dar mai recent, ați face o mulțime de astfel de lucruri în Javascript și asta are perfect sens. Puteți începe să faceți solicitări securizate către API-uri chiar din browser. Există o mulțime de modele acum pentru a face autentificare și autorizare direct din browser. Deci, în multe feluri, acest lucru poate simplifica stiva pentru instituțiile financiare care doresc să construiască unele dintre aceste lucruri, deoarece modul în care pot decupla unele dintre aceste lucruri le poate face mult mai ușor de gestionat. Deci cu siguranță aș crede că modelul JAMstack ar putea funcționa perfect și în acest scenariu.

Vitaly: Bine, deci poate mă întorc acum pentru a explora acea lume a JAMstack și front-end. De ce ești cel mai încântat în aceste zile, Phil? Dacă te uiți la JAMstack și la front-end în general, este ceva care te ține treaz noaptea și te trezești dimineața în speranța că da, voi lucra la asta cândva. Într-o zi o voi termina. Ai [diafonie 00:13:33]

Phil: Da, și acesta este genul de lucru în care răspunsul tău poate fi diferit de la o zi la alta, pentru că se simte că lumea se mișcă atât de repede. Și acesta în sine este unul dintre lucrurile care mă entuziasmează atât de mult. Acum că începem să vedem că API-urile browserului încep să progreseze cu adevărat și felul de lucruri pe care le putem face direct în browser fără a fi nevoie să le implementăm noi înșine. E cam incitant pentru mine. Încă sunt un duffer când vine vorba de SVG-uri. Ar trebui să explic cuvântul duffer, dacă cineva care nu este englez și se uită la asta, înseamnă un prost. Înseamnă că sunt mult în urma curbei.

Phil: Dar îmi doresc foarte mult să fac mai mult cu SVG-urile, iar animațiile sunt lucruri cu care sunt cu mult în urmă și vreau să mă joc cu asta. Dar lucruri precum API-urile browserului, fie că sunt lucruri pentru offline sau pentru îmbunătățirea performanței și în special în acest moment, modul în care încărcarea fonturilor pare să devină din ce în ce mai accesibilă, astfel încât să putem începe să creăm cu adevărat lucruri care vizual sunt foarte bogate și mai aproape de ce am putea dori să facem cu tipografie. Sunt un pic un tocilar pentru chestiile astea, îmi plac astfel de lucruri, așa că vreau să mă joc din ce în ce mai mult cu asta.

Vitaly: Deci Phil, vorbind despre JAMstack conf la Londra. Puteți explica, de asemenea, în câteva cuvinte, cum ar fi despre ce va fi vorba, despre ce se concentrează și cui este și care este rolul dvs. acolo? Doar în culise, având grijă de conținut și de toate. Care este rolul tău acolo?

Phil: Așa că am avut partea distractivă a jobului. Așa că am avut ocazia să ies și să găsesc vorbitori și să găsesc conținut interesant, așa că sunt foarte încântat de modul în care se adună programele. Avem oameni ca Chris Coia care vor vorbi despre împuternicirea dezvoltatorilor front-end și cât de mult putem face cu tehnologiile front-end acum bazate pe acest model JAMstack. Avem oameni precum Jake Archibald și Surma din echipa Google Chrome, care vor vorbi despre lucruri precum performanța în front-end și despre modalități prin care putem conduce cu adevărat experiențe de performanță, fie cu găzduire statică, fie cu infrastructură sau cod care rulează direct. browserul.

Phil: O să o avem și pe Yuna Kravitz să vorbească despre lucruri de-a face cu CSS și Houdini și toate astea. Și mult mai mult în afară. Vom vorbi, de asemenea, despre lucrurile legate de schimbarea culturală pe care un model JAMstack o poate avea asupra organizației și proiectelor tale, astfel încât să ajungă cu adevărat peste tot. Deci sunt oarecum entuziasmat de asta. De asemenea, voi avea șansa să îi prezint pe toți acești oameni pentru că m-au lăsat să fiu și MC, așa că asta înseamnă că pot vorbi cu acești oameni și să pun câteva întrebări și astfel de lucruri. Așa că cred că ar trebui să fie foarte interesant pentru oricine este interesat de dezvoltarea front-end și, de asemenea, de noi modele de livrare a proiectelor pe web într-un mod cu adevărat eficient.

Vitaly: Oh, deci îți place lumina reflectoarelor pe scenă, nu?

Phil: Sunt un cautator de atentie. Ar trebui să știi asta până acum, Vitaly.

Vitaly: Oh, de fapt, întotdeauna am crezut că ești o persoană foarte umilă, drăguță și bună, se pare că eram...

Phil: Este un act, este un act.

Vitaly: Bine, e bine. Phil, ne vedem peste câteva, de fapt, mâine.

Phil: Ne vedem în curând pentru un alt eveniment, dar altfel ne vedem în iulie, 9 și 10 iulie.

Vitaly: [inaudibil 00:16:52] Deci, având în vedere acest lucru, mulțumesc Phil și semnarea. La revedere tuturor.

Phil: Ne vedem curând.

Asta e un Wrap!

Așteptăm cu nerăbdare să-l întâmpinăm pe Phil la SmashingConf Toronto 2019, cu o sesiune live pe JAMstack. Ne-ar plăcea să vă vedem și acolo!

Vă rugăm să ne spuneți dacă găsești această serie de interviuri utilă și pe cine ai vrea să interviem sau ce subiecte ai dori să tratăm și ne vom ocupa de ea!