Smashing Podcast Episode 40 With Mike Cavaliere: Co to jest UI Chakra dla React?

Ten odcinek został uprzejmie wsparty przez naszych drogich przyjaciół z Wix, którzy są znani z tego, że dają Ci swobodę tworzenia, projektowania, zarządzania i rozwijania swojej obecności w sieci dokładnie tak, jak chcesz. Dziękuję Ci!

W tym odcinku mówimy o interfejsie Chakra. Co to jest i jak może pomóc w Twoich projektach React? Drew McLellan rozmawia z ekspertem Mikem Cavaliere, aby się tego dowiedzieć.

Pokaż notatki

• Interfejs czakry
• Mike na Twitterze
• Osobista witryna Mike'a
• Cut In The Jamstack book

Cotygodniowa aktualizacja

• Projektowanie z kodem: nowoczesne podejście do projektowania
  napisany przez Mikołaja Dobruckiego
• Automatyzacja testowania czytnika ekranu w systemie macOS przy użyciu funkcji Auto VO
  napisany przez Camerona Cundiff
• Rozwój myślenia projektowego jako strategii rozwiązywania problemów
  napisany przez Josha Singera
• Jak przeprowadzić audyt UX dla dużej platformy EdTech
  napisany przez Marka Lankmiliera
• Tworzenie bloga wielu autorów za pomocą Next.js
  napisany przez Dom Habersack

Transkrypcja

Drew McLellan: Jest starszym inżynierem oprogramowania w agencji o nazwie Echobind. Pisze kod od dwóch dekad i cały czas używa JavaScriptu. Uwielbia Jamstack, a jego nowa książka, Cut Into The Jamstack, uczy czytelnika, jak tworzyć od podstaw oprogramowanie jako aplikację usługową. Wiemy, że zna się na Jamstack, ale czy wiesz, że kiedyś zgubił się w przejściu z masłem orzechowym? Moi miażdżący przyjaciele, witajcie Mike'a Cavaliere'a. Cześć Mike. Jak się masz?

Mike Cavaliere: Jestem dzisiaj absolutnie miażdżący.

Drew: Dobrze to słyszeć. Chciałem dziś z tobą porozmawiać o projekcie, o którym jakoś nie słyszałem, dopóki nie natknąłem się na niego w twojej książce Jamstack. Nie jestem pewien, jak to przegapiłem, ponieważ wydaje się, że dojrzewa, jest dobrze udokumentowany i prawdziwy… Po prostu świetny projekt. Mam nadzieję, że dzisiaj możemy o tym porozmawiać i nadrobić zaległości, aby dowiedzieć się, co powinienem był wiedzieć przez cały czas. Mowa oczywiście o interfejsie Chakra UI. Powiedz mi, czym jest interfejs czakry? W jakiej przestrzeni się znajduje i jaki problem rozwiązuje dla nas?

Mike: Chakra UI to framework UI dla Reacta lub zestawu narzędzi UI, myślę, że tak to określają. W każdym stosie aplikacji, w dzisiejszych czasach nie chcesz wymyślać interfejsu użytkownika od zera. Chcesz zdobyć zestaw narzędzi. Tak było od jakiegoś czasu.

Mike: Chakra UI to świetne podejście do zestawu narzędzi React UI. Ma wiele zalet, ale jedną z nich jest to, że… Po pierwsze, jest solidny. Oznacza to, że zawiera każdy element interfejsu użytkownika, jaki możesz sobie wyobrazić. Ma przełączniki. Ma owijki wokół siatek. Ma wszystkie rodzaje rzeczy z elementów.

Mike: Jest bardzo komponowalny, więc wszystko używa stylowych rekwizytów. Twoje komponenty są świetne zaraz po wyjęciu z pudełka. Możesz je upuścić i używać bez zmian. Ale jeśli chcesz wprowadzić poprawki, bardzo łatwo jest przekazać niektóre właściwości stylu. Są w pełni dostępne. Dostępność, o której wszyscy mówią, ale zawsze zapominają o implementacji lub jej wdrożenie wymaga trochę wysiłku, jest wbudowane w Ciebie.

Mike: Nie jest niczym niezwykłym, że zestawiam coś z interfejsem Chakra i uzyskuję bardzo dobry wynik w Lighthouse. Właściwie to właśnie sprawdzałem dzisiaj stronę Cut Into The Jamstack i ocena dostępności jest bardzo wysoka. Jest również w pełni tematyczny. Możesz ustawić konfigurację motywu od początku. Jest po prostu długa lista korzyści.

Mike: Sprawia, że ​​bardzo szybko się rozwija, co mnie do tego początkowo przyciągnęło. Echobind, używamy go wewnętrznie. Ale dla mnie nie mam sensu projektowania. Trochę, ale w żadnym wypadku nie jestem projektantem. Mogę pobierać komponenty z czakry i nieznacznie zmieniać rzeczy, aby były spójne, a rzeczy po prostu dobrze wyglądają po wyjęciu z pudełka. Potrafisz szybko się rozwijać. Doświadczenie programisty jest świetne. To jest po prostu niesamowite na tak wielu poziomach.

