Smashing Podcast Folge 40 mit Mike Cavaliere: Was ist Chakra UI für React?

Diese Episode wurde freundlicherweise von unseren lieben Freunden bei Wix unterstützt, die dafür bekannt sind, dass sie dir die Freiheit geben, deine Webpräsenz genau so zu erstellen, zu gestalten, zu verwalten und zu entwickeln, wie du es möchtest. Danke!

In dieser Folge sprechen wir über die Chakra-Benutzeroberfläche. Was ist das und wie kann es bei Ihren React-Projekten helfen? Drew McLellan spricht mit dem Experten Mike Cavaliere, um es herauszufinden.

Notizen anzeigen

• Chakra-UI
• Mike auf Twitter
• Mikes persönliche Website
• Schnitt in das Jamstack-Buch

Wöchentliches Update

• Entwerfen mit Code: Ein moderner Designansatz
  geschrieben von Mikolaj Dobrucki
• Automatisieren von Screenreader-Tests auf macOS mit Auto VO
  Geschrieben von Cameron Cundiff
• Der Aufstieg von Design Thinking als Problemlösungsstrategie
  geschrieben von Josh Singer
• So führen Sie ein UX-Audit für eine große EdTech-Plattform durch
  geschrieben von Mark Lankmilier
• Erstellen eines Multi-Autoren-Blogs mit Next.js
  Geschrieben von Dom Habersack

Abschrift

Drew McLellan: Er ist Senior Software Engineer für eine Agentur namens Echobind. Er schreibt seit zwei Jahrzehnten Code und verwendet die ganze Zeit JavaScript. Er liebt den Jamstack und sein neues Buch „Cut Into The Jamstack“ lehrt den Leser, wie man eine Software-as-a-Service-App von Grund auf neu erstellt. Wir wissen, dass er sich im Jamstack auskennt, aber wussten Sie, dass er sich einmal im Erdnussbuttergang verirrt hat? Meine großartigen Freunde, bitte heißen Sie Mike Cavaliere willkommen. Hallo Mike. Wie geht es dir?

Mike Cavaliere: Ich bin heute absolut umwerfend.

Drew: Das ist gut zu hören. Ich wollte heute mit Ihnen über ein Projekt sprechen, von dem ich wirklich noch nichts gehört hatte, bis ich es in Ihrem Jamstack-Buch fand. Ich bin mir nicht sicher, wie ich es vermisst habe, denn es scheint ausgereift und gut dokumentiert zu sein und ein echtes … Einfach ein großartiges Projekt. Ich hoffe, dass wir heute darüber reden können und ich aufholen kann, um herauszufinden, was ich die ganze Zeit hätte wissen sollen. Ich spreche natürlich von Chakra UI. Sag mir, was ist Chakra UI? In welchem ​​Raum ist es und welches Problem löst es für uns?

Mike: Chakra UI ist ein UI-Framework für React oder UI-Toolkit, ich denke, sie formulieren es so. Heutzutage möchten Sie in keinem Anwendungsstapel eine Benutzeroberfläche von Grund auf neu erfinden. Sie möchten sich ein Toolkit schnappen. Das ist schon eine Weile so.

Mike: Chakra UI ist ein großartiger Ansatz für ein React-UI-Toolkit. Es hat eine Reihe von Vorteilen, aber einer ist, dass es ... Zum einen ist es robust. Das heißt, es hat einfach jedes UI-Element, das Sie sich vorstellen können. Es hat Schalter. Es hat Wrapper um Gitter. Es hat alle Arten von Dingen Formelemente.

Mike: Es ist sehr komponierbar, so dass alles Stil-Requisiten verwendet. Ihre Komponenten sind sofort einsatzbereit. Sie können sie löschen und so verwenden, wie sie sind. Aber wenn Sie eine Anpassung vornehmen möchten, ist es sehr einfach, einige Stileigenschaften zu übergeben. Sie sind vollständig zugänglich. Die Barrierefreiheit, von der alle reden, aber immer vergisst, sie zu implementieren, oder deren Implementierung ein wenig Aufwand erfordert, ist für Sie eingebaut.

Mike: Es ist nicht ungewöhnlich, dass ich etwas mit Chakra UI zusammenstelle und eine sehr gute Lighthouse-Punktzahl bekomme. Eigentlich habe ich mir heute gerade die Website von Cut Into The Jamstack angesehen, und die Zugänglichkeitsbewertung ist sehr hoch. Es ist auch sehr vollständig themenfähig. Sie können die Themenkonfiguration von Anfang an festlegen. Es gibt nur eine lange Liste von Vorteilen.

Mike: Dadurch entwickelt es sich sehr schnell, was mich ursprünglich daran gereizt hat. Echobind, wir verwenden es intern. Aber für mich habe ich keinen Sinn für Design. Ein bisschen, aber ich bin keineswegs ein Designer. Ich kann Komponenten von Chakra nehmen und die Dinge so leicht ändern, dass sie konsistent sind und die Dinge sofort gut aussehen. Du kannst dich schnell weiterentwickeln. Entwicklererfahrung ist großartig. Es ist einfach großartig auf so vielen Ebenen.

Mike: Das Letzte, was ich sagen werde, bevor ich weiter darüber schwafele. Aber es hat auch viele React Hooks, die Helfer für sehr häufige Funktionen sind, die mit diesen von Ihnen verwendeten Elementen einhergehen. Zum Beispiel im Dunkelmodus. Es gibt eingebaute Haken für die Verwendung eines helleren Dunkelmodus, mit denen Sie auf sehr aufdringliche Weise die Farben in Ihrem Thema umschalten können.

