Smashing Podcast Episode 18 z Miną Markham: Jak mogę nauczyć się reagować?

W tym odcinku Smashing Podcast mówimy o nauce React. Jak pracuje się z React i jak mogą rozpocząć pracę doświadczeni programiści? Rozmawiałem z Miną Markham, żeby się dowiedzieć.

Pokaż notatki

• Mina Markham na Twitterze
• Osobista strona Miny

Cotygodniowa aktualizacja

• Od stron statycznych do aplikacji JAMstack użytkownika końcowego z FaunaDB autorstwa Bryana Robinsona
• Czy Twoja strona internetowa stresuje odwiedzających? autor: Suzanna Scacca
• Mirage JS Deep Dive: Zrozumienie czasu, reakcji i przejścia (część 3) autorstwa Kelvina Omereshone
• Tworzenie aplikacji internetowej do rozpoznawania twarzy za pomocą React autorstwa Adeneye David Abiodun
• Internacjonalizacja w Vue z wtyczką Vue I18n autorstwa Timiego Omoyeni

Transkrypcja

Drew McLellan: Jest architektem front-end, prelegentem i organizatorem konferencji oraz miłośnikiem systemów projektowania. Jej praca nad biblioteką patentów Pantsuit dla kampanii prezydenckiej Hillary Clinton Hillary for America była przełomem dla systemów projektowania w branży i była opisywana w publikacjach, takich jak Wired, Fast Company i Communication Arts. Jak wielu z nas, zarabia na życie pisaniem kodu, obecnie jako starszy inżynier w Slacku. Więc wiemy, że jest utalentowaną i myślącą przyszłościowo programistką, ale czy wiesz, że kiedyś pomylono ją z Patrickiem Swayze? Moi miażdżący przyjaciele, witajcie proszę Minę Markham. Cześć Mina. Jak się masz?

Mina Markham: Rozbijam.

Drew: Dobrze słyszeć. Teraz, czasami w Smashing Podcast, rozmawiamy z ludźmi na temat, z którego są najbardziej znani. A czasami fajnie jest po prostu porozmawiać o czymś nieco niejasnym. Teraz mógłbym z tobą rozmawiać przez cały dzień o bibliotekach wzorów, systemach projektowania, niesamowitej pracy, którą wykonałeś w tej konkretnej dziedzinie, i mógłbym porozmawiać z tobą o tematach, o których być może mówiłeś, wydarzeniach, takich jak Wydarzenie Oprócz takich rzeczy jak kierownictwo artystyczne. I oczywiście moglibyśmy rozmawiać o CSS, dopóki krowy nie wrócą do domu. Ale napisałeś na Twitterze kilka dni temu i zdałem sobie sprawę, że tak naprawdę oboje jesteśmy na tym samym wózku, ponieważ obaj jesteśmy doświadczonymi inżynierami front-endu i oboje niedawno rozpoczęliśmy współpracę z Reactem. Więc zanim przejdziemy do samego React, gdzie doszedłeś do tego momentu? Czy pracowałeś z innymi bibliotekami i frameworkami do programowania JavaScript?

Mina: Nie, właściwie od jakiegoś czasu robię głównie waniliowy JavaScript. A wcześniej oczywiście zainteresowałem się JavaScriptem. Pozwól, że to przeformułuję. Zacząłem pracę ze skryptem Java używając jQuery, ponieważ to miało dla mnie największy sens. To było coś, co było dla mnie bardzo łatwe do przeanalizowania, aby dowiedzieć się, co się dzieje. A potem wróciłem do robienia tylko wanilii, zwykłego JavaScriptu, ESX i tak naprawdę nie wciągnąłem się zbytnio w wojny o frameworki. Nie miałam, jakbym nie miała ulubionego. Nie miałem psa w walce. Pomyślałem: „Dla ciebie, React, cokolwiek. Tak naprawdę nie obchodzi mnie to.” Ale czasy się zmieniają.

Drew: I w ten sposób pracując z waniliowym JavaScriptem, ponieważ sam też dużo tego robiłem. Pracowałem z różnymi frameworkami. Dużo zrobiłem z jQuery w tamtych czasach. Pracowałem z YUI, Yahoo User Interface Library. Czy czułeś wiele bolączek, które próbuje rozwiązać coś takiego jak architektura Reacta?

Mina: Chyba nigdy nie miałam. Większość swojej kariery spędziłem na tworzeniu stron internetowych w porównaniu z aplikacjami internetowymi i tym podobnymi rzeczami. Więc wszystko, co zrobiłem, było do pewnego stopnia dość statyczne. Tak naprawdę nigdy nie miałem do czynienia z zarządzaniem państwem, takimi rzeczami. Tak więc problemy, które React próbuje rozwiązać, nigdy tak naprawdę nie odnosiłem się do rodzaju pracy, którą wykonywałem.

Drew: Ogólnie rzecz biorąc, jaki jest charakter projektów, które do tej pory prowadziłeś z Reactem?