Mike: Ostatnia rzecz, którą powiem, zanim będę o tym gadał. Ale ma też wiele hooków reakcji, które są pomocnikami dla bardzo typowych funkcji, które pojawiają się wraz z tymi elementami, których używasz. Na przykład w trybie ciemnym. Są wbudowane haczyki do używania jaśniejszego trybu ciemnego, który po prostu bardzo natrętnie pozwala przełączać kolory w motywie.

Mike: Jest jeszcze jeden używany do ujawnienia, który służy do przełączania rzeczy takich jak moduły. Które zawsze potrzebujesz stanu włączenia, wyłączenia. Ale Hook jeszcze bardziej to upraszcza, dzięki czemu możesz skupić się na rzeczach, których framework nie może wywnioskować automatycznie. Tam to odetnę, bo to było dużo.

Drew: To naprawdę dobrze. Żebym dobrze zrozumiał, przede wszystkim to Shakra, a nie Chakra? Shakra?

Mike: Nie byłbym w tym ekspertem. Mówię shakra tylko z powodu jogi. Ale będziemy musieli poprosić założycieli o ponowne sprawdzenie.

Drew: To gotowy system projektowania, który możesz wykorzystać, aby zbudować interfejs użytkownika dla swojego projektu.

Mike: Tak.

Drew: To jest specjalnie dla projektów React.

Mike: Tak. Istnieje projekt Chakra Vue. Nie jestem zbytnio osobą Vue, ale wiem, że istnieje. Mogą być również dla innych ramek, ale jestem bardzo, bardzo skupiony na Reakcie, więc używam domyślnego React Chakra.

Drew: Tak. Znam React w przeszłości. Używałem Reacta, kiedy pracowałem w Netlify. Teraz wszystko robię w Vue. To była jedna z pierwszych rzeczy, na które spojrzałem. Och, czy jest Vue? To wygląda dobrze. Czy istnieje wersja Vue? Znalazłem wersję Vue i wydaje się, że jest trochę w tyle. Myślę, że jest na 0.9 lub coś takiego, a nie na 1.6 lub czymkolwiek w obecnej wersji React. Nie jestem pewien, jak to jest aktualne.

Drew: Mamy dość przestarzałe frameworki. Rzeczy takie jak Foundation UI, Bootstrap, Bulma. Istnieją od dłuższego czasu i wydaje się, że są poprzednią generacją frameworka. Następnie mamy bardziej nowoczesne podejścia. Myślę, że wielu słuchaczy zna Tailwind i projekt Tailwind UI. Gdzie w tym krajobrazie znajduje się interfejs czakry? Jest bliżej czegoś, co może przyjąć Tailwind… Podejście, które może przyjąć tailwind. Czy to jest poprawne?

Mike: Tak myślę. Trzeba przyznać, że chciałem naprawdę zagłębić się w Tailwind, tylko dlatego, że jest teraz tak popularny. Ale nie potrafię inteligentnie mówić o tajnikach samego Tailwind i o tym, jak… Mam wrażenie, że Chakra i Tailwind są alternatywnymi podejściami. Łapiesz za jedną, a nie za obie naraz, oczywiście.

Mike: Jeszcze nie wiem, jakie są zalety i wady obu. Byłem tak zakochany w czakrze, że po prostu używam jej domyślnie. Mówię: „Ok, teraz dobrze to wiem. Kocham to. Drugiego nauczę się później. Ale oczywiście Tailwind jest niezwykle popularny. Myślę, że Tailwind ma swój podstawowy framework w zestawie narzędzi UI. Czy to w porządku?

Drew: Racja. Tak.

Mike: Dobra. Byłoby to prawdopodobnie bardziej na równi z zestawem narzędzi interfejsu użytkownika Tailwind. Na stronie głównej Chakra mają porównanie, dlaczego możesz chcieć sięgnąć po jedno lub drugie, ale nie mam tego zinternalizowanego.

Drew: Tak. Dobre. Jak wspomnieliśmy, w przypadku projektów React i sposobu, który się przejawia, a nie niektórych z tych bardziej tradycyjnych systemów projektowania, które dają cały ładunek nazw klas do umieszczenia w HTML i musisz użyć pewnej struktury HTML, umieść odpowiednie klasy to. W ten sposób otrzymujesz UI manifestujący się w twoim projekcie. Z Chakra, ponieważ opiera się na React, daje ci cały ładunek komponentów dla każdego z tych elementów. Możesz po prostu zaimportować do swojego projektu. Te komponenty zawierają własne znaczniki i styl, prawda?

Mike: Tak. Właściwie nie będziesz musiał pisać zajęć używając Chakry. nie mam. Nawet nie wiem, czy to możliwe. Cały paradygmat React to skład i właściwości składników. Hermetyzacja komponentów oznacza, że ​​przekazujesz określone właściwości do komponentu. W czakrze masz pojęcie tematu, który jest globalnym paradygmatem. Istnieje motyw domyślny, który zawiera wartości kolorów i odstępów oraz określone jednostki dla wszystkich typowych rzeczy.