Mike: Es gibt noch eine für die verwendete Offenlegung, die zum Umschalten von Dingen wie Modulen dient. Wobei Sie immer einen Ein-Aus-Zustand benötigen. Aber der Hook vereinfacht das noch mehr, sodass Sie sich auf die Dinge konzentrieren können, die das Framework nicht automatisch ableiten kann. Ich schneide es dort ab, weil das viel war.

Drew: Das ist wirklich gut. Nur damit ich mein Verständnis richtig habe, zuallererst ist es Shakra, nicht Chakra? Schakra?

Mike: Ich wäre da nicht der Experte. Ich sage Shakra nur wegen Yoga. Aber wir müssen die Gründer bitten, es noch einmal zu überprüfen.

Drew: Es ist ein Standard-Designsystem, das Sie verwenden können, um die Benutzeroberfläche für Ihr Projekt zu erstellen.

Mike: Ja.

Drew: Es ist speziell für React-Projekte.

Mike: Ja. Es gibt ein Chakra Vue-Projekt da draußen. Ich bin kein großer Vue-Typ, aber ich weiß, dass es ihn gibt. Es mag auch für andere Frames geben, aber ich bin sehr, sehr auf React fokussiert, also habe ich den Chakra-Standard-React verwendet.

Drew: Ja. Ich kenne React aus der Vergangenheit. Ich habe React verwendet, als ich bei Netlify gearbeitet habe. Jetzt mache ich alles in Vue. Das war eines der ersten Dinge, die ich mir angesehen habe. Oh, gibt es ein Vue? Das sieht gut aus. Gibt es davon eine Vue-Version? Ich habe eine Vue-Version davon gefunden und sie scheint ziemlich weit hinterher zu sein. Ich denke, es ist auf 0.9 oder so und nicht auf 1.6 oder was auch immer die aktuelle React-Version ist. Ich bin mir nicht sicher, wie aktuell das ist.

Drew: Wir haben da draußen ziemlich veraltete Frameworks. Dinge wie Foundation UI, Bootstrap, Bulma. Sie gibt es schon seit langer Zeit und sie scheinen eine frühere Generation von Frameworks zu sein, wie es scheint. Dann haben wir einige modernere Ansätze. Ich denke, viele Zuhörer werden mit Tailwind und dem Tailwind UI-Projekt vertraut sein. Wo fällt Chakra UI in diese Landschaft? Es ist näher an etwas, das Rückenwind könnte … Ein Ansatz, den Rückenwind verfolgen könnte. Ist das korrekt?

Mike: Ich denke schon. Zugegeben, ich wollte mich schon viel mehr mit Tailwind beschäftigen, nur weil es gerade so beliebt ist. Aber ich kann nicht intelligent über die Besonderheiten von Tailwind selbst sprechen und wie … Mein Gefühl ist, dass Chakra und Tailwind alternative Ansätze sind. Sie greifen offensichtlich nach einem, nicht nach beiden gleichzeitig.

Mike: Ich weiß noch nicht, was die Vor- und Nachteile für beide sind. Ich war einfach so verliebt in Chakra, dass ich es einfach weiterhin standardmäßig benutze. Ich sage: „Okay, ich weiß das jetzt wirklich gut. Ich liebe es. Den anderen lerne ich später.“ Aber Tailwind ist offensichtlich sehr beliebt. Ich denke, Tailwind hat sein Basis-Framework in einem UI-Toolkit. Ist das fair?

Drew: Richtig. Ja.

Mike: Okay. Dies würde wahrscheinlich eher dem UI-Toolkit von Tailwind entsprechen. Auf der Chakra-Homepage haben sie zwar einen Vergleich, warum Sie vielleicht nach dem einen oder anderen greifen möchten, aber ich habe es nicht verinnerlicht.

Drew: Ja. Das ist gut. Wie wir bereits erwähnt haben, sollten Sie für React-Projekte und die Art und Weise, wie sich das manifestiert, anstatt einiger dieser traditionelleren Designsysteme, die Ihnen eine ganze Menge Klassennamen geben, die Sie in Ihr HTML einfügen können, und Sie müssen eine HTML-Struktur verwenden, die richtigen Klassen verwenden es. Auf diese Weise erhalten Sie die UI-Manifestation in Ihrem Projekt. Da Chakra auf React basiert, gibt es Ihnen eine ganze Menge Komponenten für jedes dieser Elemente. Sie können einfach in Ihr Projekt importieren. Diese Komponenten kapseln ihr eigenes Markup und Styling, oder?

Mike: Ja. Sie müssen nicht wirklich einen Kurs schreiben, der Chakra verwendet. Ich habe nicht. Ich weiß nicht einmal, ob es möglich ist. Das gesamte React-Paradigma ist eine Komponentenzusammensetzung und -eigenschaften. Kapselung von Komponenten bedeutet, dass Sie bestimmte Eigenschaften an die Komponente übergeben. In Chakra haben Sie diese Vorstellung von einem Thema, das ein globales Paradigma ist. Es gibt ein Standardthema und es hat Werte für Farbe und Abstand und bestimmte Einheiten für alle gängigen Dinge.

