Smashing Podcast Episodul 40 cu Mike Cavaliere: Ce este Chakra UI pentru React?

Publicat: 2022-03-10
Rezumat rapid ↬ În acest episod, vorbim despre Chakra UI. Ce este și cum vă poate ajuta cu proiectele dvs. React? Drew McLellan vorbește cu expertul Mike Cavaliere pentru a afla.

În acest episod, vorbim despre Chakra UI. Ce este și cum vă poate ajuta cu proiectele dvs. React? Drew McLellan vorbește cu expertul Mike Cavaliere pentru a afla.

Afișați note

  • Chakra UI
  • Mike pe Twitter
  • Site-ul personal al lui Mike
  • Cartea Cut Into The Jamstack

Actualizare săptămânală

  • Proiectare cu cod: O abordare modernă a proiectării
    scris de Mikolaj Dobrucki
  • Automatizarea testării cititorului de ecran pe macOS folosind Auto VO
    scris de Cameron Cundiff
  • Creșterea gândirii de design ca strategie de rezolvare a problemelor
    scris de Josh Singer
  • Cum să rulați un audit UX pentru o platformă EdTech majoră
    scris de Mark Lankmilier
  • Crearea unui blog cu mai mulți autori cu Next.js
    scris de Dom Habersack

Transcriere

Fotografie cu Mike Cavaliere Drew McLellan: Este inginer senior de software pentru o agenție numită Echobind. El a scris cod de două decenii și a folosit JavaScript tot timpul. Îi place Jamstack, iar noua sa carte, Cut Into The Jamstack, îl învață pe cititor cum să creeze un software ca aplicație de serviciu de la zero. Știm că se pricepe la Jamstack, dar știai că s-a pierdut cândva pe culoarul cu unt de arahide? Prietenii mei zdrobitori, vă rog bun venit lui Mike Cavaliere. Salut Mike. Ce mai faci?

Mike Cavaliere: Sunt absolut uluitor astăzi.

Drew: E bine de auzit. Am vrut să vă vorbesc astăzi despre un proiect de care nu am auzit, cumva, până când l-am găsit în cartea dumneavoastră Jamstack. Nu sunt sigur cum l-am ratat pentru că pare să se maturizeze, bine documentat și un adevărat... Doar un proiect grozav. Sper că astăzi putem vorbi despre asta și pot ajunge din urmă pentru a afla ce ar fi trebuit să știu tot timpul. Vorbesc despre Chakra UI, desigur. Spune-mi, ce este Chakra UI? În ce spațiu se află și ce problemă ne rezolvă?

Mike: Chakra UI este un cadru de interfață pentru React sau setul de instrumente UI, cred că îl formulează ca. În orice stivă de aplicații, în zilele noastre nu vrei să inventezi o interfață de utilizare de la zero. Vrei să iei un set de instrumente. Așa este de ceva vreme.

Mike: Chakra UI este o abordare excelentă pentru un set de instrumente React UI. Există o serie de avantaje, dar unul este că este... În primul rând, este robust. Asta înseamnă că are doar fiecare element de interfață pe care ți-l poți imagina. Are întrerupătoare. Are învelișuri în jurul grilelor. Are toate tipurile de lucruri din elemente.

Mike: Este făcut pentru a fi foarte componabil, astfel încât totul a folosit recuzită de stil. Componentele tale sunt grozave imediat scoase din cutie. Puteți să le aruncați și să le folosiți așa cum sunt. Dar dacă vrei să faci o modificare, este foarte ușor să treci în unele proprietăți de stil. Sunt complet accesibile. Accesibilitatea, despre care toată lumea vorbește, dar uită întotdeauna să o implementeze sau este nevoie de puțin efort pentru a fi implementată, este încorporată pentru tine.

Mike: Nu este neobișnuit să pun ceva împreună cu Chakra UI și să obțin un scor foarte bun Lighthouse. De fapt, tocmai verificam azi site-ul Cut Into The Jamstack, iar scorul de accesibilitate este foarte mare. Este, de asemenea, foarte complet tematică. Puteți seta configurația temei de la început. Există doar o listă lungă de avantaje.

Mike: Se dezvoltă foarte rapid, ceea ce m-a atras inițial la el. Echobind, îl folosim intern. Dar pentru mine, nu am sens de design. Un pic, dar nu sunt designer în niciun caz. Pot să iau componente din Chakra și să modific lucrurile puțin pentru a le face consistente și lucrurile să arate bine din cutie. Ești capabil să te dezvolți rapid. Experiența dezvoltatorului este grozavă. Este pur și simplu minunat pe atât de multe niveluri.

Mike: Ultimul lucru pe care îl voi spune înainte de a continua să divaga despre asta. Dar are și o mulțime de React Hooks care sunt ajutoare pentru lucruri funcționale foarte comune care vin împreună cu aceste elemente pe care le utilizați. De exemplu, în modul întunecat. Există cârlige încorporate pentru utilizarea modului întunecat mai deschis, care vă permit doar să comutați între culorile în temă.