Mike: Możesz dostosować ten motyw. Dostosowuje go globalnie. Możesz go ulepszyć w dowolny sposób. Kiedy wywołujesz sam komponent, na przykład wprowadzanie tekstu. Składnik wejściowy. Będzie to miało domyślne kolory i promień obramowania oraz dopełnienie i margines zgodnie z definicją motywu. Jeśli chcesz dalej stylizować, jeśli nie chcesz tego robić globalnie, na przykład, kiedy określam dolne marginesy, robię to indywidualnie. Nie robię tego na poziomie globalnym, ponieważ może to prowadzić do katastrofy. Po prostu przekazujesz to jako monit.

Mike: Są podpowiedzi skrótów. Jeśli mam składnik wejściowy, po prostu mówię, że MB równa się, a następnie wartość i zastosuje dolny margines. Lub mają MX i MY dla pionowego i poziomego. Możesz też po prostu określić M i przekazać ciąg, tak jak w przypadku właściwości margin CSS. Nie ma nazw klas. Wykonuje nazwy klas w sposób dynamiczny i zaciemnia je z dala od użytkownika.

Drew: Tak. Myślę, że właśnie w tym miejscu musi pojawić się porównanie z Tailwind. Ponieważ sposób, w jaki działa Tailwind, daje ci całą masę klas. Jeśli chcesz zwiększyć marżę, istnieje klasa, którą możesz założyć, aby zwiększyć marżę. Wygląda na to, że bierzesz to samo… To inna implementacja, ale to samo podejście do tego, jak została zaprojektowana. Właściwie używamy rekwizytów, a ty przekazujesz rekwizyt, aby dostosować te rzeczy.

Drew: Jak łatwo jest dostosować projekt? Czy chodzi o to, że można po prostu poprawić kolory, marginesy i dopełnienie, aby wyglądało trochę inaczej? A może naprawdę możesz oznaczyć motyw za pomocą czakry?

Mike: Oh, możesz robić co chcesz. Wspaniale. Możesz stylizować na poziomie komponentu lub motywu. Zależy to tylko od tego, jak twórczy chcesz z nim być. Udało mi się wziąć kilka komponentów i zrobić z nimi szalone rzeczy. Częścią tego, co sprawia, że ​​jest naprawdę stylowy, jest to, że te elementy są dość atomowe.

Mike: Ponownie używając przykładu pola tekstowego, jeśli chcesz pola tekstowego, twój komponent jest właśnie taki. Możesz stylizować wszystko wokół niego lub samo pole tekstowe. Możesz też zmienić motyw. Ustawienie kolorów, aby zmienić markę wszystkiego na całym świecie.

Mike: Właściwie napisałem na Twitterze twórcę interfejsu Chakra, Seg, mówiąc, że powinni umieścić galerię na stronie, ponieważ jest naprawdę świetna. Możesz z nim stworzyć piękne projekty. Są bardzo zróżnicowane i możesz ich nie znać na powierzchni. Nie wiem, czy Chakra UI ma jakieś komunikaty, które sprawiają, że jest oczywiste, że używasz Chakra UI na swojej stronie.

Mike: Widziałem z tym całkiem niezłe rzeczy. Ale możesz z tym zrobić wszystko. Zrobiłem strony statyczne. Strona domowa Cut Into The Jamstack jest z tym skończona. Tylko jako jeden przykład. Używaliśmy go w Echobind bardzo często. Nie pamiętam, czy używaliśmy tego dla echobind.com. Ale z pewnością wielu naszych klientów witryn. Następnie aplikacja, którą budowałem, JamShots, to aplikacja. Nie ma jeszcze stron marketingowych. Ale to wszystko to tylko interfejs użytkownika i cały ten interfejs użytkownika jest zbudowany przy użyciu Chakry.

Mike: Jeszcze jedna rzecz, kiedy chwalę Chakrę, jest taka, że ​​jest inna strona internetowa, z której ostatnio dużo korzystam i używam w… Zamierzam również wprowadzić do książki. Chakratemplates.net. Chakra-templates.net. To typowe wzorce projektowe, w których każdy, kto wnosi wkład, znajduje jednostkę bohatera lub jednostkę cenową. Muszą tylko skopiować i wkleić kod czakry.

Mike: Używam tego w całości na stronie głównej książki, ponieważ po prostu zaoszczędziło mi to dużo czasu na jej rozwijaniu. To tak, jakbyś miał model cenowy. Pozwól mi to skopiować i wkleić. Pozwolę sobie trochę dostosować rekwizyty stylu, aby wszystko było spójne na mojej stronie. Otóż ​​to. To po prostu kolejna rzecz, która jest oddzielona od samej Chakry, ale to po prostu taka oszczędność czasu, ponieważ potrzebujesz tych rzeczy na tak wielu stronach internetowych i kto chce za każdym razem wymyślać koło na nowo.

Drew: Wygląda na to, że może to być prawdziwa oszczędność czasu, nie tylko w przypadku osobistych projektów, w których chcesz coś szybko wdrożyć, ale także w kontekście agencji.