Mike: Sie können dieses Thema anpassen. Es passt es global an. Sie können es beliebig erweitern. Beim Aufruf der Komponente selbst beispielsweise eine Texteingabe. Eine Eingabekomponente. Das wird Standardfarben und Randradius sowie Polsterung und Rand haben, wie durch das Thema definiert. Wenn Sie es weiter gestalten möchten, wenn Sie es nicht auf globaler Basis tun möchten, z. B. wenn ich untere Ränder festlege, mache ich das von Fall zu Fall. Ich mache das nicht auf globaler Ebene, weil das zu einer Katastrophe führen kann. Sie übergeben es einfach als Eingabeaufforderung.

Mike: Es gibt Shortcut-Eingabeaufforderungen. Wenn ich eine Eingabekomponente habe, sage ich einfach, MB ist gleich, und dann einen Wert, und es wird der untere Rand angewendet. Oder sie haben MX und MY für vertikal und horizontal. Oder Sie könnten einfach M angeben und den String wie die CSS-Eigenschaft margin übergeben. Es gibt keine Klassennamen. Es macht die Klassennamen alle dynamisch und verschleiert das vor dem Benutzer.

Drew: Ja. Ich denke, das ist der Punkt, an dem der Vergleich mit Tailwind ins Spiel kommen muss. Denn die Art und Weise, wie Tailwind funktioniert, bietet Ihnen eine ganze Menge Klassen. Wenn Sie die Marge erhöhen möchten, gibt es eine Klasse, die Sie anlegen können, um die Marge zu erhöhen. Es hört sich tatsächlich so an, als würden Sie das gleiche nehmen ... Es ist eine andere Implementierung, aber der gleiche Ansatz für die Architektur. Wir verwenden tatsächlich Requisiten und Sie geben eine Requisite weiter, um diese Dinge anzupassen.

Drew: Wie einfach ist es, ein Design anzupassen? Geht es nur darum, Farben, Ränder und Polsterung zu optimieren und es ein bisschen anders aussehen zu lassen? Oder kann man mit Chakra wirklich ein Thema brandmarken?

Mike: Oh, du kannst machen, was zum Teufel du willst. Es ist toll. Sie können auf Komponentenebene oder auf Designebene gestalten. Es kommt nur darauf an, wie kreativ man damit umgehen möchte. Ich habe es geschafft, einige Komponenten zu nehmen und einige wilde Dinge damit zu tun. Ein Teil dessen, was es wirklich stylbar macht, ist, dass diese Komponenten ziemlich atomar sind.

Mike: Um das Textfeld-Beispiel noch einmal zu verwenden, wenn Sie ein Textfeld möchten, ist Ihre Komponente genau das. Sie können alles um ihn herum gestalten oder Sie können das Textfeld selbst gestalten. Oder Sie können das Thema ändern. Festlegen der Farben, um alles global umzubenennen.

Mike: Ich habe tatsächlich den Schöpfer von Chakra UI, Seg, getwittert und gesagt, dass sie eine Galerie auf die Seite stellen sollten, weil sie wirklich großartig ist. Sie können damit einige schöne Designs erstellen. Sie sind sehr vielfältig und Sie wissen es vielleicht nicht an der Oberfläche. Ich weiß nicht, ob die Chakra-Benutzeroberfläche Tells enthält, die deutlich machen, dass Sie eine Chakra-Benutzeroberfläche für Ihre Website verwenden.

Mike: Ich habe einige ziemlich nette Sachen damit gesehen. Aber man kann damit alles machen. Ich habe statische Websites gemacht. Die Homepage von Cut Into The Jamstack ist damit fertig. Nur als ein Beispiel. Wir haben es bei Echobind reichlich verwendet. Ich kann mich nicht erinnern, ob wir das für echobind.com verwendet haben. Aber sicherlich viele unserer Kundenseiten. Dann die App, die ich entwickelt habe, JamShots, es ist eine App. Es hat noch keine Marketingseiten. Aber es ist alles nur UI und all diese UI wird mit Chakra erstellt.

Mike: Eine andere Sache, während ich Chakra lobe, ist, dass es eine andere Website gibt, die ich in letzter Zeit oft benutzt habe und die ich in … benutze, die ich auch in das Buch einführen werde. Chakratemplates.net. Chakra-templates.net. Es ist ein gängiges Designmuster, dass jeder, der einen Beitrag leistet, eine Heldeneinheit oder eine Preiseinheit findet. Sie müssen nur den Chakra-Code kopieren und einfügen.

Mike: Ich verwende das ausschließlich für die Buch-Homepage, weil es mir einfach so viel Zeit bei der Entwicklung gespart hat. Es ist wie, oh, Sie haben ein Preismodell. Lassen Sie mich das kopieren und einfügen. Lassen Sie mich nur die Stil-Requisiten ein wenig anpassen, damit alles auf meiner Seite konsistent ist. Das ist es. Es ist nur eine andere Sache, die von Chakra selbst getrennt ist, aber es spart einfach so viel Zeit, weil Sie diese Dinge auf so vielen Websites brauchen und wer schon das Rad jedes Mal neu erfinden möchte.

Drew: Es scheint eine echte Zeitersparnis zu sein, nicht nur für persönliche Projekte, bei denen Sie schnell etwas einführen möchten, sondern auch im Agenturkontext.

Mike: Ach ja. Absolut.

Drew: Gilt das gleichermaßen für App-Oberflächen wie für Marketingseiten? Ist es in die eine oder andere Richtung schief oder ist es einfach im Allgemeinen nützlich, was auch immer Sie bauen?