Mina: Właściwie to był tylko jeden projekt, nad którym obecnie pracuję i nie mogę zdradzić zbyt wielu szczegółów, ponieważ spółka publiczna i wszystkie te dobre rzeczy.

Drew: Oczywiście.

Mina: Ale zasadniczo to, co próbuję zrobić, to używać React do, jest to bardzo interaktywny rodzaj produktu, w którym potrzebuję ludzi, aby mogli wprowadzać i zapisywać dane w określonym stanie, a następnie manipulować nimi i wygenerować coś innego z tymi danymi. I to jest po prostu coś, co w tym momencie nie jest prostą manipulacją DOM. To naprawdę dużo bardziej złożone, front-endowe zarządzanie danymi i zarządzanie stanem tych danych. Więc tak naprawdę nie było innej alternatywy, jak tylko użyć jakiejś biblioteki, która próbuje rozwiązać ten problem. Wiedziałem, że nie będę w stanie przejść przez zwykły JavaScript. Rozważałem obsługę czegoś po stronie serwera, ale znowu, ze względu na bardzo interaktywny charakter tego, z czym pracuję, musi to być w kliencie. Dlatego już używamy Reacta w Slacku do różnych innych rzeczy. A więc pomyślałem: „Ok, cóż, powinniśmy po prostu iść dalej i przyjąć to samo, co reszta rodziców, których używają firmy, i zacząć stamtąd”.

Drew: Jedną z rzeczy, którą zawsze wydaje mi się być problemem, gdy ludzie wybierają Reacta, jest opanowanie łańcucha narzędzi, który jest potrzebny, aby wszystko działało, a Webpack jest oczywistym słoniem w pokoju. Czy musiałeś dużo konfigurować łańcucha narzędzi lub jak ja, jeśli miałeś luksus robienia tego za Ciebie przez kolegów z drużyny?

Mina: Och, uwielbiam dane w zespole ds. infrastruktury w Slack. Zespół infrastruktury front-end w Slacku załatwił to wszystko. Nie musiałem o tym myśleć. To było wspaniałe. Ponieważ w przeszłości próbowałem nauczyć się React. Zwykle najlepszym sposobem, w jaki się uczę, jest praca i wdrażanie. Używamy Reacta do budowania wielu hillaryclinton.com w 2016 roku. Więc to nie tak, że nigdy nie pracowałem z ludźmi, którzy go używają. Po prostu moja praca nigdy bezpośrednio nie wymagała ode mnie zaangażowania. Ale ta baza kodu była bardzo złożona i bardzo wyrafinowana, a działo się tak wiele, że istnieje taka bariera wejścia, aby spróbować czegoś się tam nauczyć, jeśli nie wiedziałeś już, jak działają React i Redux i to wszystko, co ja nie. Więc nie byłem zbyt skuteczny w uczeniu się w tym środowisku.

Mina: Na szczęście mam ludzi, którym lubię zabierać trochę więcej złożonych elementów. W ogóle nie muszę się martwić konfiguracją Webpacka. To zostało ustawione. To zostało wypróbowane i przetestowane i gotowe do pracy. Jestem na podobnej łodzi, gdzie oprócz Reacta używamy również Redux, z czego nie zdawałem sobie sprawy, że to dwie różne rzeczy. Nie wiedziałem, która część obsługiwała którą. Wpadnięcie do takiej bazy kodu było trochę dezorientujące, ponieważ nie zdawałem sobie sprawy, że wszystkie są tym samym. Miałem ludzi, którzy byli doświadczonymi programistami React, którzy powiedzieli mi: „Och, używamy również Redux, co sprawia, że ​​trochę trudniej jest ci naprawdę dowiedzieć się, co React wszystko może zrobić, jeśli zaczynasz od zera”. I nigdy do końca nie wiedziałem, co przez to rozumieją, bo nie wiedziałem, o czym mówią.

Mina: Odpowiadając na twoje pierwotne pytanie, wciąż mam trochę więcej bariery wejścia, ponieważ to nie jest tylko nauka React. Muszę się nauczyć Reacta i obsługi sklepu Redux. Więc te dwie rzeczy na raz mogą być trochę za dużo.

Drew: Tak, znalazłem dokładnie to samo w istniejącej bazie kodu, co mój pierwszy projekt React, który używa Redux. I myślę, że jak to jest w naturze każdego z tego rodzaju technologii, kiedy są młode, iterują bardzo szybko i co jest najlepszą praktyką w pewnym momencie, 6 miesięcy później się zmieniło i jest inny sposób robienia rzeczy. A kiedy masz bazę kodu, która obejmuje wiele lat, czasami możesz mieć w niej różne style implementacji. Nie zawsze zachowuje synchronizację. I oczywiście, jeśli korzystasz z samouczka lub czegokolwiek do nauczenia, czytasz książki, korzystasz z zasobów, będą one w najnowocześniejszej wersji tego, jak to robić. I to niekoniecznie musi się zgadzać z tym, co widzisz, gdy patrzysz na istniejący, dojrzały produkt. Czy to coś, czego w ogóle doświadczyłeś, czy udało Ci się utrzymać naprawdę aktualną bazę kodu?