Mike: O tak. Absolutnie.

Drew: Czy dotyczy to zarówno interfejsów aplikacji, jak i witryn marketingowych? Czy to jest przekrzywione w jedną lub drugą stronę, czy jest to po prostu ogólnie przydatne, cokolwiek budujesz?

Mike: Powiedziałbym, że to jedno i drugie. Zdecydowanie tak. Użyłem go do obu. Nasza firma używała go do obu. Budujemy, powiedziałbym, że mocno skłaniamy się ku tworzeniu aplikacji z pełnym stosem i aplikacji mobilnych. Zdecydowanie bardziej potrzebujemy interfejsu użytkownika niż marketingu. Chociaż czasami to też budujemy. Przydaje się w obu przypadkach.

Mike: Jest coś na stronie, o czym wspominają, na przykład kiedy nie chciałbyś używać Chakry? Mówią to ze względu na sposób, w jaki upraszcza ten interfejs CSS. Gdy masz dużo danych na ekranie, mogą pojawić się wyzwania. Jeśli tworzysz mnóstwo elementów DOM i wykonujesz wiele aktualizacji w czasie rzeczywistym, możesz napotkać problemy z wydajnością lub nie.

Mike: Nigdy nie widziałem problemu z wydajnością. Ale nie zbudowałem też czegoś, co wymagałoby tak dużej ilości danych w czasie rzeczywistym. To troska. Jeśli miałbym tworzyć taką aplikację, prawdopodobnie i tak chciałbym wprowadzić dwa różne podejścia, tylko po to, aby zobaczyć, jak działają z całą masą. Ale tak. Jest to uniwersalnie przydatne w obu tych przypadkach.

Drew: Myślę, że zawsze jest kompromis, czy nie ma wyboru technologii? Coś, co czyni to naprawdę prostym. Naprawdę szybkie do wdrożenia. Kompromis może polegać na tym, że gdy utworzysz 1000 punktów danych lub cokolwiek innego na stronie, ta metoda pracy nie będzie działać dobrze i spowolni Cię.

Drew: Tak. Myślę, że to sprawiedliwe. Zwykle znajduję w wyborach technologicznych, najważniejszą rzeczą jest po prostu wiedzieć. Wystarczy wiedzieć, jakie są kompromisy i jakie są ograniczenia. Żaden z nich nie jest dobry ani zły. Musisz tylko znaleźć odpowiednią równowagę dla swojej sytuacji.

Drew: Jak można się spodziewać po tego rodzaju systemie projektowania, zawiera on komponenty do typografii. Do układu. Następnie do sedna przycisków i elementów formularzy i jest biblioteka ikon. Jest prawie wszystko, czego można się spodziewać na stronie zlewów kuchennych z systemami projektowania. Masz tam wszystko. To wszystko wydaje mi się całkiem nowoczesne. Zauważyłem, że komponent layout grid faktycznie używa siatki CSS, co zawsze jest miłe dla oka. To nie tylko daje trochę flex boxu.

Mike: O tak. Całkowicie.

Drew: Czy generalnie bardzo elastycznie się z nim pracuje? Czy uważasz, że z elementów układu możesz zbudować dowolny rodzaj interfejsu użytkownika, którego potrzebujesz?

Mike: Tak. Tak. Absolutnie. Wspaniałe jest to, że w niektórych przypadkach zapewniają więcej niż jeden poziom abstrakcji. W przypadku siatki CSS mają prostą siatkę, która jest jak, ok. Chcesz to wrzucić, a oto twoja siatka. Po prostu wkładasz do niego rzeczy i określasz, myślę, że liczba kolumn lub coś w tym rodzaju. Wtedy masz siatkę.

Mike: Ale jeśli potrzebujesz trochę większej elastyczności w zachowaniu siatki, to masz ogólny składnik siatki, który jest prawdopodobnie… Prosty składnik siatki prawdopodobnie otacza inny składnik siatki. To tylko kolejna fasada sama w sobie.

Mike: To podejście do składu komponentów to cenny paradygmat w świecie React z tego samego powodu. Jeśli masz komponent, który jest bardzo wszechstronny i ma wiele zalet, to może istnieć zestaw przypadków użycia, w których chcesz używać komponentu w jeden sposób dość powszechnie. Po prostu owijasz go innym komponentem ze statycznymi lub wstępnie określonymi rekwizytami, aby uzyskać bardziej wytrzymałe komponenty.

Mike: Bardzo dobrze stosują to podejście w czakrze. Nie spotkałem się jeszcze z niczym, czego nie mógłbym z tym zrobić. Jestem pewien, że gdzieś tam jest. Lub coś, co wymaga trochę więcej kłopotów. Ale generalnie jeszcze się to nie wydarzyło. Nie żebym przynajmniej mógł o tym myśleć.

Drew: Cóż, jedną z rzeczy, które naprawdę ucieszyłem, a także czymś, o czym wspomniałeś wcześniej, jest to, że wydaje się, że jest to dość silne skupienie się na dostępności.

Mike: Tak.