Mike: Ich würde sagen, es ist beides. Das ist es definitiv. Ich habe es für beides verwendet. Unser Unternehmen hat es für beides verwendet. Wir entwickeln, ich würde sagen, wir tendieren stark zum Erstellen von Full-Stack-Anwendungen und mobilen Anwendungen. Wir brauchen definitiv viel mehr UI als Marketingkram. Obwohl wir das manchmal auch bauen. Es ist für beide nützlich.

Mike: Es gibt etwas auf der Seite, das sie erwähnen, wie zum Beispiel wann würdest du Chakra nicht benutzen wollen? Sie sagen das wegen der Art und Weise, wie es dieses Schnittstellen-CSS vereinfacht. Es kann zu Herausforderungen kommen, wenn Sie viele Daten auf dem Bildschirm haben. Wenn Sie Tonnen und Tonnen von DOM-Elementen erstellen und viele Echtzeit-Updates durchführen, können Sie auf Leistungsprobleme stoßen oder auch nicht.

Mike: Ich habe noch nie ein Leistungsproblem gesehen. Aber ich habe auch noch nie etwas gebaut, das in Echtzeit so datenintensiv war. Es ist Sorge. Wenn ich eine solche App erstellen würde, würde ich wahrscheinlich sowieso zwei verschiedene Ansätze aufpeppen wollen, nur um zu sehen, wie sie mit einer ganzen Menge abschneiden. Aber ja. Es ist universell nützlich für diese beiden Fälle.

Drew: Ich schätze, es gibt immer einen Kompromiss, nicht bei der Wahl der Technologie? Etwas, das es wirklich, wirklich einfach macht. Wirklich schnell umzusetzen. Der Kompromiss besteht möglicherweise darin, dass diese Arbeitsmethode, sobald Sie 1.000 Datenpunkte oder was auch immer auf einer Seite erstellt haben, nicht mehr gut funktioniert und Sie verlangsamt.

Drew: Ja. Ich denke, das ist fair. Ich neige dazu, bei der Technologieauswahl zu finden, dass das Wichtigste einfach ist, es zu wissen. Nur um zu wissen, was die Kompromisse sind und was die Einschränkungen sind. Keiner von ihnen ist gut oder schlecht. Sie müssen nur eine angemessene Balance für Ihre eigene Situation finden.

Drew: Wie man es von einem Designsystem dieser Art erwartet, enthält es Komponenten für die Typografie. Zur Gestaltung. Dann geht es an die wesentlichen Schaltflächen und Formularelemente und es gibt eine Symbolbibliothek. Es gibt so ziemlich alles, was Sie auf einer Küchenspülenseite von Design Systems erwarten würden. Da hast du alles. Mir kommt das alles recht modern vor. Ich habe festgestellt, dass die Layout-Rasterkomponente tatsächlich ein CSS-Raster verwendet, was immer schön zu sehen ist. Es gibt nicht nur irgendeine Flexbox.

Mike: Ach ja. Total.

Drew: Ist es generell sehr flexibel damit zu arbeiten? Finden Sie, dass Sie mit den Layoutelementen jede Art von Benutzeroberfläche erstellen können, die Sie benötigen?

Mike: Ja. Ja. Absolut. Das Tolle daran ist, dass sie in einigen Fällen mehr als eine Abstraktionsebene bieten. Im Fall von CSS-Raster haben sie ein einfaches Raster, das so ist, okay. Sie möchten es einfügen und hier ist Ihr Raster. Sie packen einfach Sachen hinein und geben an, ich glaube, die Anzahl der Spalten oder so etwas. Dann hast du ein Raster.

Mike: Aber wenn Sie beim Verhalten des Gitters etwas mehr Flexibilität benötigen, dann haben Sie eine generische Gitterkomponente, die wahrscheinlich … Die einfache Gitterkomponente umschließt wahrscheinlich die andere Gitterkomponente. Es ist nur eine weitere Fassade über sich selbst.

Mike: Dieser Ansatz zur Zusammensetzung von Komponenten ist aus demselben Grund ein wertvolles Paradigma in der React-Welt. Wenn Sie eine Komponente haben, die sehr vielseitig ist und über viele Requisiten verfügt, dann gibt es möglicherweise eine Reihe von Anwendungsfällen, für die Sie die Komponente ziemlich häufig auf eine Weise verwenden möchten. Sie wickeln es einfach mit einer anderen Komponente mit statischen oder vordefinierten Requisiten für die robusteren Komponenten ein.

Mike: Sie verwenden diesen Ansatz wirklich gut in Chakra. Mir ist noch nichts aufgefallen, was ich damit nicht machen könnte. Ich bin sicher, es ist irgendwo da draußen. Oder etwas, das nur ein bisschen mühsamer ist. Aber es ist in der Regel noch nicht passiert. Zumindest fällt mir das nicht ein.

Drew: Nun, eines der Dinge, über die ich mich sehr gefreut habe und die Sie auch bereits erwähnt haben, ist, dass es anscheinend einen ziemlich starken Fokus auf Barrierefreiheit gibt.

Mike: Ja.

Drew: Sicherlich in den Werbeinformationen. Ist das im Code selbst geboren? Praktizieren sie, was sie predigen? Ist eine gute Zugänglichkeit tatsächlich eingebaut?