Mike: Mai există unul pentru dezvăluirea folosită, care este pentru a comuta lucruri precum modulele. De care aveți întotdeauna nevoie de o stare pornit, oprit. Dar Hook simplifică acest lucru și mai mult, astfel încât să vă puteți concentra asupra lucrurilor pe care cadrul nu le poate deduce automat. O voi întrerupe acolo, pentru că asta a fost mult.

Drew: Asta e foarte bine. Doar ca să-mi înțeleg corect, în primul rând este Shakra, nu Chakra? Shakra?

Mike: Nu aș fi expertul în asta. Am spus Shakra doar din cauza yoga. Dar va trebui să le cerem fondatorilor să verifice.

Drew: Este un sistem de proiectare de la raft pe care îl puteți folosi pentru a construi interfața de utilizare pentru proiectul dvs.

Mike: Da.

Drew: Este special pentru proiectele React.

Mike: Da. Există un proiect Chakra Vue acolo. Nu prea sunt o persoană Vue, dar știu că există. S-ar putea să existe și pentru alte cadre, dar sunt foarte, foarte concentrat pe React, așa că l-am folosit pe cel implicit Chakra React.

Drew: Da. Am fost familiarizat cu React în trecut. Am folosit React când lucram la Netlify. Acum fac totul în Vue. Acesta a fost unul dintre primele lucruri la care m-am uitat. Oh, există un Vue? Asta arată bine. Există o versiune Vue a acestuia? Am găsit o versiune Vue a acesteia și pare să fie cu mult în urmă. Cred că este pe 0.9 sau ceva, mai degrabă decât pe 1.6 sau oricare ar fi versiunea actuală React. Nu sunt sigur cât de actual este.

Drew: Avem cadre destul de învechite acolo. Lucruri precum Foundation UI, Bootstrap, Bulma. Există de mult timp și sunt o generație anterioară de framework, s-ar părea. Apoi avem câteva abordări mai moderne. Cred că mulți ascultători vor fi familiarizați cu Tailwind și cu proiectul Tailwind UI. Unde se încadrează Chakra UI în acel peisaj? Este mai aproape de ceva ce ar putea Tailwind... O abordare pe care ar putea-o lua vântul din coadă. Este corect?

Mike: Cred că da. Ce-i drept, am vrut să intru mult mai mult în Tailwind doar pentru că este atât de popular acum. Dar nu pot vorbi inteligent despre dedesubturile lui Tailwind în sine și despre cum... Simțul meu este că Chakra și Tailwind sunt abordări alternative. Te apuci de unul, nu amândouă în același timp, evident.

Mike: Încă nu știu care sunt avantajele și dezavantajele pentru ambele. Tocmai am fost atât de îndrăgostit de Chakra încât o folosesc în mod implicit. Eu zic: „Bine, știu asta foarte bine acum. Imi place. O să-l învăț pe celălalt mai târziu.” Dar Tailwind, evident, extrem de popular. Cred că Tailwind are cadrul de bază într-un set de instrumente UI. Este corect?

Drew: Corect. Da.

Mike: Bine. Acest lucru ar fi probabil mai mult la egalitate cu setul de instrumente UI al Tailwind. Pe pagina de pornire Chakra, ei au o comparație cu privire la motivul pentru care ați putea dori să ajungeți la unul sau altul, dar nu o am interiorizat.

Drew: Da. Asta e bine. Așa cum am menționat, pentru proiectele React și modul în care se manifestă, mai degrabă decât unele dintre aceste sisteme de design mai tradiționale, care vă oferă o mulțime de nume de clase pe care să le puneți pe HTML și trebuie să utilizați o structură HTML, puneți clasele potrivite. aceasta. Acesta este modul în care obțineți ca interfața de utilizare să se manifeste în proiectul dvs. Cu Chakra, deoarece se bazează pe React, vă oferă o mulțime de componente pentru fiecare dintre acele elemente. Puteți doar să importați în proiectul dvs. Aceste componente își încapsulează propriul marcaj și stil, nu-i așa?

Mike: Da. De fapt, nu va trebui să scrieți o clasă folosind Chakra. Eu nu am. Nici nu stiu daca se poate. Întreaga paradigmă React este o compoziție și proprietăți componente. Încapsularea componentelor înseamnă că treceți anumite proprietăți în componentă. În Chakra, aveți această noțiune a unei teme care este o paradigmă globală. Există o temă implicită și are valori pentru culoare și spațiere și anumite unități pentru toate lucrurile comune.

Mike: Puteți personaliza acea temă. Îl personalizează la nivel global. Îl poți mări oricum trebuie. Când apelați componenta în sine, de exemplu, o introducere de text. O componentă de intrare. Acesta va avea culori implicite și raza marginii și umplutură și marjă așa cum sunt definite de temă. Când doriți să o stilați în continuare, dacă nu doriți să o faceți la nivel global, de exemplu, când specific marjele de jos, o fac de la caz la caz. Nu o fac la nivel global pentru că asta poate duce la catastrofă. Îl dai doar ca un prompt.

