Smashing Podcast Episodio 40 con Mike Cavaliere: che cos'è l'interfaccia utente di Chakra per reagire?

Questo episodio è stato gentilmente supportato dai nostri cari amici di Wix che sono noti per darti la libertà di creare, progettare, gestire e sviluppare la tua presenza sul web esattamente come desideri. Grazie!

In questo episodio, stiamo parlando dell'interfaccia utente di Chakra. Che cos'è e come può aiutare con i tuoi progetti React? Drew McLellan parla con l'esperto Mike Cavaliere per scoprirlo.

Mostra note

• Interfaccia utente del chakra
• Mike su Twitter
• Sito personale di Mike
• Taglia nel libro Jamstack

Aggiornamento settimanale

• Progettare con il codice: un approccio moderno alla progettazione
  scritto da Mikolaj Dobrucki
• Automatizzare i test del lettore di schermo su macOS utilizzando Auto VO
  scritto da Cameron Cundiff
• L'ascesa del design Thinking come strategia di problem solving
  scritto da Josh Singer
• Come eseguire un audit UX per una delle principali piattaforme EdTech
  scritto da Mark Lankmilier
• Creazione di un blog multi-autore con Next.js
  scritto da Dom Habersack

Trascrizione

Drew McLellan: È un Senior Software Engineer per un'agenzia chiamata Echobind. Scrive codice da due decenni e usa JavaScript per tutto il tempo. Adora Jamstack e il suo nuovo libro, Cut Into The Jamstack, insegna al lettore come creare da zero un software come app di servizio. Sappiamo che sa come aggirare il Jamstack, ma lo sapevi che una volta si è perso nel corridoio del burro di arachidi? Miei formidabili amici, vi prego di dare il benvenuto a Mike Cavaliere. Ciao Mike. Come stai?

Mike Cavaliere: Oggi sono assolutamente fantastico.

Drew: È bello sentirlo. Volevo parlarti oggi di un progetto di cui non avevo davvero sentito parlare, in qualche modo, finché non l'ho trovato nel tuo libro Jamstack. Non sono sicuro di come me lo sia perso perché sembra maturo, ben documentato e un vero... Solo un grande progetto. Spero che oggi ne possiamo parlare, e posso recuperare il ritardo per scoprire cosa avrei dovuto sapere da sempre. Sto parlando dell'interfaccia utente di Chakra, ovviamente. Dimmi, cos'è l'interfaccia utente di Chakra? In che spazio si trova e quale problema ci sta risolvendo?

Mike: Chakra UI è un framework UI per React o UI toolkit, immagino che lo esprimano così. In qualsiasi stack di applicazioni, al giorno d'oggi non vuoi inventare un'interfaccia utente da zero. Vuoi prendere del kit di strumenti. È così da un po'.

Mike: Chakra UI è un ottimo approccio su un toolkit React UI. Ci sono una serie di vantaggi, ma uno è che è... Per uno, è robusto. Ciò significa che ha tutti gli elementi dell'interfaccia utente che potresti immaginare. Ha gli interruttori. Ha degli involucri attorno alle griglie. Ha tutti i tipi di cose che formano elementi.

Mike: È stato creato per essere molto componibile, in modo che tutto utilizzasse accessori di stile. I tuoi componenti, sono fantastici fin da subito. Puoi lasciarli cadere e usarli così com'è. Ma se vuoi apportare una modifica, è molto facile passare alcune proprietà di stile. Sono completamente accessibili. L'accessibilità, di cui tutti parlano ma si dimenticano sempre di implementare o richiede un piccolo sforzo per implementarla, è integrata per te.

Mike: Non è raro per me mettere insieme qualcosa con l'interfaccia utente di Chakra e ottenere un ottimo punteggio di Lighthouse. In realtà, stavo solo controllando il sito Web di Cut Into The Jamstack oggi e il punteggio di accessibilità è molto alto. È anche molto completamente a tema. È possibile impostare la configurazione del tema dall'inizio. C'è solo una lunga lista di vantaggi.

Mike: Lo sviluppo è molto veloce, ed era ciò che inizialmente mi ha attratto. Ecobind, lo usiamo internamente. Ma per me, non ho senso del design. Un po', ma non sono affatto un designer. Posso prendere componenti da Chakra e modificare leggermente le cose per renderlo coerente e le cose sembrano buone fuori dagli schemi. Sei in grado di svilupparti velocemente. L'esperienza degli sviluppatori è ottima. È semplicemente fantastico su così tanti livelli.