Mike: Ich denke schon. Am ehesten habe ich es auf die Probe gestellt, indem ich Lighthouse dagegen laufen lasse. Es liefert durchgehend hohe Punktzahlen für Barrierefreiheit. Normalerweise verwende ich Chakra Next.js. Next.js ist Leistung direkt an der Box. Es kommt ziemlich oft vor, dass Sie Highscores und alles sehen. Ich habe heute gerade darüber getwittert, dass die Homepage des Buches drei der vier Lighthouse-Scores hat. Es gibt Zugänglichkeit, Best Practices, Leistung und ein viertes. Ich denke gerade nicht.

Mike: Alles außer der Leistung kam zu fast 100 % heraus. Der Leistungsteil liegt bei mir, nur weil ich viel auf die Seite geschrieben habe und sie noch nicht optimiert habe. Es neigt dazu. Die Zugänglichkeitswerte in Lighthouse sind großartig, wenn ich die Chakra-Benutzeroberfläche verwende.

Drew: Das ist großartig. Sie haben erwähnt, dass sie serverseitiges Rendering verwenden, und was haben Sie. Sachen wie Next und Gatsby und was ich dir vorhabe, ist absolut kein Problem, oder? Gibt es keine Hürden bei der Verwendung von Chakra?

Mike: Ach nein. Ganz und gar nicht. Ich habe es nicht benutzt. Ich konzentriere mich eher auf Next.js. Ich habe Gatsby oder eines der anderen SSR-Tools nicht angeschlossen. Aber solange das Framework nichts hat, was es daran hindern würde, es als solches zu verwenden, sollte es in Ordnung sein.

Mike: Für React bietet Chakra einen Kontext-API-Anbieter. Ein Themenanbieter, damit Sie, wenn Sie … In meinen Next.js-Apps zum Beispiel eine … Next.js eine Unterstrich-App-JS- oder TS-Datei haben, die einfach jede Seite in der Anwendung umschließt. Sie schließen einfach den Themenanbieter dort an und Chakra erledigt den Rest der Arbeit und es wird einfach überall verfügbar. Es gibt sicherlich keine Hürden für das Hinzufügen zu Next.js. Aber ich denke auch nicht an Chakra.

Drew: Verwendet Chakra TypeScript? Ich glaube schon, oder?

Mike: Es unterstützt es. Ja.

Drew: Es unterstützt es. Das ist ein großes Plus für Leute, die TypeScript bereits in ihren Projekten verwenden. Gibt es irgendwelche Nachteile, wenn die Leute TypeScript nicht bereits verwenden?

Mike: Ich glaube nicht. Ich verwende TypeScript standardmäßig in allen meinen Projekten, ebenso wie Echobind. Aber wenn ich Dinge auf persönlicher Ebene mache, verwende ich … ich sage gerne ein bisschen TypeScript. Typoskript ist äußerst wertvoll bei der Reduzierung von Fehlern durch die Erstellung statischer Typen. Es gibt jedoch einen Träger dafür, bei dem TypeScript je nach Ihrem Wissen eine echte Hürde sein kann.

Mike: Meine Mindestschwelle für … Die Strenge von TypeScript, die ich verwende, ist ziemlich niedrig, einfach weil Sie mit einfacher Typisierung viel Wert aus TypeScript ziehen können. Es wird viele übliche Pannen verhindern. Wenn Sie mit dem fortgeschritteneren Tippen beginnen und sich mit diesem Zeug nicht besonders wohl fühlen, kann es Sie wirklich verlangsamen und frustrieren.

Mike: Das ist nur dasselbe mit Chakra und TypeScript. Ich neige dazu, zumindest am Anfang, bis ich ein Projekt wirklich konkretisiere und stabilisiere, eine kleine Menge TypeScript zu verwenden. Aber es stellt keine Herausforderungen bei der Verwendung von Chakra dar, weder mit noch ohne TypeScript. Es ist großartig mit. Ich liebe es mit, aber Sie können es sicherlich auch ohne verwenden.

Drew: Ja. Ich finde, dass Sie mit TypeScript, wie Sie sagen, 80 % der Vorteile mit nur wenigen Typen erzielen. Wenn Sie zu weit in den Kaninchenbau vordringen, erhalten Sie am Ende ein Skript, das hauptsächlich aus TypeScript besteht. Dann ein bisschen JavaScript nach unten.

Mike: Oder du verbringst so viel Zeit damit, herauszufinden, wie man etwas richtig eintippt, und dein Gehirn explodiert. So setzt man einfach any oder unknown. Du kürzt es ab. Wofür ich mich in solchen Fällen ausspreche. Wenn es zu lange dauert, etwas zu erledigen, dann gibt es einen Hebel, an dem Sie ziehen können.

Drew: Die Chakra-Dokumentation scheint wirklich gut aufgebaut zu sein, dachte ich, mit … Sie hat einen Überblick über jede Komponente. Dann enthält es wirklich nützlich alle technischen Anmerkungen zu den Designüberlegungen, die bei der Implementierung dieser Komponente angestellt wurden. Was ich als Frontend-Ingenieur großartig finde. Sie sprechen meine Sprache. Ich verstehe. Ich weiß, was die Komponente etwas unter der Haube tut.

Drew: Das ist nur aus meiner Sicht, beim Durchsuchen der Dokumentation ohne ein echtes Projekt, an dem ich arbeite. Wenn Sie tatsächlich an einem Projekt arbeiten und tief im Unkraut davon stecken, hält nur die Dokumentation stand? Ist es so nützlich, wie es scheint?