Mike: Există comenzi rapide. Dacă am o componentă de intrare, spun doar, MB este egal, apoi o valoare și va aplica marginea de jos. Sau au MX și MY pentru verticală și orizontală. Sau ați putea doar să specificați M și să treceți șirul așa cum ați face proprietatea CSS marginală. Nu există nume de clasă. Face toate numele de clasă în mod dinamic și le îndepărtează de utilizator.

Drew: Da. Cred că aici trebuie să intervină comparația cu Tailwind. Pentru că felul în care funcționează Tailwind vă oferă o mulțime de cursuri. Dacă doriți să creșteți marja, există o clasă pe care o puteți pune pentru a crește marja. De fapt, se pare că iei la fel... Este o implementare diferită, dar aceeași abordare a modului în care a fost proiectat. De fapt, folosim elemente de recuzită, iar tu transferi o recuzită pentru a ajusta acele lucruri.

Drew: Cât de ușor este să personalizezi un design? Este vorba doar de a putea modifica culorile, marginile și umplutura și de a le face să arate puțin diferit? Sau poți într-adevăr să creezi o temă cu Chakra?

Mike: Oh, poți face ce vrei. E minunat. Puteți stila la nivel de componentă sau la nivel de temă. Depinde doar de cât de creativ vrei să fii cu el. Am reușit să iau niște componente și să fac niște lucruri sălbatice cu ele. O parte din ceea ce îl face cu adevărat stilabil este că aceste componente sunt destul de atomice.

Mike: Folosind din nou exemplul casetei de text, dacă doriți o casetă de text, componenta dvs. este exact asta. Puteți stila totul în jurul lui sau puteți stila caseta de text în sine. Sau poți schimba tema. Setarea culorilor pentru a rebranda totul la nivel global.

Mike: De fapt, i-am postat pe Twitter creatorul Chakra UI, Seg, spunând că ar trebui să pună o galerie pe site pentru că este foarte grozav. Puteți crea câteva modele frumoase cu el. Sunt foarte variate și s-ar putea să nu știi la suprafață acolo. Nu știu dacă Chakra UI are indicii care să facă evident că utilizați o Chakra UI pentru site-ul dvs.

Mike: Am văzut niște chestii destul de drăguțe cu el. Dar poți face orice cu ea. Am făcut site-uri web statice. Pagina de pornire Cut Into The Jamstack este terminată cu ea. Doar ca un exemplu. L-am folosit de multe ori la Echobind. Nu-mi amintesc dacă am folosit asta pentru echobind.com. Dar cu siguranță multe dintre site-urile clienților noștri. Apoi, aplicația pe care am construit-o, JamShots, este o aplicație. Nu are încă pagini de marketing. Dar totul este doar UI și toată această UI este construită folosind Chakra.

Mike: Un alt lucru în timp ce o laud pe Chakra este că, există un alt site web pe care l-am folosit foarte mult în ultima vreme și îl folosesc în... O să îl introduc și în carte. Chakratemplates.net. Chakra-templates.net. Este un model obișnuit de design pe care oricine contribuie găsește o unitate erou sau o unitate de preț. Trebuie doar să copieze și să introducă codul Chakra.

Mike: Folosesc asta în întregime pentru pagina de pornire a cărții pentru că mi-a economisit atât de mult timp în dezvoltarea acesteia. E ca și cum, o, ai un model de preț. Lasă-mă să copiez și să lipesc asta. Permiteți-mi să ajustez puțin elementele de recuzită, astfel încât totul să fie coerent pe site-ul meu. Asta e. Este doar un alt lucru care este separat de Chakra în sine, dar doar că economisește timp pentru că ai nevoie de aceste lucruri pe atât de multe site-uri și cine vrea să reinventeze roata de fiecare dată.

Drew: Se pare că poate economisi timp real, nu numai pentru proiectele personale în care doriți să implementați ceva rapid, ci și în contextul unei agenții.

Mike: Oh, da. Absolut.

Drew: Se aplică în mod egal interfețelor aplicațiilor, precum și site-urilor de marketing? Se înclină într-un fel sau altul sau este util în general, indiferent de ceea ce construiești?

Mike: Aș spune că sunt ambele. Cu siguranță este. L-am folosit pentru ambele. Compania noastră l-a folosit pentru ambele. Construim, aș spune că înclinăm foarte mult spre construirea de aplicații full stack și aplicații mobile. Cu siguranță avem mult mai multă nevoie de UI decât de chestii de marketing. Deși uneori construim și asta. Este util pentru amândoi.