Mina: Myślę, że jest to coś, czego zdecydowanie doświadczam. Kiedy próbowałem nauczyć się samodzielnie robić React, przejrzałem różne tutoriale i tym podobne. I zauważyłem, a przynajmniej powiedzieli mi ludzie, którzy pracowali ze mną, że niektóre z rzeczy, które robimy, lub rodzaj antywzorca lub niezupełnie, jak to działa teraz, ponieważ ta podstawa kodu jest nieco, no cóż dojrzeje nam krewny, ale ma już kilka lat. A więc jest kilka sposobów, które, jak sądzę, są łatwiejsze do zrobienia niż sposób, w jaki robimy to obecnie, ponieważ zostało to napisane lata temu. Tak więc jest to trochę bieżnia próbująca nadążyć za aktualnymi czasami i upewnić się, że chcę robić rzeczy jak najlepiej, ale też nie chcę łamać ustalonej bazy kodu, ponieważ chcę się bawić z rzeczami.

Drew: Oczywiście, jedną z rzeczy związanych z Reactem, że ludzie tacy jak ty i ja przychodzą do tego, może wydawać się nieco niepokojące, gdy ta cała sprawa z JSX. Czy używasz JSX w swoim projekcie?

Mina: Jesteśmy. Używam JSX.

Drew: Pogodziłeś się z tym?

Mina: Upadałam jak mały kawałek mnie umiera za każdym razem, gdy otwieram jeden z tych plików. Nadal uważam za świętokradztwo umieszczanie mojego kodu HTML w pliku JavaScript. Wiem, że to trochę rewolucyjne i cały sedno sprawy, ale po prostu czuje się nieswojo, że piszę swój znacznik w pliku JavaScript. Pogodziłem się z tym, ale za każdym razem, kiedy to robię, mówię po prostu „…” Rozłąka dotyczy, to jest rzecz. Poproszę o zwrot.

Drew: To słuszny punkt, prawda? Moje przeszłość, kiedy zacząłem poważniej pracować z JavaScript, i prawdopodobnie wtedy, gdy wróciłem do Yahoo, rzeczy były bardzo podobne do modelu stron HTML renderowanych przez serwer, a następnie stosowałem podejście progresywnego ulepszania, nakładając JavaScript na wierzch, aby ulepszyć Interfejs. A jeśli stan czegoś w interfejsie wymagał zmiany, Twój kod musiał wiedzieć o wszystkich częściach interfejsu, które wymagał aktualizacji, co oczywiście prowadzi do ściśle powiązanego podejścia z tymi dużymi monolitycznymi widokami, w których kod, który piszesz musi wiedzieć o całym kodzie wokół niego. I wydaje mi się, że to nie nadaje się do podejścia opartego na komponentach, które można by zastosować podczas pracy z biblioteką wzorców lub systemem projektowym, który jest bardziej w obszarze, w którym się specjalizujesz. Sądzę, że React bardziej nadaje się do takiego podejścia, prawda?

Mina: Myślę, że tak, zwłaszcza biorąc pod uwagę możliwość połączenia bardzo specyficznego CSS z jednym JSX lub jednym komponentem React. W ten sposób znacznie łatwiej jest oddzielić lub wziąć tylko to, czego potrzebujesz do biblioteki, a resztę zostawić, podczas gdy biblioteka wzorców lub system projektowania, który próbuje zrobić coś bardziej monolitycznego za pomocą tylko jednego dużego pliku CSS w stylu lub czegoś podobnego , to bardzo utrudnia. Musisz wziąć to wszystko albo nic. Dlatego doceniam to, że React pozwala nam na bardziej zindywidualizowany, bardziej złożony sposób rozwoju, nawet jeśli nadal życzę sobie, abym naprawdę oddzielił moją warstwę prezentacji i moją warstwę treści od warstwy interaktywności. Ale może to tylko ja jestem trochę oldschoolowy w tym sensie.

Drew: Zdecydowanie czuję tam ból. Chodzi o to, że przyjdź i popraw mnie, jeśli się mylę, rozumiem, że zamiast oddzielać technologie, CSS, JavaScript i HTML, oddzielam funkcjonalność. Więc wszystko, co jest jednym składnikiem, istnieje razem-

Mina: Tak.

Drew: … co, jak sądzę, jest przydatne, jeśli ten komponent nie jest już potrzebny. Możesz go po prostu usunąć, a zniknie i nie pozostawia śladu wokół Twojej aplikacji. Jednak nie zawsze tak jest w przypadku CSS. Jak pracujesz z CSS w React? Czy patrzyłeś na takie rzeczy jak styled-components lub coś w tym stylu?