Mike: Ultima cosa che dirò prima di continuare a divagare su di esso. Ma ha anche molti React Hooks che sono aiutanti per funzionalità molto comuni, cose che accompagnano questi elementi che stai usando. Ad esempio, in modalità oscura. Sono presenti ganci integrati per l'utilizzo della modalità più chiara e scura che ti consente di alternare i colori nel tuo tema in modo molto invadente.

Mike: Ce n'è un altro per la divulgazione usata che è per alternare cose come i moduli. Che hai sempre bisogno di uno stato acceso, spento. Ma Hook lo semplifica ancora di più così puoi concentrarti sulle cose che il framework non può dedurre automaticamente. Lo taglierò lì, perché era molto.

Drew: È davvero buono. Solo così ho capito bene, prima di tutto è Shakra, non Chakra? Shakra?

Mike: Non sarei l'esperto in merito. Ho detto Shakra solo per via dello yoga. Ma dovremo chiedere ai fondatori di ricontrollare.

Drew: È un sistema di progettazione pronto all'uso che puoi utilizzare per creare l'interfaccia utente per il tuo progetto.

Mike: Sì.

Drew: È specifico per i progetti React.

Mike: Sì. C'è un progetto Chakra Vue là fuori. Non sono molto una persona Vue, ma so che esiste. Potrebbero esserci anche altri frame, ma sono molto, molto concentrato su React, quindi ho usato quello predefinito di Chakra React.

Drew: Sì. Ho avuto familiarità con React in passato. Ho usato React quando lavoravo in Netlify. Ora faccio tutto in Vue. Questa è stata una delle prime cose che ho guardato. Oh, c'è un Vue? Questo sembra buono. Esiste una versione Vue? Ne ho trovato una versione Vue e sembra essere piuttosto indietro. Penso che sia su 0.9 o qualcosa del genere, piuttosto che 1.6 o qualunque sia l'attuale versione di React. Non sono sicuro di quanto sia attuale.

Drew: Abbiamo framework abbastanza obsoleti là fuori. Cose come Foundation UI, Bootstrap, Bulma. Sono in circolazione da molto tempo e sono una precedente generazione di framework, sembrerebbe. Poi abbiamo degli approcci più moderni. Penso che molti ascoltatori avranno familiarità con Tailwind e il progetto Tailwind UI. Dove cade Chakra UI in quel paesaggio? È più vicino a qualcosa che Tailwind potrebbe... Un approccio che potrebbe avere Tailwind. È corretto?

Mike: Penso di sì. Devo ammettere che avevo intenzione di approfondire molto di più Tailwind solo perché è così popolare in questo momento. Ma non posso parlare in modo intelligente dei dettagli di Tailwind stesso e di come... La mia sensazione è che Chakra e Tailwind siano approcci alternativi. Ne prendi uno, non entrambi allo stesso tempo, ovviamente.

Mike: Non so ancora quali siano i pro ei contro di entrambi. Sono stato così innamorato di Chakra che continuo a usarlo per impostazione predefinita. Sono tipo, “Ok, lo so davvero bene ora. Lo adoro. Imparerò l'altro più tardi. Ma ovviamente Tailwind, estremamente popolare. Penso che Tailwind abbia il suo framework di base in un toolkit dell'interfaccia utente. È giusto?

Drew: Giusto. Sì.

Mike: Va bene. Questo sarebbe probabilmente più alla pari con il toolkit dell'interfaccia utente di Tailwind. Sulla homepage di Chakra, hanno un confronto sul perché potresti voler raggiungere l'uno o l'altro, ma non l'ho interiorizzato.

Drew: Sì. Va bene. Come accennato, per i progetti React e il modo in cui si manifesta piuttosto che per alcuni di questi sistemi di progettazione più tradizionali che ti danno un intero carico di nomi di classi da inserire nel tuo HTML e devi usare una struttura HTML, metti le classi giuste su esso. Questo è il modo in cui ottieni l'interfaccia utente che si manifesta nel tuo progetto. Con Chakra, poiché è basato su React, ti dà un intero carico di componenti per ciascuno di quegli elementi. Puoi semplicemente importare nel tuo progetto. Questi componenti racchiudono il proprio markup e lo stile, vero?

Mike: Sì. In realtà non dovrai scrivere una classe usando Chakra. non l'ho fatto Non so nemmeno se è possibile. L'intero paradigma React è una composizione di componenti e proprietà. L'incapsulamento dei componenti significa passare determinate proprietà nel componente. In Chakra, hai questa nozione di tema che è un paradigma globale. C'è un tema predefinito e ha valori per colore e spaziatura e alcune unità per tutte le cose comuni.