Mike: Există ceva pe site despre care ei menționează, cum ar fi când nu ai vrea să folosești Chakra? Ei spun că din cauza modului în care simplifică această interfață CSS. S-ar putea să apară provocări atunci când aveți o mulțime de date pe ecran. Dacă creezi tone și tone de elemente DOM și faci o mulțime de actualizări în timp real, s-ar putea să întâmpinați sau nu provocări de performanță.

Mike: Nu am văzut vreo problemă de performanță. Dar nici nu am construit ceva care să consume atât de mult date în timp real. Este preocupare. Dacă aș fi de gând să construiesc o astfel de aplicație, probabil că aș dori oricum să creez două abordări diferite, doar pentru a vedea cum se performanță cu multe. Dar da. Este universal util pentru ambele cazuri.

Drew: Cred că există întotdeauna un compromis, nu există opțiuni de tehnologie? Ceva care o face cu adevărat, foarte simplă. Foarte rapid de implementat. Compensația ar putea fi, odată ce creați 1.000 de puncte de date sau orice altceva pe o pagină, acea metodă de lucru nu va funcționa bine și vă încetinește.

Drew: Da. Cred că e corect. Tind să găsesc în alegeri tehnologice, cel mai important lucru este doar să știu. Doar pentru a ști care sunt compromisurile și care sunt limitările. Niciunul dintre ei nu este bun sau rău. Trebuie doar să găsești un echilibru adecvat pentru situația ta.

Drew: După cum v-ați aștepta să găsiți cu un sistem de design de acest fel, acesta vine cu componente pentru tipografie. Pentru aspect. Apoi până la niște butoane și elemente de formular și există o bibliotecă de pictograme. Există aproape tot ceea ce v-ați aștepta să vedeți pe pagina de chiuvetă de bucătărie a unui sistem de design. Ai totul acolo. Totul mi se pare destul de modern. Am observat că componenta grilă de aspect utilizează de fapt grila CSS, ceea ce este întotdeauna plăcut de văzut. Nu oferă doar o cutie flexibilă.

Mike: Oh, da. Intru totul.

Drew: Este, în general, foarte flexibil să lucrezi? Considerați că elementele de aspect le puteți construi orice tip de interfață de utilizare de care aveți nevoie?

Mike: Da. Da. Absolut. Ceea ce este grozav este că, în unele cazuri, oferă mai mult de un nivel de abstractizare. În cazul grilei CSS, au o grilă simplă, care este ca, bine. Vrei să-l introduci și iată grila ta. Puneți lucruri înăuntru și specificați, cred că numărul de coloane sau ceva de genul ăsta. Atunci ai o grilă.

Mike: Dar dacă trebuie să ai un pic mai multă flexibilitate în comportamentul grilei, atunci ai o componentă grilă generică, care este probabil... Componenta grilă simplă probabil înglobează cealaltă componentă grilă. Este doar o altă fațadă peste ea însăși.

Mike: Acea abordare a compoziției componentelor, este o paradigmă valoroasă în lumea React din cauza aceluiași lucru. Dacă aveți o componentă care este foarte versatilă și are o mulțime de elemente de recuzită, ei bine, atunci ar putea exista un set de cazuri de utilizare pentru care doriți să utilizați componenta într-un singur mod destul de frecvent. Pur și simplu îl înfășurați cu o altă componentă cu elemente de recuzită statice sau prespecificate pentru componentele mai robuste.

Mike: Ei folosesc această abordare foarte bine în Chakra. Nu m-am lovit încă de nimic din ce să nu pot face cu el. Sunt sigur că e acolo undeva. Sau ceva care este doar un pic mai greu de făcut. Dar, în general, nu s-a întâmplat încă. Nu că mă pot gândi cel puțin.

Drew: Ei bine, unul dintre lucrurile pe care am fost cu adevărat încântat să le văd și ceva despre care ați menționat mai devreme, este că se pare că se pune accentul destul de mult pe accesibilitate.

Mike: Da.

Drew: Cu siguranță în informațiile promoționale. Se naște asta în codul în sine? Practică ei ceea ce predică? Are într-adevăr o accesibilitate bună încorporată?

Mike: Cred că da. Cel mai aproape de a-l testa este să rulez Lighthouse împotriva lui. Oferă în mod constant scoruri mari pentru accesibilitate. De obicei, voi folosi Chakra Next.js. Next.js este performanța chiar la cutie. Destul de des vei vedea scoruri mari și tot. Tocmai am postat pe Twitter astăzi despre modul în care pagina de pornire a cărții are trei din cele patru scoruri Lighthouse. Există accesibilitate, bune practici, performanță și un al patrulea. Nu mă gândesc acum.

Mike: Totul, în afară de performanță, a ieșit aproape de 100%. Partea de performanță este pe mine doar pentru că am pus multe pe pagină și încă nu am optimizat-o. Are tendința de a face asta. Scorurile de accesibilitate din Lighthouse sunt grozave ori de câte ori folosesc Chakra UI.