Drew: Na pewno w informacjach promocyjnych. Czy to wynika z samego kodu? Czy praktykują to, co głoszą? Czy rzeczywiście ma wbudowaną dobrą dostępność?

Mike: Tak myślę. Najbliżej tego, co zrobiłem, aby przetestować go, jest uruchomienie Lighthouse przeciwko niemu. Konsekwentnie zapewnia wysokie wyniki w zakresie dostępności. Zazwyczaj używam Chakra Next.js. Next.js to wydajność od samego początku. Dość często widzisz wysokie wyniki i wszystko inne. Właśnie napisałem dzisiaj na Twitterze o tym, że strona główna książki zawiera trzy z czterech wyników Lighthouse. Jest dostępność, najlepsze praktyki, wydajność i jedna czwarta. Nie myślę teraz.

Mike: Wszystko poza wydajnością wyszło blisko 100%. Część wydajności jest na mnie tylko dlatego, że dużo włożyłem na stronę i jeszcze jej nie zoptymalizowałem. Zwykle to robi. Oceny dostępności w Lighthouse są świetne za każdym razem, gdy używam interfejsu użytkownika Chakra.

Drew: To świetnie. Wspomniałeś, że używają renderowania po stronie serwera i co ty. Rzeczy takie jak Next i Gatsby i to, co mam, to absolutnie żaden problem, prawda? Nie ma żadnych przeszkód, aby być świadomym używania Czakry z nimi?

Mike: O nie. Zupełnie nie. Nie używałem go. Zwykle skupiam się na Next.js. Nie podłączyłem się do Gatsby ani żadnego innego narzędzia SSR. Ale tak długo, jak framework nie ma niczego, co blokowałoby go przed używaniem go jako takiego, powinno być w porządku.

Mike: W przypadku Reacta Chakra zapewnia dostawcę interfejsu API kontekstowego. Dostawca motywu, dzięki któremu… Na przykład w moich aplikacjach Next.js masz… Next.js ma plik JS lub TS aplikacji z podkreśleniem, który po prostu otacza każdą stronę w aplikacji. Po prostu podłączasz tam dostawcę motywu, a Chakra wykonuje resztę pracy i po prostu staje się dostępna wszędzie. Z pewnością nie ma przeszkód, aby dodać do Next.js. Ale wyobrażam sobie, że Chakra też nie.

Drew: Czy Chakra używa TypeScriptu? Wierzę, że tak, prawda?

Mike: To wspiera. Tak.

Drew: To wspiera. To duży plus dla osób, które już używają TypeScriptu w swoich projektach. Czy są jakieś wady tego, jeśli ludzie nie używają jeszcze TypeScript?

Mike: Nie sądzę. Domyślnie używam TypeScriptu we wszystkich moich projektach, podobnie jak Echobind. Ale kiedy robię rzeczy na poziomie osobistym, używam… lubię mówić posypką TypeScript. Typescript jest niezwykle cenny w ograniczaniu błędów poprzez tworzenie typów statycznych. Jest jednak na to nośnik, gdzie w zależności od twojej wiedzy, TypeScript może być prawdziwą przeszkodą.

Mike: Mój minimalny próg dla… Ścisłość TypeScriptu, którego używam, jest dość niska, ponieważ można uzyskać wiele wartości z TypeScript za pomocą podstawowego pisania. Zapobiegnie wielu typowym wpadkom. Kiedy wchodzisz w bardziej zaawansowane pisanie, jeśli nie czujesz się zbyt komfortowo z tymi rzeczami, może to naprawdę spowolnić i sfrustrować.

Mike: To samo dotyczy Chakry i TypeScriptu. Zwykle używam niewielkiej ilości TypeScriptu, przynajmniej na początku, dopóki naprawdę nie dopracuję i ustabilizuję projekt. Ale nie przedstawia żadnych wyzwań w korzystaniu z Chakry, zarówno z TypeScript, jak i bez. Świetnie z nim. Uwielbiam go, ale z pewnością możesz go również używać bez.

Drew: Tak. Uważam, że dzięki TypeScript uzyskujesz 80% korzyści, jak mówisz, tylko z kilkoma typami. Jeśli zajdziesz zbyt daleko w króliczą norę, skończysz z skryptem, który jest głównie TypeScript. Potem trochę JavaScriptu na sam dół.

Mike: Albo spędzasz tak dużo czasu próbując wymyślić właściwy sposób na wpisanie czegoś i twój mózg wybucha. W ten sposób po prostu wpisujesz dowolne lub nieznane. Skrócisz to. Za czym opowiadam się w takich przypadkach. Jeśli wykonanie jakiejś czynności zajmuje ci zbyt dużo czasu, możesz pociągnąć za dźwignię.

Drew: Dokumentacja Chakry wydaje się być naprawdę dobrze przygotowana, pomyślałem, z… Zawiera przegląd każdego komponentu. Następnie naprawdę przydatne są wszelkie uwagi techniczne dotyczące rozważań projektowych, które zostały poczynione podczas wdrażania tego komponentu. Co, jako inżynier front-endu, uważam, że to świetnie. Mówią w moim języku. Rozumiem. Wiem co komponent robi trochę pod maską.