Mina: Nie, nie mamy. Słyszałem o styled-components, ale nigdy tak naprawdę nie zbadałem ich w pełni, jeśli mam być szczery. Więc sposób, w jaki pracujemy z CSS w React, polega na tym, że piszemy Less i po prostu mamy plik Less dołączony do każdego pojedynczego komponentu, który jest importowany do tego komponentu. A potem jest wiązany przez Webpack i podawany klientowi.

Drew: Czy używasz systemu takiego jak BEM, czy czegoś do zmiany przestrzeni nazw?

Mina: Tak. Używamy BEM do przestrzeni nazw, chociaż przestrzeganie tego jest trochę zróżnicowane w zależności od tego, kto co pisze. Ale staramy się użyć wzorca przestrzeni nazw BEM, aby nieco bardziej wyjaśnić, jaki jest cel każdej klasy i komponentu.

Drew: A czy to działa z powodzeniem dla Ciebie?

Mina: Tak myślę. Czasami pojawia się ten sam stary problem, że czasami nie wiem, jak coś nazwać. Po pewnym czasie codzienne sprawy zawsze były i zawsze będą trudne dla mistrza. Więc to jedyny problem, z którym mam do czynienia, że ​​czasami nie mam pojęcia, jak powinienem nazwać konkretny komponent.

Drew: Zdecydowanie. To ciągła walka, prawda, jak nazwać rzeczy?

Mina: Tak.

Drew: Zawsze kończę, kiedy pracuję nad nową funkcją lub czymś w tym rodzaju, dajesz komponentowi i wszystkim klasom i wszystkim nazwę, którą ta funkcja ma w tej chwili. A potem, do czasu premiery, zmieniono jej nazwę na inną. Masz więc w kodzie odniesienia do starej nazwy, a interfejs ma nową nazwę. I …

Mina: Staram się zawsze nazywać rzeczy w oparciu o funkcję lub przeznaczenie w porównaniu z rzeczami, które są nieco bardziej efemeryczne, ponieważ jest mniej prawdopodobne, że rzeczywisty cel tego komponentu się zmieni. Zapomniałem wspomnieć, ale oprócz korzystania z BEM, myślę, że używamy BEMITów, jeśli jesteś zaznajomiony z tym. Jest to w zasadzie ITCSS plus BEM, oba stworzone przez Harry'ego Robertsa. Dlatego używam notacji węgierskiej, aby określić, czy coś jest komponentem, czy obiektem układu, czy też większym wzorem złożonym z wielu komponentów. A następnie używamy konwencji BEM do oznaczenia jak element blokowy i tak dalej.

Drew: A czy musiałeś dużo refaktoryzować i usuwać komponenty i rzeczy w swojej bazie kodu i musiałeś poradzić sobie z problemem pozostawienia CSS?

Mina: Tak. Tak więc niereagująca część mojej pracy, polegająca na utrzymywaniu slack.com, to tylko kilka plików Less, które są kompilowane dla CSS. I gwarantuję, że jest tam dużo kodu zombie, ponieważ zdecydowanie powtarzamy wiele rzeczy odkąd tam byłem. I nie zawsze mamy czas, aby wrócić i zrobić porządki, w przeciwieństwie do przeprojektowania strony lub czegoś takiego. Więc to spóźnione na audyt, tak powiem.

Drew: Właśnie temu przyglądaliśmy się w naszym projekcie React, patrząc na to, jak podchodzimy do CSS. W tej chwili mamy kilka dużych, globalnych plików CSS dla całej aplikacji i dochodzi do sytuacji, w której rozmiar naszego pakietu po prostu rośnie, rośnie, rośnie i nigdy nie maleje, nawet jeśli rzeczy się zmniejszają REMOVED. Przyglądaliśmy się więc takim rzeczom, jak styled-components, Tailwind to kolejna opcja, którą naprawdę poważnie rozważamy. Czy często patrzyłeś na tylny wiatr?

Mina: Nieczęsto się temu przyglądałam. Byłem ciekaw, ale znowu, nigdy tak naprawdę nie miałem czasu, aby zagłębić się, aby rzeczywiście sprawdzić, czy jest to coś, co chciałbym spróbować wprowadzić do naszej bazy kodu.

Drew: Właściwie byłem dość zaskoczony, ponieważ tak jak ty, jestem trochę staroświecki, jeśli chodzi o to, jak to robić. Lubię ładne rozdzielenie obaw. Lubię pisać CSS w CSS i oczywiście podejście z Tailwind polega na tym, że masz wszystkie te nazwy klas, które przypominają style, które stosujesz. A jeśli jest brudny.

Mina: Tak.

Drew: Zgłosiłem się na ochotnika w zespole, każdy z nas wziął technologię, aby zbadać, czy będzie pasować do naszych problemów, i zgłosiłem się na ochotnika do przyjrzenia się Tailwindowi, ponieważ byłem absolutnie pewien, że go znienawidzę.