Drew: E grozav. Ai menționat că folosesc randarea pe server și ce ai tu. Lucruri precum Next și Gatsby și ceea ce am pe tine, nu reprezintă absolut nicio problemă, nu-i așa? Nu există obstacole pentru a fi conștienți de a folosi Chakra cu acestea?

Mike: Oh, nu. Deloc. Nu l-am folosit. Tind să mă concentrez pe Next.js. Nu m-am conectat la Gatsby sau la oricare dintre celelalte instrumente SSR. Dar atâta timp cât cadrul, nu are nimic care să-l blocheze să-l folosească ca atare, atunci ar trebui să fie bine.

Mike: Pentru React, Chakra oferă un furnizor de API de context. Un furnizor de teme, astfel încât atunci când... În aplicațiile mele Next.js, de exemplu, aveți un... Next.js are un fișier JS sau TS al aplicației de subliniere care doar cuprinde fiecare pagină din aplicație. Doar conectați furnizorul de teme acolo și Chakra face restul muncii și devine disponibil peste tot. Nu există obstacole pentru a adăuga în Next.js cu siguranță. Dar îmi imaginez că nu și Chakra.

Drew: Chakra folosește TypeScript? Eu cred că da, nu-i așa?

Mike: O susține. Da.

Drew: O susține. Acesta este un mare plus pentru cei care folosesc deja TypeScript în proiectele lor. Există vreun dezavantaj în acest sens dacă oamenii nu folosesc deja TypeScript?

Mike: Nu cred. Folosesc TypeScript în mod implicit în toate proiectele mele, la fel și Echobind. Dar când fac lucruri la nivel personal, folosesc... Îmi place să spun stropire de TypeScript. Dactilografia este extrem de valoroasă în reducerea erorilor prin crearea de tipuri statice. Există totuși un purtător pentru el, unde, în funcție de cunoștințele dvs., TypeScript poate fi un adevărat obstacol.

Mike: Pragul meu minim pentru... Severitatea TypeScript pe care o folosesc este destul de scăzută, pur și simplu pentru că poți obține multă valoare din TypeScript cu tastarea de bază. Va preveni o mulțime de accidente obișnuite. Când treceți la tastarea mai avansată, dacă nu vă simțiți foarte confortabil cu acele lucruri, vă poate încetini cu adevărat și vă poate frustra.

Mike: Asta pentru a spune același lucru cu Chakra și TypeScript. Tind să folosesc o cantitate ușoară de TypeScript, cel puțin la început, până când dezvolt și stabilesc cu adevărat un proiect. Dar nu prezintă provocări în utilizarea Chakra, fie cu sau fără TypeScript. E grozav cu. Îmi place cu el, dar cu siguranță îl poți folosi și fără.

Drew: Da. Găsesc cu TypeScript că obții 80% din beneficii, așa cum spui, doar cu câteva tipuri. Dacă ajungi prea departe în gaura iepurelui, ajungi cu un script care este în mare parte TypeScript. Apoi un pic de JavaScript în partea de jos.

Mike: Sau petreci atât de mult timp încercând să găsești modul corect de a scrie ceva și creierul îți explodează. Așa pui pur și simplu orice sau necunoscut. O comandă rapid. Pe care îl susțin în astfel de cazuri. Dacă îți ia prea mult timp să faci ceva, atunci există o pârghie pe care o poți trage.

Drew: Documentația Chakra pare să fie foarte bine prezentată, m-am gândit, cu... Are o privire de ansamblu asupra fiecărei componente. Apoi, include într-adevăr util orice notă tehnică despre considerentele de proiectare care au fost făcute la implementarea acelei componente. Ceea ce, ca inginer front end, cred că este grozav. Vorbesc limba mea. Înțeleg. Știu ce face componenta puțin sub capotă.

Drew: Asta e doar din perspectiva mea, răsfoind documentația fără un proiect real la care lucrez. Când lucrezi efectiv la un proiect și te afli adânc în buruienile acestuia, doar documentația rezistă? Este la fel de util pe cât pare?

Mike: Da. Absolut. Perspectiva mea este puțin diferită. Nu am întotdeauna nevoie să știu ce se întâmplă sub capotă, dar simt că pot deduce de obicei. Dacă mă uit la o componentă a cutiei, mă uit doar la documente acum, în timp ce vorbim pentru reîmprospătare. Dacă mă uit la o componentă a cutiei, îmi zic: „Bine. Acesta este probabil un div implicit. Îl văd trecând în proprietățile gradientului, indiferent.”

Mike: Pot să-mi dau seama ce se întâmplă în capotă fără să înțeleg pe deplin magia lor de a traduce CSS. Traduceți recuzita în CSS. Dar documentația este grozavă prin faptul că este foarte liniară. Este foarte consistent. Enumeră totul cu exemple. Puțin copy and paste.