Drew: To tylko z mojej perspektywy, przeglądanie dokumentacji bez prawdziwego projektu, nad którym pracuję. Kiedy faktycznie pracujesz nad projektem i jesteś głęboko w nim zajęty, tylko dokumentacja się trzyma? Czy jest tak użyteczny, jak się wydaje?

Mike: O tak. Absolutnie. Moja perspektywa jest trochę inna. Nie zawsze muszę wiedzieć, co się dzieje pod maską, ale czuję, że zwykle potrafię wywnioskować. Jeśli patrzę na składnik pudełka, teraz patrzę tylko na dokumenty, podczas gdy rozmawiamy o odświeżeniu. Jeśli patrzę na komponent pudełkowy, mówię: „W porządku. To prawdopodobnie domyślnie div. Widzę to przechodzące we właściwościach gradientu, cokolwiek.

Mike: Mogę zorientować się, co się dzieje w okolicy, bez pełnego zrozumienia ich magii tłumaczenia CSS. Przetłumacz rekwizyty na CSS. Ale dokumentacja jest świetna, ponieważ jest bardzo liniowa. Jest bardzo spójny. Wymienia wszystko z przykładami. Trochę skopiuj i wklej.

Mike: Po prostu wykorzystuje naprawdę dobrą białą przestrzeń, więc patrzenie na stronę nie wydaje się przytłaczające. Możesz łatwo znaleźć to, czego potrzebujesz. Ich poszukiwania też są świetne. Ich poszukiwania są pomocne. Przez 90% czasu myślę, że po to właśnie tam zmierzam. Może tam wejść i zobaczyć, czy istnieje komponent, który może coś zrobić. Zwykle tak się dzieje. I natknąłem się na coś innego, co było przydatne, o czym nie wiedziałem. Albo po prostu odświeżyć się na niektórych zasadach. Zawsze mogę znaleźć tutaj to, czego potrzebuję.

Drew: Jedyną rzeczą, która mi się nie podobała w dokumentach od rozglądania się, była liczba reklam. Na każdej stronie ich komercyjnej oferty Chakra UI Pro.

Mike: Nie widziałem ich. Ciekawe. Widziałem to. Zdecydowanie to widziałem. Ale teraz tego nie widzę. O tak. Dobra. Jest Chakra UI Pro. Chyba odfiltrowałem to mentalnie. Słyszę cię. Przynajmniej nie jest za duży i na twojej twarzy.

Drew: Nie jest za duży. Jest po prostu w złym miejscu. To tylko miejsce, w którym szukasz informacji. I chyba dlatego to zrobili. Warto o tym wspomnieć, rozważając ekosystem i wszystko wokół projektu, że istnieje profesjonalny zestaw komponentów, które są… Myślę, że jest to odpowiednik niektórych elementów, które są w interfejsie użytkownika Tailwind, które tam są. Strony marketingowe i tutaj są składniki i więcej tych złożonych sekcji stron i całych stron, układów i rzeczy. To ty jest dostępne u twórców Czakry, ale jako oferta komercyjna.

Mike: Tak. Rzuć okiem na to teraz. Niektóre z nich są faktycznie dostępne. Lub ich wersje są dostępne za darmo, takie jak szablony czakry. To szablony Chakra, jak sądzę, to rozwiązanie open source dla Chakra Pro lub konkurenta open source. Jestem pewien, że płacisz za tonę. Wygląda na to, że Chakra Pro jest niezwykle wytrzymały i niedrogi, jeśli masz na to profesjonalną potrzebę. Wygląda na to, że istnieje kilka opcji dla twojego projektu.

Drew: Tak. Wygląda na to, że wokół niego zbudowany jest całkiem ekosystem. Czy wiesz, jak długo trwa projekt i jakie są jego następstwa? Czy jest szeroko stosowany w społeczności React?

Mike: Chcę powiedzieć tak. Nie wiem w jakim stopniu. Chciałbym po prostu zobaczyć, jaki jest, jak sądzę, udział w rynku Tailwind w porównaniu z Chakra w dzisiejszych czasach. Wiem, że Chakra dostała nagrodę stosunkowo niedawno. Nagroda GitNation React za najbardziej wpływowy projekt dla społeczności. Powiedziałbym, że jest całkiem duży i całkiem dobrze przyjęty. Nie bez powodu, co jest świetne. Ludziom zdecydowanie się to podoba. Nie jestem jedyny.

Drew: Jedną rzeczą, o której zawsze warto pomyśleć przy wprowadzaniu zależności do projektu, jest to, co się dzieje, gdy trzeba zaktualizować tę zależność.

Mike: Tak.

Drew: Wyobrażam sobie, że czakra cały czas się poprawia. Czy to przypadek, że po zaimportowaniu go i zbudowaniu z nim, zostawiasz go zablokowanego w określonej wersji? A może aktualizacja jest ogólnie bezpieczna? Czy jest stosunkowo stabilny pod względem projektu i elementów witryny, które nie zmieniają się wraz z aktualizacjami Chakry?