Mina: Nie, nie.

Drew: Ale okazuje się, że tak naprawdę myślę, że to rozwiązuje wiele problemów. Byłem pod wrażeniem.

Mina: Tak. W pewnym sensie doszedłem do podobnego sposobu myślenia, ponieważ w przeszłości wolałem, aby jedna klasa zawierała wszystkie style, których potrzebowałem dla konkretnego komponentu, a nie robiła klasy dla każdej właściwości, jak sądzę, że Tailwind lub języki takie jak to. Z podobnych powodów czułem się jak: „Cóż, w tym momencie po prostu używam wbudowanego CSS. Dlaczego miałbym to zrobić?” Ale w miarę jak rozwijałem się coraz bardziej, wewnątrz naszego systemu projektowania Slack, stworzyłem kilka klas, które nazywam klasami użytkowymi, które robią takie rzeczy, jak dodawanie odrobiny marginesu do wzorca. Zauważyłem, że coraz częściej używam tych klas oprócz klas składowych. Więc mówię: „Ok, może powinienem wrócić do tego wszystkiego, aby zrobić CSS jako jedną deklarację na raz”. Nie wiem, czy posunąłbym się tak daleko, ale zdecydowanie warto się nad tym zastanowić.

Drew: Komputery wydają się odwracać pod względem trendów między rozwiązaniami cienkich klientów a grubymi klientami. Zaczęliśmy od komputerów typu mainframe z terminalami, a następnie od ery komputerów PC z oknami, biurami i innymi tego rodzaju dużymi aplikacjami. I wszyscy robili się naprawdę wolno, a potem pojawiła się sieć, a to była tylko przeglądarka, a cała praca była wykonywana na serwerze. I znowu wszystko było szybkie i żwawe. A teraz wróciliśmy do umieszczania całej tej pracy z powrotem w przeglądarce, wszystko zrobione z JavaScript, takie rzeczy jak React i podejście JAMstack, gdzie wróciliśmy do pewnego rodzaju grubego klienta. Czasami martwię się, że wymagamy od przeglądarki zbyt wiele. Czy to pomyłka? Czy nie wymagamy zbyt wiele od przeglądarki, która próbuje zrobić to wszystko w React?

Mina: Chcę powiedzieć tak, z zastrzeżeniem, że moje doświadczenie ogranicza się głównie do statycznych stron internetowych. Nie zajmuję się dużo rozwojem produktu. Więc może w tej sferze ma to więcej sensu. Ale z mojej perspektywy wydaje mi się, że często używamy siekiery, gdy potrzebujemy tylko noża do masła. Nie wiem, dlaczego musimy to wszystko umieścić w przeglądarce, włożyć tyle pracy i tyle presji na klienta. Czuję, że moglibyśmy to zrobić znacznie prościej. Jedną z rzeczy, które zawsze sprawiały, że trochę wahałem się przed użyciem Reacta, lub mówię, wahałem się, ale to, co mam na myśli, kiedy mnie to rozzłościło i aktywnie się sprzeciwiałem, było to, że wszedłem na stronę internetową i dosłownie nic się nie wydarzyło, ponieważ tam był jeden błąd lub coś takiego, na przykład „Naprawdę? Cała strona jest zepsuta, bo jedna funkcja się zepsuła?”

Mina: Trochę mnie denerwowało, że wiele razy było to podejście „wszystko albo nic”. Jedna z prelekcji, które wygłosiłem w AEA w przeszłości i innych miejscach w przeszłości, mówiła o tym, jak uwzględnić progresywne ulepszanie i nie tylko twój rozwój, ale także kierownictwo artystyczne i projektowanie stron. Wskażę konkretnie przykłady stron internetowych, które nie dokonały stopniowego ulepszania ani żadnego rodzaju wdzięcznej degradacji. To było tak, jakbyś albo miał uruchomiony JavaScript w przeglądarce, albo absolutnie nic. I byłaby to po prostu prosta witryna, która przedstawia informacje o historii projektowania stron internetowych, która była jedną z tych stron, o których faktycznie mówiono, historii projektowania stron internetowych od 1990 roku do teraz. To była piękna strona internetowa z dużą ilością osi czasu, animacją rzeczy. Ale mógł być również renderowany statycznie za pomocą samej listy. Były kroki pomiędzy pokazaniem niczego, a pokazaniem tego pięknie ulepszonego doświadczenia, które moim zdaniem zostało utracone z powodu sposobu, w jaki podchodzimy do nowoczesnego tworzenia stron internetowych.

Drew: Czy powiedziałbyś, że istnieją absolutnie pewne kategorie projektów, które pasują do rozwiązania takiego jak React, a inne, w których naprawdę nie powinno się go używać i powinieneś używać bardziej tradycyjnych metod?