Mike: Folosește doar un spațiu alb foarte bun, astfel încât să te uiți la pagină nu pare copleșitor. Puteți găsi cu ușurință ceea ce aveți nevoie. Căutarea lor este grozavă. Căutarea lor este utilă. 90% din timp, cred că pentru asta mă duc acolo. S-ar putea să merg acolo și să văd dacă există o componentă pentru a face ceva. De obicei o face. Și să dau peste ceva ce era util despre care nu știam. Sau doar să mă împrospăt cu unele dintre principii. Aici pot găsi întotdeauna ceea ce am nevoie.

Drew: Singurul lucru care nu mi-a plăcut la documente după ce am aruncat o privire în jur a fost numărul de reclame de pe ele. Pe fiecare pagină pentru oferta lor comercială a Chakra UI Pro.

Mike: Nu-i văzusem. Interesant. Am văzut. L-am văzut cu siguranță. Dar nu o văd acum. Oh da. Bine. Există Chakra UI Pro. Presupun că l-am filtrat mental. Te aud. Cel puțin nu e prea mare și în fața ta.

Drew: Nu e prea mare. E doar în locul greșit. Este exact locul în care cauți informațiile. Motiv pentru care cred că au făcut-o. Este demn de menționat, luând în considerare ecosistemul și tot ceea ce este în jurul proiectului, este un set profesional de componente care este... Presupun că este echivalent cu unele dintre lucrurile care sunt în Tailwind UI care sunt acolo. Pagini de marketing și aici sunt componente și mai multe dintre aceste secțiuni compuse de pagini și pagini întregi și machete și lucruri. Că tu, este disponibil de la producătorii Chakra, dar ca o ofertă comercială.

Mike: Da. Aruncă o privire rapidă la el acum. Unele dintre acestea sunt de fapt disponibile. Sau versiuni ale acestora sunt disponibile gratuit, cum ar fi șabloanele Chakra. Sunt șabloanele Chakra, cred că sunt soluția open source pentru Chakra Pro sau concurentul open-source. Sunt sigur că vei primi o tonă plătind pentru asta. Se pare că Chakra Pro este extrem de robust și are un preț rezonabil dacă aveți nevoie de un profesionist plătitor pentru acestea. Există câteva opțiuni pentru proiectul dvs., se pare.

Drew: Da. Se pare că există un ecosistem destul de construit în jurul lui. Știți de cât timp durează proiectul și ce urmează există? Este utilizat pe scară largă în comunitatea React?

Mike: Vreau să spun da. Nu stiu in ce masura. Aș fi curios să văd care este, cred, cota de piață a Tailwind versus Chakra în zilele noastre. Știu că Chakra a primit un premiu relativ recent. Premiul GitNation React pentru cel mai impactant proiect pentru comunitate. Aș spune că este destul de mare și destul de bine îmbrățișată. Cu un motiv bun, ceea ce este grozav. Oamenii se bucură cu siguranță. Eu nu sunt singurul.

Drew: Un lucru la care merită să te gândești întotdeauna când aduci o dependență în proiectul tău este ce se întâmplă atunci când trebuie să actualizezi acea dependență.

Mike: Da.

Drew: Chakra este îmbunătățită tot timpul, îmi imaginez. Este cazul în care, odată ce l-ați importat și construit cu el, îl lăsați blocat pe o anumită versiune? Sau este în general sigur să fii la curent? Este relativ stabil în ceea ce privește designul și lucrurile site-ului dvs. nu se schimbă pe măsură ce se actualizează Chakra?

Mike: A fost până acum. Da. În principal, aș spune că asta se datorează progresului dezvoltării. Sunt pe versiunea 1.6.3 chiar acum. Cu câteva luni în urmă, au trecut de la zero la unu. A fost singura dată când au avut schimbări ruptoare. De atunci, au făcut în mod constant lansări de funcții și remedieri de erori.

Mike: În ultimele cel puțin două luni, totul a fost doar completări. Adăugiri și remedieri. Nu sunt implicate schimbări de ruptură. Nu știu cum arată foaia de parcurs, dar îmi imaginez că așa va fi în continuare. De fiecare dată când am făcut upgrade, una dintre aceste versiuni minore, a fost bine. Nu am văzut niciodată ceva rupt din el. Dar când au ieșit cu 1.0, au existat câteva schimbări de ruptură. Nu-mi amintesc totuși să fi fost catastrofal.

Drew: Știți care este situația cu dimensiunile pachetelor și capacitatea de a agita chakra în copaci? Adaugă multă greutate proiectului tău sau lucrurile sunt importate doar pe măsură ce le folosești?

Mike: Nu-mi amintesc neapărat, sincer. Probabil că ar trebui să știu asta. Nu am observat că adaugă multă greutate. În principal pentru că importați componentele individual. Nu import toată Chakra sau ceva de genul ăsta. Aș spune că e în linie să aibă suport pentru scuturarea copacilor, dar nu l-am pus la încercare. Până acum, totuși, nu am avut lucruri care să aibă o greutate enormă provenind în mod special din asta.

Drew: Da. Acesta este întotdeauna un aspect important, nu-i așa?

Mike: Da.