Mike: Puoi personalizzare quel tema. Lo personalizza a livello globale. Puoi aumentarlo come vuoi. Quando si chiama il componente stesso, ad esempio, un input di testo. Un componente di input. Avrà i colori predefiniti e il raggio del bordo, il riempimento e il margine come definiti dal tema. Quando vuoi modellarlo ulteriormente, se non vuoi farlo su base globale, ad esempio, quando specifico i margini inferiori, lo faccio caso per caso. Non lo faccio a livello globale perché può portare alla catastrofe. Lo passi semplicemente come un prompt.

Mike: Ci sono delle scorciatoie. Se ho un componente di input, dico semplicemente, MB è uguale, quindi un valore e applicherà il margine inferiore. Oppure hanno MX e MY per verticale e orizzontale. Oppure potresti semplicemente specificare M e passare la stringa come faresti con la proprietà CSS del margine. Non ci sono nomi di classe. Esegue tutti i nomi delle classi in modo dinamico e lo offusca lontano dall'utente.

Drew: Sì. Penso che sia qui che deve entrare il confronto con Tailwind. Perché il modo in cui Tailwind funziona, ti dà un intero carico di classi. Se vuoi aumentare il margine, c'è una classe che puoi inserire per aumentare il margine. In realtà sembra che tu stia prendendo la stessa cosa... È un'implementazione diversa, ma lo stesso approccio al modo in cui è stata progettata. In realtà stiamo usando oggetti di scena e tu stai passando un oggetto di scena per aggiustare quelle cose.

Drew: Quanto è facile personalizzare un design? È solo il caso di poter modificare i colori, i margini e il padding e farlo sembrare un po' diverso? O puoi davvero personalizzare un tema con Chakra?

Mike: Oh, puoi fare quello che diavolo vuoi. È ottimo. Puoi creare uno stile a livello di componente o di tema. Dipende solo da quanto creativo vuoi essere con esso. Sono riuscito a prendere alcuni componenti e fare cose selvagge con loro. Parte di ciò che lo rende davvero personalizzabile è che questi componenti sono piuttosto atomici.

Mike: Usando di nuovo l'esempio della casella di testo, se vuoi una casella di testo, il tuo componente è proprio quello. Puoi modellare tutto ciò che lo circonda o puoi modellare la casella di testo stessa. Oppure puoi cambiare il tema. Impostare i colori per rinominare tutto a livello globale.

Mike: In realtà ho twittato il creatore dell'interfaccia utente di Chakra, Seg, dicendo che dovrebbero mettere una galleria sul sito perché è davvero fantastico. Puoi creare dei bei disegni con esso. Sono molto vari e potresti non saperlo in superficie. Non so se l'interfaccia utente di Chakra abbia indicazioni che rendano ovvio che stai utilizzando un'interfaccia utente di Chakra per il tuo sito.

Mike: Ci ho visto delle cose molto carine. Ma puoi farci qualsiasi cosa. Ho fatto siti web statici. La homepage di Cut Into The Jamstack è finita. Proprio come un esempio. L'abbiamo usato in abbondanza su Echobind. Non ricordo se l'abbiamo usato per echobind.com. Ma sicuramente molti dei nostri siti clienti. Quindi l'app che ho creato, JamShots, è un'app. Non ha ancora pagine di marketing. Ma è solo interfaccia utente e tutta l'interfaccia utente è costruita usando Chakra.

Mike: Un'altra cosa mentre lodo Chakra è che c'è un altro sito web che ho usato molto ultimamente, e che uso in... lo introdurrò anche nel libro. Chakratemplates.net. Chakra-templates.net. È un modello di progettazione comune che chiunque contribuisca trovi un'unità eroe o un'unità di prezzo. Devono solo copiare e incollare il codice Chakra.

Mike: Lo uso interamente per la home page del libro perché mi ha fatto risparmiare così tanto tempo nello sviluppo del libro. È come, oh, hai un modello di prezzo. Fammi copiare e incollare quello. Fammi solo regolare un po' gli oggetti di scena dello stile in modo che tutto sia coerente sul mio sito. Questo è tutto. È solo un'altra cosa che è separata dal Chakra stesso, ma è un tale risparmio di tempo perché hai bisogno di queste cose su così tanti siti Web e chi vuole reinventare la ruota ogni volta.

Drew: Sembra che possa essere un vero risparmio di tempo, non solo per i progetti personali in cui vuoi lanciare qualcosa rapidamente, ma in un contesto di agenzia.