Mina: Myślę, że jeśli Twoja witryna jest w większości statyczna, po prostu wyświetlała informacje, myślę, że nie rozumiem, dlaczego potrzebujesz projektu takiego jak React, aby renderować coś, co nie ma wiele interakcji poza manipulacją DOM . Chyba nie widzę, jakie korzyści z tego czerpiesz. Znowu mogę nie pracować nad odpowiednimi projektami. Być może nie tylko widziałem lub znalazłem ten przypadek użycia, ale trudno mi sprawdzić, czy jest to w większości statyczna witryna, prezentująca zawartość, niezbyt dużo interakcji, niewiele interakcji poza zmanipulowanym DOM i robieniem animacji. Nie rozumiem, jak posiadanie biblioteki React pomoże ci osiągnąć ten cel.

Drew: To ciekawe, bo nieźle o tym mówię, bo właściwie tego nie używałem, ale widzę wiele projektów Gatsby'ego, a Gatsby jest statycznym generatorem witryn, który wykorzystuje w sobie interfejs React. Widzę, że wszystkie przykłady motywów i rzeczy, które mają do dyspozycji, to wszystkie witryny oparte na treści lub blogi, witryna z przepisami, portfolio i tego typu rzeczy. I jest coś, co myślę, że to niekoniecznie jest odpowiednie dla czegoś takiego jak React. Dlaczego nie jest to renderowane statycznie, a następnie stopniowo ulepszane?

Mina: Tak.

Drew: To nie jest oprogramowanie.

Mina: Tak. Właściwie też nie używałem Gatsby'ego. Słyszałem na ten temat wiele wspaniałych rzeczy, ale to prawdopodobnie jeden z przykładów, o których myślę, kiedy myślę: „Ok, myślę, że po prostu nie rozumiem, dlaczego to narzędzie jest niezbędne do wykonywania tej konkretnej pracy. ” Znowu nie wiem. Może dzieje się tak dlatego, że więcej osób czuje się komfortowo pisząc w React, kiedy piszą coś nowego, i jest to po prostu dostarczanie narzędzia, które spotyka ludzi tam, gdzie są. Słyszałem świetne rzeczy o statycznych generatorach witryn, które używają React dla ludzi, którzy ich używali i kochają, ale nie jest to przypadek użycia, który od razu powiedziałbym: „Och, to ma sens”.

Drew: Wygląda na to, że zawsze toczyła się walka między tym, co nazwalibyśmy witryną internetową, a tym, co można nazwać aplikacją internetową. A przepaść między nimi wydaje się być coraz szersza i szersza, a podejście progresywnego ulepszania próbuje wypełnić lukę, biorąc coś statycznego, dodając JavaScript i dodając interaktywność. Wygląda na to, że takie rzeczy jak React idealnie nadają się do oprogramowania, które uruchamiasz w przeglądarce. Zgodzisz się z tym?

Mina: Zdecydowanie się z tym zgodziłabym, ponieważ wydaje mi się, że została stworzona dla tego typu środowiska; został zbudowany do uruchamiania oprogramowania. Został zbudowany przez Facebooka dla Facebooka. Więc został zbudowany dla produktu. Został zbudowany do uruchamiania aplikacji internetowych w przeglądarce, a niekoniecznie do rodzaju pracy, do której, jak wspomniałem, jestem przyzwyczajony. Myślę więc, że w tych scenariuszach używanie go zdecydowanie ma sens, jeśli tworzysz bardziej złożone, bardziej wyrafinowane oprogramowanie, które ma działać w przeglądarce. Ale jeśli budujesz witrynę marketingową lub cokolwiek, myślę, że nadal będę miał problem ze zrozumieniem, dlaczego będzie to konieczne.

Drew: Czy dajemy ludziom pozwolenie na tworzenie przyzwoitych, statycznie renderowanych stron internetowych?

Mina: Chciałabym, żeby wydarzyło się to więcej. Czuję, że to się trochę zgubiło i trochę się zgubiło, jeśli kiedykolwiek było fajnie, czy cokolwiek. Czuję, że straciliśmy tę część tworzenia stron internetowych. To takie zabawne: oboje powiedzieliśmy, że jesteśmy trochę ze starej szkoły, i śmieję się z tego, ponieważ właściwie zajmuję się tworzeniem stron internetowych od jakich, sześciu lat? Jak mam starą szkołę? Nie trwało to dla mnie tak długo. A jednak jakoś jestem częścią starej gwardii, która nie lubi nowych i błyszczących rzeczy. Nie rozumiem.

Drew: Tak naprawdę React istniał przez cały czas, odkąd byłeś web developerem.

Mina: Może po prostu mam starą duszę. Nie wiem

Drew: Myślę, że prawdopodobnie tak jest. Nie przyglądałem się temu osobiście, istnieją podejścia do renderowania po stronie usług, które można zastosować w aplikacjach React. Czy doświadczyłeś któregoś z nich?