Mike: Tak było do tej pory. Tak. Głównie powiedziałbym, że to z powodu postępu w rozwoju. Są teraz w wersji 1.6.3. Kilka miesięcy temu przeszli od zera do jednego. To był jedyny raz, kiedy mieli przełomowe zmiany. Od tego czasu po prostu nieustannie wprowadzają nowe funkcje i poprawiają błędy.

Mike: Przez ostatnie co najmniej kilka miesięcy wszystko było tylko dodatkami. Dodatki i poprawki. Nie ma żadnych przełomowych zmian. Nie wiem, jak wygląda mapa drogowa, ale wyobrażam sobie, że tak będzie dalej. Za każdym razem, gdy go aktualizowałem, jedna z tych mniejszych wersji, była w porządku. Nigdy nie widziałem, żeby coś się z tego zerwało. Ale kiedy wyszli z wersją 1.0, nastąpiły pewne przełomowe zmiany. Nie pamiętam jednak, żeby było to katastrofalne.

Drew: Czy wiesz, jaka jest sytuacja z rozmiarami wiązek i zdolnością do potrząsania czakrą przez drzewo? Czy dodaje to dużo wagi do twojego projektu, czy też rzeczy są importowane tylko wtedy, gdy ich używasz?

Mike: Szczerze, nie pamiętam z ręki. Prawdopodobnie powinienem to wiedzieć. Nie zauważyłem, żeby dodawał dużo wagi. Głównie dlatego, że importujesz komponenty indywidualnie. Nie importowanie całej czakry ani niczego w tym rodzaju. Powiedziałbym, że jest zgodny z obsługą potrząsania drzewem, ale nie przetestowałem tego. Do tej pory nie miałem jednak rzeczy, które miałyby z tego powodu ogromną wagę.

Drew: Tak. To zawsze ważna kwestia, prawda?

Mike: Tak.

Drew: Czy jest coś jeszcze, co powinniśmy wiedzieć o interfejsie użytkownika Chakra, zanim zaczniemy go używać w projekcie?

Mike: Nie. To świetnie. Jest też całkiem aktywna społeczność. Często widzę aktualizacje. Przeglądam teraz dokumentację i widzę komponenty, których wcześniej nie widziałem. Widzę, że dzieje się wiele nowych funkcji. To wspaniale.

Drew: Tak. To wspaniale. Wydałeś książkę zatytułowaną Cut Into The Jamstack, która jest wersją zapowiedziową. Wersja beta w tej chwili. Publikujesz to samodzielnie. Czy to prawda?

Mike: Tak. Tak. Ja jestem. To była moja pierwsza próba napisania książki technicznej. Po prostu chcę to pokazać bez angażowania się w coś takiego, jak sądzę, to formalne. Jestem też kimś, kto lubi nieformalność, zwłaszcza przy tworzeniu rzeczy. Daje mi możliwość robienia tego po swojemu, robiąc to w ten sposób.

Drew: Książka dosłownie prowadzi czytelnika przez proces tworzenia oprogramowania jako aplikacji usługowej.

Mike: Tak.

Drew: Wszystko na Jamstack. Dlaczego zdecydowałeś się napisać to teraz i przyjąć takie podejście do książki?

Mike: Dobre pytanie. Koduję od jakichś 20 lat i wydaje mi się, że jakiś czas temu próbowałem napisać książkę i po prostu nie nabrała ona kształtu. Jestem w momencie swojej kariery, w którym naprawdę chcę dzielić się większą wiedzą. Używam go od tylu lat i czuję swędzenie, aby naprawdę wypuścić go więcej i pomóc innym.

Mike: Około października zeszłego roku miałem to… Chciałem wypuścić coś, co byłoby produktem. Ebook wydawał się naprawdę dobrym sposobem na rozpoczęcie. Naprawdę pasjonuję się Next.js i rzeczami, które możesz z nim zrobić. Używam terminu Jamstack i uważam Next.js za część Jamstack, ponieważ domyślnie ma statyczne generowanie witryn.

Mike: Ale myślę, że jest to jedna rzecz, o której nie mówi się wystarczająco dużo, moim zdaniem, lub może użyć jakiegoś więcej wyjaśnienia, to budowanie oprogramowania jako aplikacji usługowych za jego pomocą. Ponieważ Jamstack jest nie tylko dla stron internetowych. Działa bardzo dobrze w przypadku witryn opartych na treści, ponieważ jest statyczny, zgryźliwy i przyjazny dla SEO.

Mike: Ale jest tam tak dużo bogatej funkcjonalności, zwłaszcza w Next.js, gdzie Vercel miał wczoraj swoją konferencję Next.js i udostępniają tam coraz więcej niesamowitych funkcji. Jestem pasjonatem tworzenia oprogramowania jako usługi. Strony internetowe z oprogramowaniem są świetne, ale oprogramowanie ma robić różne rzeczy.