Mike: Ach ja. Absolut. Meine Perspektive ist etwas anders. Ich muss nicht immer wissen, was unter der Motorhaube vor sich geht, aber ich habe das Gefühl, dass ich normalerweise schließen kann. Wenn ich mir eine Box-Komponente anschaue, schaue ich mir jetzt nur die Dokumente an, während wir uns zur Auffrischung unterhalten. Wenn ich mir eine Box-Komponente anschaue, denke ich: „Okay. Das ist wahrscheinlich standardmäßig ein div. Ich sehe es in den Verlaufseigenschaften passieren, was auch immer.“

Mike: Ich kann mir ein Bild davon machen, was in der Hood vor sich geht, ohne ihre Magie, CSS zu übersetzen, vollständig zu verstehen. Übersetzen Sie die Requisiten in CSS. Aber die Dokumentation ist insofern großartig, als sie sehr linear ist. Es ist sehr konsequent. Es listet alles mit Beispielen auf. Ein bisschen kopieren und einfügen.

Mike: Es verwendet nur wirklich guten weißen Raum, so dass das Betrachten der Seite nicht überwältigend erscheint. Sie können leicht finden, was Sie brauchen. Ihre Suche ist auch großartig. Ihre Suche ist hilfreich. 90% der Zeit, denke ich, ist es das, wofür ich da reingehe. Vielleicht gehen Sie dort hinein und sehen, ob eine Komponente vorhanden ist, um etwas zu tun. Normalerweise tut es das. Und über etwas anderes Nützliches gestolpert, von dem ich nichts wusste. Oder mich einfach nur an einigen der Prinzipien auffrischen. Hier finde ich immer so ziemlich das, was ich brauche.

Drew: Das einzige, was mir an den Dokumenten nicht gefallen hat, wenn ich mich umgesehen habe, war die Anzahl der Anzeigen darauf. Auf jeder Seite für ihr kommerzielles Angebot von Chakra UI Pro.

Mike: Ich hatte sie nicht gesehen. Interessant. Ich habe es gesehen. Ich habe es auf jeden Fall gesehen. Aber ich sehe es gerade nicht. Oh ja. In Ordnung. Es gibt Chakra UI Pro. Ich glaube, ich habe es mental herausgefiltert. Ich höre dich. Zumindest ist es nicht zu groß und in Ihrem Gesicht.

Drew: Es ist nicht zu groß. Es ist einfach am falschen Ort. Es ist genau dort, wo Sie nach Informationen suchen. Was ich denke, ist der Grund, warum sie es getan haben. Das ist erwähnenswert, wenn man das Ökosystem betrachtet, und alles rund um das Projekt ist, dass es einen professionellen Satz von Komponenten gibt, der ... Ich denke, es entspricht einigen Dingen, die in der Tailwind-Benutzeroberfläche vorhanden sind. Marketingseiten und hier sind Komponenten und mehr aus diesen zusammengesetzten Abschnitten von Seiten und ganzen Seiten und Layouts und Dingen. Das ist bei den Machern von Chakra erhältlich, jedoch als kommerzielles Angebot.

Mike: Ja. Jetzt nur noch schnell einen Blick darauf werfen. Einige davon sind tatsächlich verfügbar. Oder Versionen davon sind kostenlos erhältlich wie Chakra-Vorlagen. Es sind Chakra-Vorlagen, denke ich, ist die Open-Source-Lösung für Chakra Pro oder den Open-Source-Konkurrenten. Ich bin sicher, Sie werden eine Tonne bekommen, wenn Sie dafür bezahlen. Es sieht so aus, als ob Chakra Pro extrem robust und preisgünstig ist, wenn Sie einen professionellen Bedarf dafür haben. Es gibt ein paar Optionen für Ihr Projekt, wie es aussieht.

Drew: Ja. Es hört sich an, als wäre ein ziemliches Ökosystem um ihn herum aufgebaut. Wissen Sie, wie lange das Projekt schon läuft und was noch folgt? Ist es in der React-Community weit verbreitet?

Mike: Ich möchte ja sagen. Ich weiß nicht, in welchem ​​Ausmaß. Ich wäre neugierig zu sehen, wie hoch der Marktanteil von Rückenwind im Vergleich zu Chakra heutzutage ist. Ich weiß, dass Chakra vor relativ kurzer Zeit eine Auszeichnung erhalten hat. GitNation React Award für das wirkungsvollste Projekt für die Community. Ich würde sagen, es ist ziemlich groß und ziemlich gut umarmt. Aus gutem Grund, was großartig ist. Die Leute genießen es auf jeden Fall. Ich bin nicht der einzige.

Drew: Eine Sache, über die es sich immer lohnt nachzudenken, wenn Sie eine Abhängigkeit in Ihr Projekt einbringen, ist, was passiert, wenn Sie diese Abhängigkeit aktualisieren müssen.

Mike: Ja.

Drew: Chakra wird ständig verbessert, nehme ich an. Ist es so, dass Sie es, nachdem Sie es importiert und damit erstellt haben, auf einer bestimmten Version gesperrt lassen? Oder ist es im Allgemeinen sicher, auf dem Laufenden zu bleiben? Ist es relativ stabil in Bezug auf das Design und Dinge auf Ihrer Website, die sich nicht ändern, wenn Chakra aktualisiert wird?