Mike: Oh, sì. Assolutamente.

Drew: Questo vale sia per le interfacce delle app che per i siti di marketing? Si inclina in un modo o nell'altro o è generalmente utile qualunque cosa tu stia costruendo?

Mike: Direi che sono entrambi. Lo è sicuramente. L'ho usato per entrambi. La nostra azienda lo ha utilizzato per entrambi. Costruiamo, direi che siamo fortemente orientati verso la creazione di applicazioni full stack e applicazioni mobili. Abbiamo sicuramente molto più bisogno di interfaccia utente che di materiale di marketing. Anche se a volte costruiamo anche quello. È utile per entrambi.

Mike: C'è qualcosa sul sito che menzionano, come quando non vorresti usare Chakra? Lo dicono a causa del modo in cui semplifica questa interfaccia CSS. Potrebbero esserci problemi quando hai molti dati sullo schermo. Se stai creando tonnellate e tonnellate di elementi DOM ed eseguendo molti aggiornamenti in tempo reale, potresti incontrare o meno problemi di prestazioni.

Mike: Non ho mai visto un problema di prestazioni. Ma non ho nemmeno creato qualcosa che fosse così intensivo di dati in tempo reale. È preoccupazione. Se dovessi creare un'app del genere, probabilmente vorrei comunque aumentare due approcci diversi, solo per vedere come si comportano con un sacco di cose. Ma si. È universalmente utile per entrambi i casi.

Drew: Immagino che ci sia sempre un compromesso, non c'è con le scelte tecnologiche? Qualcosa che lo renda davvero, davvero semplice. Davvero veloce da implementare. Il compromesso potrebbe essere una volta che crei 1.000 punti dati o qualsiasi altra cosa su una pagina, quel metodo di lavoro non funzionerà bene e ti rallenterà.

Drew: Sì. Penso che sia giusto. Tendo a trovare nelle scelte tecnologiche, la cosa più importante è solo sapere. Giusto per sapere quali sono i compromessi e quali sono i limiti. Nessuno di loro è buono o cattivo. Devi solo trovare un equilibrio appropriato per la tua situazione.

Drew: Come ti aspetteresti di trovare con un sistema di progettazione di questo tipo, viene fornito con componenti per la tipografia. Per la disposizione. Poi giù per il nocciolo della questione dei pulsanti e degli elementi dei moduli e c'è una libreria di icone. C'è praticamente tutto ciò che ti aspetteresti di vedere sulla pagina del lavello di una cucina di un sistema di design. Hai tutto lì. Mi sembra tutto abbastanza moderno. Ho notato che il componente della griglia di layout utilizza effettivamente la griglia CSS, che è sempre piacevole da vedere. Non offre solo una scatola flessibile.

Mike: Oh, sì. Totalmente.

Drew: È generalmente molto flessibile con cui lavorare? Trovi che gli elementi del layout siano in grado di creare qualsiasi tipo di interfaccia utente di cui hai bisogno?

Mike: Sì. Sì. Assolutamente. La cosa fantastica è che, in alcuni casi, forniscono più di un livello di astrazione. Nel caso della griglia CSS, hanno una griglia semplice che è come, ok. Vuoi inserirlo ed ecco la tua griglia. Metti semplicemente delle cose al suo interno e specifichi, penso il numero di colonne o qualcosa del genere. Allora hai una griglia.

Mike: Ma se hai bisogno di avere un po' più di flessibilità nel comportamento della griglia, allora hai un componente di griglia generico, che probabilmente è... Il componente di griglia semplice probabilmente avvolge l'altro componente di griglia. È solo un'altra facciata sopra se stessa.

Mike: Quell'approccio alla composizione dei componenti, è un paradigma prezioso nel mondo React per la stessa cosa. Se hai un componente che è molto versatile e ha molti oggetti di scena, allora potrebbe esserci una serie di casi d'uso per i quali vuoi usare il componente in un modo abbastanza comunemente. Basta avvolgerlo con un altro componente con puntelli statici o pre-specificati per i componenti più robusti.

Mike: Usano questo approccio molto bene in Chakra. Non mi sono imbattuto in nulla che non ci possa fare ancora. Sono sicuro che è là fuori da qualche parte. O qualcosa che è solo un po' più complicato da fare. Ma in genere non è ancora successo. Non che mi venga in mente almeno.

Drew: Beh, una delle cose che mi ha fatto davvero piacere vedere e qualcosa che hai menzionato anche in precedenza, è che sembra esserci questa forte attenzione all'accessibilità.