Drew: Mai ar trebui să știm ceva despre Chakra UI înainte să ne scufundăm și să-l folosim într-un proiect?

Mike: Nu. Este grozav. Există și o comunitate destul de activă. Văd actualizări des. Mă uit la documentație acum și văd componente pe care nu le-am văzut înainte. Văd că se adaugă multe funcții. Grozav.

Drew: Da. Asta este grozav. Aveți o carte numită Cut Into The Jamstack, care este o versiune preliminară. O versiune beta în acest moment. Tu auto-publici asta. Este corect?

Mike: Da. Da. Eu sunt. A fost prima mea încercare la o carte tehnică. Vreau doar să-l scot acolo fără să mă angajez la ceva de genul, cred că este formal. De asemenea, sunt o persoană căreia îi place informalitatea, mai ales când creează lucruri. Îmi dă capacitatea de a o face în felul meu, făcând-o așa.

Drew: Cartea îndrumă literalmente cititorul prin construirea unui software ca aplicație de serviciu.

Mike: Da.

Drew: Toate pe Jamstack. De ce ai decis să scrii asta acum și să iei această abordare cu cartea?

Mike: Bună întrebare. Am programat de vreo 20 de ani și cred că am încercat să scriu o carte cu ceva timp în urmă și pur și simplu nu a prins contur. Sunt într-un moment al carierei mele în care vreau cu adevărat să împărtășesc mai multe cunoștințe. Îl folosesc de atâția ani și simt dorința de a pune cu adevărat mai mult din el și de a-i ajuta pe alții.

Mike: În jurul lunii octombrie a anului trecut, am avut asta... Am vrut să pun ceva acolo care să fie produs. O carte electronică s-a părut o modalitate foarte bună de a începe. Sunt foarte pasionat de Next.js și de lucrurile pe care le poți face cu el. Folosesc termenul Jamstack și consider Next.js ca parte a Jamstack deoarece are o generare de site static ca implicită.

Mike: Dar cred că un lucru despre care nu se vorbește suficient, în opinia mea, sau despre care ar putea folosi mai multe explicații, este construirea de aplicații software ca serviciu cu el. Pentru că Jamstack nu este doar pentru site-uri web. Funcționează foarte bine pentru site-urile web bazate pe conținut, deoarece sunt statice și rapide și prietenoase cu SEO.

Mike: Dar există atât de multe funcționalități bogate acolo, în special în Next.js, unde Vercel a avut Conferința Next.js ieri și lansează din ce în ce mai multe funcții uimitoare acolo. Sunt pasionat de crearea de software ca serviciu. Site-urile software sunt grozave, dar software-ul este menit să facă lucruri.

Mike: Pentru mine, această stivă este în mare măsură viitorul dezvoltării software ca serviciu. Îmi amintește de ce era Ruby on Rails când a apărut. A fost o evoluție, ca să vorbim. A automatizat și simplificat o mulțime de lucruri pe care înainte trebuia să le faci manual. A accelerat ritmul de dezvoltare și a crescut calitatea acestuia.

Mike: Next.js și Jamstack și Vercel și Chakra UI, toate produc lucruri care simplifică o mulțime de lucruri pentru tine. Next.js, simplifică multe probleme legate de viteză și probleme legate de accesibilitate. Instanalizare. Acestea sunt toate, rutarea este făcută pentru tine. Nu trebuie să vă faceți griji cu privire la rutarea clientului sau a serviciului. Este automat. Chakra UI face asta cu accesibilitate și tematică. Aceste instrumente puse împreună, ele doar... Experiența dezvoltatorului devine cu adevărat grozavă și totul doar... Vă oferă libertatea de a crea cu adevărat software.

Mike: Ca să-ți răspund la întrebare. Motivul pentru care am scos o carte acum este din cauza momentului potrivit în care vreau cu adevărat să pun ceva acolo și cu ecosistemul Jamstack care începe să se concretizeze și să crească. De asemenea, mi-a dat șansa de a scrie mai mult cod în Jamstack, ceea ce, pur și simplu, îmi place.

Drew: Cred că, așa cum spuneți, este ușor să vă acceptați ideea de Jamstack atunci când vă gândiți la site-uri web și, de obicei, la site-uri ușoare. Dar luând următorul pas pentru a vă gândi la modul în care puteți utiliza abordarea pentru a construi o aplicație web completă, este mult mai greu. Cred că este un obstacol mai mare de depășit dacă ești obișnuit să gândești la nivelul serverului.

Mike: Da.

Drew: Este un salt mult mai mare de văzut, bine. Îmi pot pune autentificarea la un serviciu -

Mike: Da.

Drew: … și eu pot… Cred că pentru cititori, din punctul de vedere al cititorului cărții tale, doar parcurgând și construind acest exemplu, urmând împreună cu tine, este probabil o modalitate excelentă de a depăși acest obstacol pentru a ajuta doar schimbă-ți ușor mentalitatea în, bine. Așa aș putea face toate aceste lucruri, dar pe Jamstack. Ai fi de acord cu asta?