Mike: Es war so weit. Ja. Ich würde sagen, das liegt vor allem am Fortschritt der Entwicklung. Sie sind gerade auf Version 1.6.3. Vor einigen Monaten sind sie von null auf eins gestiegen. Das war das einzige Mal, dass sie Breaking Changes hatten. Seitdem haben sie ständig Feature-Releases und Fehlerbehebungen durchgeführt.

Mike: In den letzten paar Monaten war alles nur Hinzufügung. Ergänzungen und Korrekturen. Es gibt keine Breaking Changes. Ich weiß nicht, wie die Roadmap aussieht, aber ich kann mir vorstellen, dass es so bleiben wird. Jedes Mal, wenn ich es aktualisiert habe, eine dieser Nebenversionen, war es in Ordnung. Ich habe noch nie gesehen, dass etwas daran gebrochen ist. Aber als sie mit 1.0 herauskamen, gab es einige bahnbrechende Änderungen. Ich kann mich aber nicht an eine Katastrophe erinnern.

Drew: Weißt du, wie die Situation mit Bündelgrößen und der Fähigkeit ist, Chakra zu schütteln? Verleiht es Ihrem Projekt viel Gewicht oder werden Dinge nur importiert, wenn Sie sie verwenden?

Mike: Ich erinnere mich ehrlich gesagt nicht aus dem Stegreif. Das sollte ich wohl wissen. Ich habe nicht bemerkt, dass es viel Gewicht hinzufügt. Hauptsächlich, weil Sie die Komponenten einzeln importieren. Nicht das gesamte Chakra importieren oder so etwas. Ich würde sagen, es ist in Ordnung, Baumschütteln zu unterstützen, aber ich habe es nicht getestet. Bisher hatte ich jedoch noch keine Dinge, die speziell davon ein enormes Gewicht hatten.

Drew: Ja. Das ist immer eine wichtige Überlegung, nicht wahr?

Mike: Ja.

Drew: Gibt es noch etwas, das wir über die Chakra-Benutzeroberfläche wissen sollten, bevor wir uns direkt damit beschäftigen und es für ein Projekt verwenden?

Mike: Nein. Es ist großartig. Es gibt auch eine ziemlich aktive Community. Ich sehe oft Updates. Ich schaue mir jetzt die Dokumentation an und sehe Komponenten, die ich vorher nicht gesehen habe. Ich sehe, dass viele Funktionen hinzugefügt werden. Das ist großartig.

Drew: Ja. Das ist großartig. Sie haben ein Buch mit dem Titel Cut Into The Jamstack herausgebracht, das eine Vorabveröffentlichung ist. Im Moment eine Beta-Version. Das veröffentlichst du im Selfpublishing. Ist das richtig?

Mike: Ja. Ja. Ich bin. Es war mein erster Versuch, ein technisches Buch zu schreiben. Ich möchte es nur rausbringen, ohne mich auf etwas festzulegen wie, es ist formell, denke ich. Ich bin auch jemand, der die Ungezwungenheit mag, besonders beim Gestalten. Es gibt mir die Möglichkeit, es auf meine Weise zu tun, indem ich es so mache.

Drew: Das Buch führt den Leser buchstäblich durch den Aufbau einer Software-as-a-Service-App.

Mike: Ja.

Drew: Alles auf dem Jamstack. Warum haben Sie sich entschieden, dies jetzt zu schreiben und diesen Ansatz mit dem Buch zu verfolgen?

Mike: Gute Frage. Ich programmiere jetzt seit etwa 20 Jahren und ich glaube, ich habe vor einiger Zeit versucht, ein Buch zu schreiben, aber es hat einfach nicht ganz Gestalt angenommen. Ich bin an einem Punkt in meiner Karriere, an dem ich wirklich mehr Wissen teilen möchte. Ich benutze es seit so vielen Jahren und ich verspüre den Juckreiz, wirklich mehr davon zu veröffentlichen und anderen zu helfen.

Mike: Ungefähr im Oktober letzten Jahres hatte ich das … Ich wollte etwas herausbringen, das ein Produkt war. Ein E-Book schien ein wirklich guter Anfang zu sein. Ich bin wirklich begeistert von Next.js und den Dingen, die man damit machen kann. Ich verwende den Begriff Jamstack und betrachte Next.js als Teil des Jamstack, da es standardmäßig eine statische Site-Generierung hat.

Mike: Aber ich denke, es ist eine Sache, über die meiner Meinung nach nicht genug gesprochen wird, oder die eine weitere Erklärung gebrauchen könnte, ist das Erstellen von Software-as-a-Service-Anwendungen damit. Denn der Jamstack ist nicht nur etwas für Webseiten. Es funktioniert sehr gut für inhaltsgesteuerte Websites, da es statisch, schnell und SEO-freundlich ist.

Mike: Aber es gibt so viele reichhaltige Funktionen, besonders in Next.js, wo Vercel gestern ihre Next.js-Konferenz abhielt und sie dort immer mehr erstaunliche Funktionen veröffentlichen. Ich bin begeistert davon, Software als Dienstleistung zu entwickeln. Software-Websites sind großartig, aber Software soll Dinge tun.

Mike: Dieser Stack ist für mich die Zukunft der Software-as-a-Service-Entwicklung. Es erinnert mich daran, was Ruby on Rails war, als es herauskam. Es war sozusagen eine Evolution. Es automatisiert und vereinfacht viele Dinge, die Sie früher manuell erledigen mussten. Es beschleunigte das Entwicklungstempo und steigerte die Qualität.