Mike: Sì.

Drew: Certamente nelle informazioni promozionali. È nato nel codice stesso? Praticano ciò che predicano? Ha davvero una buona accessibilità integrata?

Mike: Penso di sì. Il più vicino che ho fatto per metterlo alla prova è eseguire Lighthouse contro di esso. Fornisce costantemente punteggi elevati per l'accessibilità. In genere userò Chakra Next.js. Next.js è la performance perfetta. È abbastanza spesso che vedrai punteggi alti e tutto il resto. Ho appena twittato oggi su come la home page del libro abbia tre dei quattro punteggi di Lighthouse. C'è accessibilità, migliori pratiche, prestazioni e un quarto. Non sto pensando in questo momento.

Mike: Tutto tranne le prestazioni è arrivato vicino al 100%. La parte delle prestazioni spetta a me solo perché metto molto sulla pagina e non l'ho ancora ottimizzata. Tende a farlo. I punteggi di accessibilità in Lighthouse sono ottimi ogni volta che utilizzo l'interfaccia utente di Chakra.

Drew: È fantastico. Hai detto che stanno usando il rendering lato server e cosa hai. Cose come Next e Gatsby e quello che ho per te, non è assolutamente un problema, vero? Non ci sono ostacoli da tenere presente nell'usare Chakra con quelli?

Mike: Oh, no. Affatto. Non l'ho usato. Tendo a concentrarmi su Next.js. Non ho collegato Gatsby o nessuno degli altri strumenti SSR. Ma finché il framework non ha nulla che gli impedisca di usarlo come tale, allora dovrebbe andare bene.

Mike: Per React, Chakra fornisce un provider di API di contesto. Un provider di temi in modo che quando tu... Nelle mie app Next.js, ad esempio, hai un... Next.js ha un file JS o TS dell'app di sottolineatura che avvolge ogni pagina dell'applicazione. Basta collegare il provider del tema lì e Chakra fa il resto del lavoro e diventa disponibile ovunque. Non ci sono ostacoli da aggiungere in Next.js sicuramente. Ma immagino di non farlo nemmeno con Chakra.

Drew: Chakra usa TypeScript? Credo di sì, vero?

Mike: Lo supporta. Sì.

Drew: Lo supporta. Questo è un grande vantaggio per le persone che usano TypeScript già nei loro progetti. Ci sono aspetti negativi se le persone non stanno già utilizzando TypeScript?

Mike: Non credo. Uso TypeScript per impostazione predefinita in tutti i miei progetti, così come Echobind. Ma quando faccio le cose a livello personale, uso... mi piace dire una spruzzata di TypeScript. Il dattiloscritto è estremamente prezioso per ridurre gli errori creando tipi statici. C'è un vettore per questo, però, dove, a seconda della tua conoscenza, TypeScript può essere un vero ostacolo.

Mike: La mia soglia minima per... Il rigore di TypeScript che uso è piuttosto basso semplicemente perché puoi ottenere molto valore da TypeScript con la digitazione di base. Eviterà molti incidenti comuni. Quando entri nella digitazione più avanzata, se non ti senti molto a tuo agio con quella roba, può davvero rallentarti e frustrarti.

Mike: Questo è solo per dire la stessa cosa con Chakra e TypeScript. Tendo a usare una piccola quantità di TypeScript, almeno all'inizio fino a quando non sto davvero arricchendo e stabilizzando un progetto. Ma non presenta problemi nell'uso di Chakra, con o senza TypeScript. È fantastico con. Lo adoro con, ma puoi sicuramente usarlo anche senza.

Drew: Sì. Trovo che con TypeScript ottieni l'80% dei vantaggi, come dici tu, con pochi tipi. Se vai troppo lontano nella tana del coniglio, finisci con uno script che è principalmente TypeScript. Poi un po' di JavaScript fino in fondo.

Mike: Oppure passi così tanto tempo a cercare di capire il modo giusto per digitare qualcosa e il tuo cervello esplode. È così che metti qualsiasi o sconosciuto. L'hai accorciato. Cosa che sostengo in casi del genere. Se ci vuole troppo tempo per fare qualcosa, allora c'è una leva che puoi tirare.

Drew: La documentazione di Chakra sembra essere davvero ben presentata, ho pensato, con... Ha una panoramica di ogni componente. Quindi include davvero utilmente tutte le note tecniche sulle considerazioni di progettazione che sono state fatte durante l'implementazione di quel componente. Il che, come ingegnere front-end, penso che sia fantastico. Stanno parlando la mia lingua. Capisco. So cosa sta facendo il componente leggermente sotto il cofano.