Mina: Nie doświadczyłem żadnego z nich. Przyjrzałem się im pokrótce pod kątem projektu, nad którym obecnie pracuję, ponieważ wydaje mi się, że istnieją części operacji, które działałyby lepiej na serwerze niż na klientach. Ale myślę, że z powodu mojej ograniczonej wiedzy i faktu, że podstawa kodu jest trochę bardziej skomplikowana, niż jestem w stanie zrozumieć, nie byłem w stanie wymyślić, jak sprawić, by ta część działała. W końcu chciałbym to rozgryźć, ale spędziłem cały dzień na zagłębianiu się w to. Pomyślałem: „Wiesz co? Nie będę się oszukiwał, muszę być. Więc po prostu cofnę się i obiorę inną trasę”.

Drew: Tak. Myślę, że wszyscy tam byliśmy.

Mina: Tak. Zszedłem ścieżką. Pomyślałem: „Och, to jest mroczne i przerażające. Odwróćmy się. Odwróćmy się.

Drew: Odejdź od kodu.

Mina: Tak.

Drew: Jak dotąd byłeś bardzo dyplomatyczny i uprzejmy wobec Reacta. Czuję, że pod powierzchnią trochę bulgocze napięcie. Daj spokój. Powiedz nam, co naprawdę czujesz.

Mina: Byłam uprzejma i dyplomatyczna, głównie dlatego, że fani Reacts mogą być czasami trochę złośliwi i wolałabym, żeby po mnie nie przyszli. Więc proszę, React jest świetny. To jest wspaniałe. Użyj go do tego, do czego chcesz go użyć. Dzieciak, ale nawet ten tweet, o którym wspomniałeś na początku tego podcastu, w którym myślę, że powiedziałeś, że tego nie nienawidzę. Nie kocham tego, ale nie nienawidzę. Nawet to stwierdzenie, że mam ludzi, nie było witriolu, ale bardziej byli gotowi doskoczyć do obrony i powiedzieć: „Cóż, kocham to, ponieważ X, Y, Z”. Mówię: „Nie powiedziałem, że to złe. Właśnie powiedziałem, że nie mam nic przeciwko całej sprawie. Ale najwyraźniej bycie meh nie jest w porządku. Muszę to pokochać.

Mina: To dlatego prawdopodobnie byłam trochę bardziej dyplomatyczna niż byłabym zwykle, tylko dlatego, że nie chcę, aby ludzie myśleli, że źle mówię, bo tak nie jest. Ma miejsce w większym tworzeniu stron internetowych. Pełni funkcję. Dobrze wykonuje swoją pracę. Ludzie to uwielbiają. To po prostu nie jest narzędzie, którego kiedykolwiek miałem lub chciałem używać aż do teraz.

Drew: Tak. Sprawy mogą stać się bardzo plemienne, prawda, kiedy ludzie czują, że muszą stanąć po jednej lub drugiej stronie, a ty jesteś albo absolutnie za czymś, albo absolutnie przeciwko czemuś? I nie jestem pewien, czy służy to dobremu celowi i nie sądzę, aby naprawdę posuwało nas do przodu jako branżę i społeczność, aby to zrobić.

Mina: Tak. To naprawdę dziwne. Fascynujące jest oglądanie z samego socjologicznego punktu widzenia, ale często jest to po prostu dziwne. To tak, jakbym nie mógł być, jak powiedziałem, neutralny w pewnych sprawach. Muszę mieć zdecydowane zdanie, czyli nie uważam za zdrowe. Co to za określenie „Silne opinie, luźno utrzymywane?” W ten sposób podchodzę do rzeczy. Mam silne przeczucia w pewnych sprawach, ale nie jest tak, że nie możesz zmienić mojego zdania. Kiedy czuję się jak niektórzy ludzie, ich tożsamość zostaje uwikłana w pewne aspekty tego, że jeśli nie jesteś za tym, z czym wybrali się identyfikować, jest to osobista lekceważenie, a nie tylko, nie obchodzi mnie ten konkretny temat, lub narzędzie, czy cokolwiek.

Drew: Tak. Nie wiem, czy pogarsza to fakt, że wszyscy mamy tendencję do większej specjalizacji w poszczególnych częściach stacka. I wiem, że są ludzie, którzy są programistami React. Nazywaliby się programistą React, ponieważ w tym właśnie pracują. I niekoniecznie napisaliby jakiś waniliowy skrypt Java, nie używaliby Vue czy czegokolwiek. React to ich świat. Sądzę więc, że powiedzenie: „Nie lubię Reacta” wydaje się być atakiem na całą ich karierę. Cóż, naprawdę zainwestowali w to, abyś polubił React, czy jakakolwiek technologia może być.