Mike: Next.js und Jamstack und Vercel und Chakra UI, sie alle produzieren Dinge, die viele Dinge für Sie vereinfachen. Next.js vereinfacht viele geschwindigkeitsbezogene Probleme und Probleme im Zusammenhang mit der Zugänglichkeit. Installation. Das ist alles, das Routing wird für Sie erledigt. Sie müssen sich keine Gedanken über das clientseitige oder serviceseitige Routing machen. Es ist automatisch. Die Chakra-Benutzeroberfläche tut dies mit Zugänglichkeit und Thematisierung. Diese Tools zusammen, sie sind einfach … Das Entwicklererlebnis wird wirklich großartig und alles ist einfach … Es gibt Ihnen die Freiheit, wirklich Software zu erstellen.

Mike: Um deine Frage zu beantworten. Der Grund, warum ich jetzt ein Buch herausgebracht habe, ist der richtige Zeitpunkt, an dem ich wirklich etwas veröffentlichen wollte und das Jamstack-Ökosystem langsam Früchte trägt und wächst. Es gab mir auch die Möglichkeit, mehr Code in Jamstack zu schreiben, was ich einfach liebe.

Drew: Ich denke, wie Sie sagen, es ist einfach, sich auf die Idee von Jamstack einzulassen, wenn Sie an Websites und typischerweise leichtgewichtige Websites denken. Aber den nächsten Schritt zu machen und darüber nachzudenken, wie Sie den Ansatz verwenden können, um eine vollständige Webanwendung zu erstellen, ist viel schwieriger. Es ist eine größere Hürde, denke ich, zu überwinden, wenn Sie es gewohnt sind, in der serverseitigen Denkweise zu denken.

Mike: Ja.

Drew: Es ist ein viel größerer Sprung zu sehen, okay. Ich kann meine Authentifizierung an einen Dienst senden-

Mike: Ja.

Drew: … und ich kann … Ich schätze, für die Leser, aus Sicht der Leser Ihres Buches, ist es wahrscheinlich eine großartige Möglichkeit, diese Hürde einfach zu überwinden, indem Sie einfach dieses Beispiel durchgehen und aufbauen und Ihnen folgen Verändere sanft deine Denkweise in, okay. So könnte ich all diese Dinge tun, aber auf dem Jamstack. Würden Sie dem zustimmen?

Mike: Ja. Das hoffe ich. Ich denke schon. Das ist wirklich beabsichtigt. Ich habe kürzlich einen Vortrag signiert, einen Konferenzvortrag, der … Ein Teil meiner Motivation für das Thema und die Art und Weise, wie ich mich entschieden habe, in diesem Buch zu unterrichten, ist, dass ich Ihnen eine Programmiersprache beibringen könnte. Ein Framework, aber es fühlt sich besser an, Ihnen den Stack praktisch vorzustellen, denn jeder Entwickler, der viel Erfahrung hat, ist gut darin, Dokumentation zu suchen, zu googeln und Stack Overflow zu verwenden. Warum sollte ich deine Zeit verschwenden, dir das beizubringen?

Mike: Ich möchte Ihnen einen schnellen, tiefen Einblick in den Stack geben und was ich damit machen kann. Sie werden erkennen, was an jedem einzelnen Stück großartig ist. NextOFF und Prisma. Next.js und Chakra. Ich werde Sie mit der Dokumentation verlinken, nur um Ihnen ein paar Klicks zu ersparen. Aber Sie werden durch ein interaktives Beispiel sehen, wie diese Teile miteinander verbunden sind. Sie werden auch ein Verständnis für die schwierigen Teile bekommen.

Mike: Eine Sache, auf die ich zum Beispiel näher eingehen werde, ist dieses Feature, das ich für das asynchrone Hochladen mehrerer Dateien baue. Next.js hat ein Frontend und ein Backend. Wenn Sie diese Analogie verwenden, befindet sich jedoch im vorderen Bereich des Frontends und im hinteren Bereich des Frontends die React-Ebene. Dann haben Sie die Knotenschicht. Es gibt diese API-Routen.

Mike: Wenn Sie damit mehrere Dateien hochladen und einen Dienst nutzen möchten, verwende ich Cloudinary im Buch. Aber wenn Sie einen API-Dienst für Ihre Bild- und Medien-Uploads verwenden, was Sie tun sollten, gibt es dort viele bewegliche Teile. Es gibt die Client-Seite, mit der der Benutzer interagiert. Da sind die API-Anfragen an Cloudinary oder den anderen Anbieter. Aber dann müssen Sie mehrere API-Anfragen stellen, um es effizient zu machen. Sie müssen etwas gegen Cloudinary signieren, wofür Sie einen API-Aufruf benötigen.

Mike: Sie müssen dieses Zeichen nehmen und den Upload durchführen, der vom Browser ausgeht und Ihre API umgeht und direkt zu Cloudinary geht. Dann müssen Sie das in Ihrer Datenbank speichern, die Ihr Frontend-Backend des Frontends verwendet. Es gibt viele Stücke und Next.js… In der Next.js-Community gibt es dafür noch kein Open-Source-Plugin. 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. Ja. 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: Fantastisch.

Mike: I've got another one coming up in probably a couple of weeks. Ja. Ja. 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. Das ist es.

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. Gab es Abschiedsworte?

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