Drew: Questo è solo dal mio punto di vista, sfogliare la documentazione senza un vero progetto su cui sto lavorando. Quando stai effettivamente lavorando a un progetto e ne sei immerso nelle erbacce, solo la documentazione regge? È utile come sembra?

Mike: Oh sì. Assolutamente. La mia prospettiva è un po' diversa. Non ho sempre bisogno di sapere cosa sta succedendo sotto il cofano, ma sento di poter dedurre di solito. Se sto guardando un componente della scatola, sto solo guardando i documenti ora mentre stiamo parlando per un aggiornamento. Se guardo un componente della scatola, dico: "Va bene. Questo è probabilmente un div per impostazione predefinita. Lo vedo passare nelle proprietà del gradiente, qualunque cosa.

Mike: Posso avere un'idea di cosa sta succedendo nel cofano senza comprendere appieno la loro magia per tradurre i CSS. Traduci gli oggetti di scena in CSS. Ma la documentazione è ottima in quanto è molto lineare. È molto coerente. Elenca tutto con esempi. Un piccolo copia e incolla.

Mike: Usa solo uno spazio bianco davvero buono, quindi guardare la pagina non sembra schiacciante. Puoi trovare facilmente ciò di cui hai bisogno. Anche la loro ricerca è fantastica. La loro ricerca è utile. Il 90% delle volte, penso che sia quello per cui vado lì. Potrebbe andare lì e vedere se esiste un componente per fare qualcosa. Di solito lo fa. E inciampare in qualcos'altro che era utile che non sapevo. O semplicemente rinfrescandomi su alcuni dei principi. Posso sempre trovare praticamente quello che mi serve qui.

Drew: L'unica cosa che non mi è piaciuta dei documenti quando ho dato un'occhiata in giro è stato il numero di annunci su di essi. Su ogni pagina per la loro offerta commerciale di Chakra UI Pro.

Mike: Non li avevo visti. Interessante. L'ho visto. L'ho sicuramente visto. Ma non lo vedo adesso. O si. Bene. C'è Chakra UI Pro. Immagino di averlo filtrato mentalmente. Ti sento. Almeno non è troppo grande e in faccia.

Drew: Non è troppo grande. È solo nel posto sbagliato. È proprio dove stai cercando le informazioni. Che credo sia il motivo per cui l'hanno fatto. Vale la pena menzionarlo considerando l'ecosistema e tutto ciò che circonda il progetto è che c'è un set di componenti pro che è ... immagino sia equivalente ad alcune delle cose che sono nell'interfaccia utente di Tailwind che è lì. Le pagine di marketing e qui ci sono componenti e altro di queste sezioni composte di pagine e pagine intere e layout e cose. Che tu, è disponibile dai creatori di Chakra, ma come offerta commerciale.

Mike: Sì. Basta dare una rapida occhiata ora. Alcuni di questi sono effettivamente disponibili. Oppure sono disponibili versioni gratuite come i modelli Chakra. I modelli di Chakra, immagino, siano la soluzione open source per Chakra Pro o il concorrente open source. Sono sicuro che otterrai un sacco di soldi pagando per questo. Sembra che Chakra Pro sia estremamente robusto ea prezzi ragionevoli se hai bisogno di un professionista pagante per questi. Ci sono un paio di opzioni per il tuo progetto, a quanto pare.

Drew: Sì. Sembra che ci sia un bel ecosistema costruito attorno ad esso. Sai da quanto tempo va avanti il ​​progetto e cosa c'è di seguito? È ampiamente utilizzato nella comunità React?

Mike: Voglio dire di sì. Non so fino a che punto. Sarei curioso di vedere qual è la quota di mercato, immagino, di Tailwind rispetto a Chakra al giorno d'oggi. So che Chakra ha ricevuto un premio relativamente di recente. Premio GitNation React per il progetto di maggior impatto per la comunità. Direi che è abbastanza grande e abbastanza ben abbracciato. Con una buona ragione, il che è fantastico. Le persone si divertono sicuramente. Non sono il solo.

Drew: Una cosa a cui vale sempre la pena pensare quando si introduce una dipendenza nel progetto è cosa succede quando è necessario aggiornare tale dipendenza.

Mike: Sì.

Drew: Chakra viene continuamente migliorato, immagino. È un caso che una volta importato e costruito con esso, lo lasci bloccato su una determinata versione? O è generalmente sicuro tenersi aggiornati? È relativamente stabile in termini di design e cose del tuo sito che non cambiano con gli aggiornamenti di Chakra?