Mina: Przyznam się, że w przeszłości byłam jedną z tych osób. Właściwie chyba chodziło głównie o SASS, tak mi się wydaje. Byłem w zespole zajmującym się SASSem jako preprocesor, a wszystkie inne preprocesory to śmieci. Nie chcę o nich mówić. Nie chcę się nimi zajmować. I zdałem sobie sprawę, że to bardzo wąski sposób patrzenia na rzeczy. Użyj odpowiedniego narzędzia do pracy. Niezależnie od tego, co zwiększa Twoją produktywność, jest to właściwe narzędzie. Tak naprawdę nie ma znaczenia, co to jest.

Drew: Czy są jakieś technologie, z którymi pracujemy, które nie mają tego rodzaju plemiennego charakteru? Czy jest coś, z czego ludzie po prostu chętnie korzystają, a czego nie? Nic nie przychodzi mi do głowy.

Mina: Łał. Właściwie nikt nie ma opinii na temat znaczników.

Drew: Nie.

Mina: Czuję, że nikt nie ma opinii na temat rzeczywistego kodu HTML i po prostu znaczników, po prostu w stylu: „Jest tam”. Używają go. Ale ludzie mają mocne opinie na temat CSS i tego, że jest albo okropny, albo cudowny, i wojen o preprocesory, które tak naprawdę nie zdarzają się już tak często, i oczywiście, cały plemienność w różnych bibliotekach JavaScript.

Drew: Więc powiedziałbyś, że twoja dotychczasowa podróż z React to wciąż tylko: „To narzędzie. Spełnia swoje zadanie?

Mina: Przeszło od ciekawości do aktywnej i wewnętrznej niechęci z powodu tego, jak powszechna była i jak niepotrzebna, myślałam, że ta przewaga była dla mnie. Jestem teraz z meh, co znowu nie znaczy, że tego nienawidzę. To po prostu oznacza…

Drew: Myślę, że to dobre miejsce. Myślę, że prawdopodobnie wszyscy jesteśmy silniejsi jako technolodzy, jeśli rozumiemy wartość danej technologii dla jej celów. Możemy ocenić, co jest dobre w jakich okolicznościach i wybrać odpowiednie narzędzie do pracy.

Mina: Tak. I w ten sposób dotarłem do tego momentu w mojej karierze, w którym tak naprawdę nie inwestuję w żaden konkretny język, technologię lub cokolwiek innego, ponieważ brzmi to tak: „Każde narzędzie jest najbardziej odpowiednie dla tego, czym jesteś próbując to zrobić, to użyj tego. Nauczyłem się, że na wszystko jest miejsce; na wszystko jest czas i miejsce. A do niedawna nie było czasu ani miejsca, w którym mógłbym skorzystać z tego bibliotekarza React, a teraz jest.

Drew: Myślę, że to dobre miejsce. Więc ostatnio nauczyłem się wszystkiego o React, tak jak ty w codziennej pracy. Czy jest coś jeszcze, o czym ostatnio się dowiedziałeś?

Mina: Jak na ironię, nauczyłam się innego języka, który wywodzi się z Facebooka. Dużo pracuję nad hackowaniem, głównie dlatego, że tego właśnie używam w Slacku, w mojej codziennej pracy. Nauka hakowania utorowała mi drogę do wygodniejszego korzystania z Reacta, ponieważ stosują bardzo podobne wzorce, z wyjątkiem tego, że jeden jest po stronie serwera, a drugi nie. Tak więc, podobnie jak ogólnie, dowiedziałem się więcej o back-endzie io tym, jak to działa z różnych powodów. A przez ostatnie kilka lat rozciągałem się i coraz bardziej wychodziłem poza swoją strefę komfortu. Projektowanie systemów, bibliotek, to bardzo mój świat, w którym czuję się bardzo dobrze i komfortowo. Ale wychodzę poza to i robię o wiele więcej logiki po stronie serwera, rozwoju API, modelowania danych i tak dalej. Dużo w tym robiłem przez ostatni rok.

Drew: Uważam, że im więcej rozumiem na temat całego stosu o back-endowych rzeczach we front-endowych rzeczach, każdy z nich pomaga mi poznać drugiego. Uważam, że piszę lepszy kod front-endowy, pisząc kod back-endowy i rozumiejąc-

Mina: Tak. Myślę, że czuję to samo. Teraz, gdy mam lepsze pojęcie o tym, jak powiedzieliśmy, o całym stosie tego, jak dostajemy się od danych do klienta końcowego. Uważam, że myślę o całym potoku, bez względu na to, w której części faktycznie pracuję. Zastanawiam się, jak najlepiej ustrukturyzować ten interfejs API, aby po przejściu do szablonu nie musiałem tak wiele manipulować danymi, które otrzymuję na tym końcu. To zdecydowanie sprawiło, że ogólnie jestem lepszym inżynierem, mam na to ochotę

Drew: If you, dear listener, would like to hear more from Mina, you can follow her on Twitter where she's @MinaMarkham and find her personal site at mina.codes. Thanks for joining us today, Mina. Do you have any parting words?

Mina: Have a smashing night?

Drew: Great.