Mike: Dla mnie ten stos to w dużej mierze przyszłość rozwoju oprogramowania jako usługi. Przypomina mi to, czym było Ruby on Rails, kiedy się pojawiło. To była ewolucja, jeśli chodzi o mówienie. Zautomatyzował i uprościł wiele rzeczy, które kiedyś trzeba było robić ręcznie. Przyspieszyło to tempo rozwoju i podniosło jego jakość.

Mike: Next.js, Jamstack, Vercel i Chakra UI, wszystkie produkują rzeczy, które upraszczają wiele rzeczy dla ciebie. Next.js upraszcza wiele problemów związanych z prędkością i dostępnością. Instalacja. To wszystko, routing jest wykonywany za Ciebie. Nie musisz się martwić o routing po stronie klienta lub usługi. To jest automatyczne. Interfejs użytkownika Chakra robi to z dostępnością i motywami. Te narzędzia razem wzięte, po prostu… Doświadczenie programisty staje się naprawdę świetne, a wszystko po prostu… Daje ci swobodę tworzenia oprogramowania.

Mike: Aby odpowiedzieć na twoje pytanie. Powodem, dla którego teraz wydałem książkę, jest to, że we właściwym czasie naprawdę chciałem coś tam opublikować, a ekosystem Jamstack zaczął się rozwijać i rozwijać. Dało mi to również szansę napisania większej ilości kodu w Jamstack, który po prostu uwielbiam.

Drew: Myślę, że, jak mówisz, łatwo jest wpaść na pomysł Jamstack, kiedy myślisz o witrynach i typowo lekkich witrynach. Ale zrobienie tego następnego kroku i zastanowienie się, jak wykorzystać podejście do tworzenia pełnej aplikacji internetowej, jest znacznie trudniejsze. Myślę, że to większa przeszkoda, aby przejść przez to, jeśli jesteś przyzwyczajony do myślenia po stronie serwera.

Mike: Tak.

Drew: To dużo większy skok do zobaczenia, okej. Mogę przekazać moje uwierzytelnienie do usługi-

Mike: Tak.

Drew: …i mogę… Chyba dla czytelników, z punktu widzenia czytelnika twojej książki, po prostu przechodząc i budując ten przykład, podążając za tobą, jest to prawdopodobnie świetny sposób na pokonanie tej przeszkody, aby po prostu pomóc delikatnie zmień swoje nastawienie na, dobrze. W ten sposób mogłem zrobić wszystkie te rzeczy, ale na Jamstack. Zgodzisz się z tym?

Mike: Tak. Na to mam nadzieję. Myślę, że tak. Tak naprawdę jest to zamierzone. Niedawno podpisywałem wykład, wykład konferencyjny, który… Częścią mojej motywacji do tego tematu i sposobu, w jaki zdecydowałem się uczyć w tej książce, jest to, że mógłbym nauczyć cię jednego języka programowania. Framework, ale lepiej jest zapoznać się ze stosem w sposób praktyczny, ponieważ każdy programista, który ma duże doświadczenie, jest dobry w korzystaniu z dokumentacji, Googlingu i używaniu przepełnienia stosu. Dlaczego miałbym marnować twój czas, ucząc cię tego?

Mike: Chcę ci szybko, głęboko zagłębić się w stos i co mogę z nim zrobić. Zdobędziesz to, co jest wspaniałe w każdym z poszczególnych elementów. NextOFF i Prisma. Next.js i Chakra. Łączę Cię z dokumentacją, aby zaoszczędzić Ci kilku kliknięć. Ale zobaczysz na interaktywnym przykładzie, jak te elementy łączą się ze sobą. Zrozumiesz także trudne części.

Mike: Jedną rzeczą, w którą się zagłębiam, na przykład, jest ta funkcja, którą tworzę do asynchronicznego przesyłania wielu plików. Next.js ma frontend i backend. Chociaż z przodu front-endu i tył front-endu, jeśli użyjesz tej analogii, masz warstwę React. Następnie masz warstwę węzłów. Są takie trasy API.

Mike: Jeśli chcesz za jego pomocą przesyłać wiele plików i korzystać z usługi, w książce używam Cloudinary. Ale jeśli używasz usługi API do przesyłania obrazów i multimediów, co powinieneś, jest tam wiele ruchomych elementów. Istnieje strona klienta, z którą użytkownik wchodzi w interakcję. Istnieją żądania API do Cloudinary lub innego dostawcy. Ale wtedy musisz wykonać wiele żądań API, aby było to wydajne. Musisz wykonać pewne podpisywanie przeciwko Cloudinary, do którego potrzebujesz wywołania API.

Mike: Musisz wziąć ten znak i wykonać przesyłanie, które wychodzi z przeglądarki i omija twoje API i trafia bezpośrednio do Cloudinary. Następnie musisz zapisać to w swojej bazie danych, która używa twojego frontendowego backendu frontendowego. Jest wiele elementów i Next.js… W społeczności Next.js nie ma jeszcze wtyczki open source do tego. 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. Tak. 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: Fantastycznie.

Mike: I've got another one coming up in probably a couple of weeks. Tak. Tak. 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. Otóż ​​to.

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. Czy miałeś jakieś słowa pożegnalne?

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