Mike: È stato così lontano. Sì. Principalmente, direi che è dovuto al progresso dello sviluppo. Sono sulla versione 1.6.3 in questo momento. Alcuni mesi fa, sono passati da zero a uno. Quella è stata l'unica volta in cui hanno avuto modifiche sostanziali. Da allora, hanno costantemente rilasciato versioni di funzionalità e correzioni di bug.

Mike: Negli ultimi almeno un paio di mesi, tutto è stato solo un'aggiunta. Aggiunte e correzioni. Non ci sono modifiche sostanziali coinvolte. Non so come sia la tabella di marcia, ma immagino che continuerà ad esserlo. Ogni volta che l'ho aggiornato, una di queste versioni minori, è andato tutto bene. Non ho mai visto qualcosa staccarsi da esso. Ma quando sono usciti con la 1.0, ci sono state alcune modifiche importanti. Non ricordo che sia stato catastrofico però.

Drew: Sai qual è la situazione con le dimensioni dei fasci e la capacità di scuotere l'albero Chakra? Aggiunge molto peso al tuo progetto o le cose vengono importate solo quando le usi?

Mike: Sinceramente non mi ricordo a caso. Probabilmente dovrei saperlo. Non ho notato che aggiunge molto peso. Principalmente perché stai importando i componenti singolarmente. Non importare tutto Chakra o qualcosa del genere. Direi che è in linea con il supporto per lo scuotimento degli alberi, ma non l'ho messo alla prova. Finora, però, non ho avuto cose che avessero un peso enorme proveniente specificamente da esso.

Drew: Sì. Questa è sempre una considerazione importante, vero?

Mike: Sì.

Drew: C'è qualcos'altro che dovremmo sapere sull'interfaccia utente di Chakra prima di immergerci direttamente e usarla in un progetto?

Mike: No. È fantastico. C'è anche una comunità piuttosto attiva. Vedo spesso gli aggiornamenti. Sto guardando la documentazione ora e vedo componenti che non avevo mai visto prima. Vedo che ci sono molte aggiunte di funzionalità in corso. È fantastico.

Drew: Sì. È grandioso. Hai un libro in uscita chiamato Cut Into The Jamstack, che è una versione in anteprima. Una versione beta al momento. Lo stai autopubblicando. È giusto?

Mike: Sì. Sì. Sono. Era il mio primo tentativo di un libro tecnico. Voglio solo farlo uscire senza impegnarmi in qualcosa del tipo, è formale, immagino. Sono anche una persona a cui piace l'informalità, specialmente quando si creano cose. Mi dà la possibilità di farlo a modo mio facendo così.

Drew: Il libro guida letteralmente il lettore attraverso la creazione di un software come app di servizio.

Mike: Sì.

Drew: Tutto sullo Jamstack. Perché hai deciso di scrivere questo ora e di adottare questo approccio con il libro?

Mike: Bella domanda. Ho programmato per circa 20 anni e penso di aver tentato di scrivere un libro qualche tempo fa e semplicemente non ha preso forma. Sono a un punto della mia carriera in cui voglio davvero condividere più conoscenze. Lo uso da così tanti anni e sento il desiderio di metterne di più là fuori e aiutare gli altri.

Mike: Intorno all'ottobre dell'anno scorso, ho avuto questo... volevo lanciare qualcosa che fosse un prodotto. Un ebook sembrava davvero un buon modo per iniziare. Sono davvero appassionato di Next.js e delle cose che puoi fare con esso. Uso il termine Jamstack e considero Next.js come parte di Jamstack perché ha una generazione di siti statici come impostazione predefinita.

Mike: Ma penso che una cosa di cui non si parli abbastanza, secondo me, o che potrebbe usare qualche spiegazione in più è costruire software come applicazioni di servizio con esso. Perché Jamstack non è solo per i siti web. Funziona molto bene per i siti Web basati sui contenuti perché è statico, scattante e SEO friendly.

Mike: Ma ci sono così tante funzionalità avanzate lì, specialmente in Next.js, dove Vercel ha tenuto la sua conferenza Next.js ieri e stanno rilasciando funzionalità sempre più sorprendenti. Sono appassionato di creazione di software come servizio. I siti Web di software sono fantastici, ma il software è pensato per fare cose.