Mike: Da. Asta sper. Cred că da. Chiar asta se intenționează. Am semnat recent o discuție, o conferință care... O parte din motivația mea pentru acest subiect și modul în care am decis să predau în această carte este că, aș putea să vă învăț un limbaj de programare. Un cadru, dar este mai bine să vă prezinți stiva într-un mod practic, deoarece fiecare dezvoltator care are multă experiență este bun la documentare și la Google și la utilizarea stack overflow. De ce ți-aș pierde timpul învățându-ți asta?

Mike: Vreau să vă ofer o scufundare rapidă și profundă în stiva și ce pot face cu el. Veți afla ce este grozav la fiecare dintre piesele individuale. NextOFF și Prisma. Next.js și Chakra. Vă voi trimite la documentație doar pentru a vă salva câteva clicuri. Dar vei vedea printr-un exemplu interactiv cum aceste piese se conectează între ele. De asemenea, veți obține o înțelegere a părților grele.

Mike: Un lucru în care voi intra în profunzime, de exemplu, este această caracteristică pe care o construiesc pentru încărcarea asincronă a mai multor fișiere. Next.js are un front-end și un backend. Deși în partea din față a capătului frontal și în spatele capătului frontal, dacă utilizați acea analogie, aveți stratul React. Apoi ai stratul nod. Există aceste rute API.

Mike: Dacă vrei să încarci mai multe fișiere cu asta și să folosești un serviciu, folosesc Cloudinary în carte. Dar dacă utilizați un serviciu API pentru încărcările de imagini și media, ceea ce ar trebui, există o mulțime de piese în mișcare acolo. Există partea client, cu care utilizatorul interacționează. Există solicitările API către Cloudinary sau celălalt furnizor. Dar apoi trebuie să faceți mai multe solicitări API pentru a fi eficient. Trebuie să faceți unele semnări împotriva Cloudinary, pentru care aveți nevoie de un apel API.

Mike: Trebuie să luați acel semn și trebuie să faceți încărcarea, care pleacă din browser și ocolește API-ul și merge direct la Cloudinary. Apoi, trebuie să-l salvați în baza de date, care folosește backend-ul front-end-ului. Există multe piese și Next.js... În comunitatea Next.js, încă nu există un plugin open source pentru asta. Which I may extract out of the app now that have built it and put it into one because other people are going to have this.

Mike: Anyway, all that's just to say that, I think that's something really valuable to teach to people. Even if you're a senior engineer, for a few dollars, you get all this wrapped up for you with a bow on it to be like, okay. This is a series of tools that worked really well together for building SaaS apps with a stack. This hurdle, I don't have to figure out a solution for writing custom. Here's an approach that works.

Mike: I just, I take a lot of joy in trying to prevent people from having to reinvent the wheel. Even though it's fun to reinvent the wheel, if you wanted to just ship something, the more you can reduce that, the better,

Drew: That sounds very, very helpful. The book is in beta now. If people buy it now, do they get updates as it improves?

Mike: Yep. Da. It's immensely discounted. It's $10 now. When I finish, it will be 30. Whoever gets it now, will just get updates for the life of the book.

Drew: Fantastic.

Mike: I've got another one coming up in probably a couple of weeks. Da. Da. It's already 107 pages and it's got a source-code repo that will be shipped with it. That comes along with it now. It's already like you can do… In the first 107 pages, it goes through setup to build a new first full stack page to building a CRUD for photo galleries. Create, Read, Update, Delete. So the front end and backend components. Then shipping a deployment to railway and Vercel. It's pretty practical right away. Then the further, other couple of 100 pages are going to be more in depth with the coding topics.

Drew: Great. That's available now at cutintothejamstack.com.

Mike: Yep. Asta e.

Drew: I've been learning all about Chakra UI. What have you been learning about lately, Mike?

Mike: I've been digging deeper on the stack. It constantly teaches me new things. One example is just with the Vercel Conference yesterday. The Next.js Conf. Next.js 11 is now out and it's just got a ton of great things with it. There's a real-time collaboration tool built in so when you ship a preview deploy, you can have people commenting on it and moving their mouse around the screen, even it looks like.

Mike: In addition, their performance is getting better and better. Next.js' image component, which I use heavily now is going to have automatic placeholders. It's going to be even more streamlined. I'm constantly learning the better and better ways to do things in this stack. There are always more. It seems like.

Drew: Always. Always more to learn. If you dear listener would like to hear more from Mike, you can follow him on Twitter where he's @mcavaliere, and his personal website is mikecavaliere.com. The book Cuts Into The Jamstack, which amongst other things shows a practical implementation of Chakra UI, is again at cutintothejamstack.com. Thanks for joining us today. Mike. Ai avut cuvinte de despărțire?

Mike: Nope. Thanks so much for having me, Drew, and keep smashing out there. Maybe I should rephrase that.