Mike: Questo stack per me rappresenta il futuro del software come sviluppo di servizi. Mi ricorda com'era Ruby on Rails quando è uscito. È stata un'evoluzione, per così dire. Ha automatizzato e semplificato molte cose che dovevi fare manualmente. Ha accelerato il ritmo di sviluppo e ne ha aumentato la qualità.

Mike: Next.js e Jamstack, Vercel e Chakra UI, stanno tutti producendo cose che semplificano molte cose per te. Next.js, semplifica molti problemi relativi alla velocità e problemi relativi all'accessibilità. Instalizzazione. Questi sono tutti, il routing è fatto per te. Non devi preoccuparti del routing lato client o lato servizio. È automatico. Chakra UI lo fa con accessibilità e temi. Questi strumenti messi insieme, semplicemente... L'esperienza dello sviluppatore diventa davvero eccezionale e tutto semplicemente... Ti dà la libertà di creare davvero software.

Mike: Per rispondere alla tua domanda. Il motivo per cui ho pubblicato un libro ora è perché è il momento giusto in cui voglio davvero pubblicare qualcosa e con l'ecosistema Jamstack che inizia a concretizzarsi e crescere. Mi ha anche dato la possibilità di scrivere più codice in Jamstack, cosa che adoro.

Drew: Penso che, come dici tu, sia facile accettare l'idea di Jamstack quando pensi ai siti Web e ai siti Web generalmente leggeri. Ma fare il passo successivo per pensare a come utilizzare l'approccio per creare un'applicazione Web completa, è molto più difficile. Penso che sia un ostacolo più grande da superare se sei abituato a pensare nella mentalità lato server.

Mike: Sì.

Drew: È un salto molto più grande da vedere, ok. Posso inviare la mia autenticazione a un servizio-

Mike: Sì.

Drew: ... e io posso... suppongo che per i lettori, dal punto di vista del lettore del tuo libro, semplicemente esaminando e costruendo questo esempio, seguendo insieme a te, è probabilmente un ottimo modo per superare quell'ostacolo per aiutare sposta delicatamente la tua mentalità, ok. È così che potrei fare tutte queste cose, ma su Jamstack. Saresti d'accordo con quello?

Mike: Sì. Questo è quello che spero. Penso di sì. Questo è davvero ciò che è inteso. Di recente stavo firmando un discorso, un discorso a una conferenza che... Parte della mia motivazione per l'argomento e il modo in cui ho deciso di insegnare in questo libro è che potrei insegnarti un linguaggio di programmazione. Un framework, ma è meglio presentarti lo stack in modo pratico perché ogni sviluppatore che ha molta esperienza è bravo a cercare documentazione, cercare su Google e usare l'overflow dello stack. Perché dovrei sprecare il tuo tempo a insegnartelo?

Mike: Voglio darti un rapido tuffo nello stack e cosa posso fare con esso. Raccoglierai ciò che è fantastico in ciascuno dei singoli pezzi. NextOFF e Prisma. Next.js e Chakra. Ti collegherò alla documentazione solo per farti risparmiare un paio di clic. Ma vedrai attraverso un esempio interattivo, come questi pezzi si collegano tra loro. Avrai anche una comprensione delle parti difficili.

Mike: Ad esempio, una cosa di cui parlerò in modo approfondito è questa funzionalità che sto costruendo per il caricamento asincrono di più file. Next.js ha un front-end e un back-end. Sebbene nella parte anteriore del front-end e nella parte posteriore del front-end, se usi quell'analogia, hai il livello Reagisci. Quindi hai il livello del nodo. Ci sono questi percorsi API.

Mike: Se vuoi eseguire il caricamento di più file con quello e utilizzare un servizio, uso Cloudinary nel libro. Ma se usi un servizio API per i tuoi caricamenti di immagini e media, cosa che dovresti, ci sono molti pezzi in movimento lì. C'è il lato client, con cui l'utente interagisce. Ci sono le richieste API al Cloudinary o all'altro provider. Ma poi devi fare più richieste API per renderlo efficiente. Devi eseguire alcune firme contro Cloudinary, per cui hai bisogno di una chiamata API.

Mike: Devi prendere quel segno e devi fare il caricamento, che va dal browser e aggira la tua API e va direttamente a Cloudinary. Quindi è necessario salvarlo nel database, che utilizza il back-end front-end del front-end. Ci sono molti pezzi e Next.js... Nella comunità Next.js, non c'è ancora un plugin open source per questo. 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. Sì. 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.

Disegnato: Fantastico.

Mike: I've got another one coming up in probably a couple of weeks. Sì. Sì. 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. Questo è tutto.

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. Hai avuto qualche parola d'addio?

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