Gdyby nie społeczność, React nie byłby tak popularny. Grzegorz Graczyk o pracy ReactJS Developera

Co sprawia, że dana technologia wypiera inną, z której firma korzystała przez lata? – Na pewno pomaga, gdy za daną technologią stoi korporacja, daje to poczucie bezpieczeństwa, jest większa szansa, że biblioteka będzie dłużej wspierana. Drugą ważną rzeczą są developerzy – jeśli oni zaciekawią się technologią to ma ona szanse wyprzeć inne w swojej dziedzinie – mówi w rozmowie z nami Grzegorz Graczyk, CTO w PQ Studio.

Z Grzegorzem Graczykiem rozmawiamy nie tylko o pracy developera pracującego z biblioteką ReactJS, ale też o samej pracy w software housie. Zapytaliśmy go m.in. o to, co sprawia, że programista rozwija się w firmie, co hamuje jego rozwój oraz z jakimi problemami mierzy się każdego dnia.

Czym jest ReactJS? Na czym polega praca na stanowisku ReactJS Developera?

ReactJS to biblioteka napisana w języku JavaScript do budowania interfejsów użytkownika. Najczęściej buduje się w nim tzw. SPA (Single Page App). Nazwa “ReactJS Developer” może być trochę myląca, ponieważ programista pracujący z tą technologią musi znać o wiele więcej niż tylko jedną bibliotekę. Wokół React’a utworzył się cały ekosystem bibliotek i narzędzi, które są często niezbędne, aby móc zbudować całą aplikację od początku do końca. Zawierają się w tym takie rzeczy jak routing, obsługa stanu aplikacji, komunikacja z serwerem i w końcu graficzna budowa interfejsu użytkownika.

Jakie zalety i jakie wady ma ReactJS?

Myślę, że jedną z większych zalet React’a jest to, że stoi za nim Facebook. W kontekście szybkiego rozwoju JS-a i powstawania co chwilę nowych frameworków jest to jeszcze bardziej ważne. Stawiając na React’a mamy pewność, że nie zniknie on szybko, bo wiele firm dużo w niego zainwestowało tworząc aplikacje korzystając z tej technologii. Także bogaty ekosystem i rozwinięte, aktywne community wokół React’a zaliczyłbym do jego większych zalet.

Jeśli chodzi o wady, zdecydowanie będzie to szybki rozwój całego ekosystemu. Żeby być na bieżąco, trzeba nieustannie śledzić trendy i kierunek, w którym JavaScript podąża

Biblioteki często wypuszczają nowe wersje. Kilka miesięcy w świecie JavaScript to bardzo długo. Żeby nie zostać w tyle trzeba poświęcić trochę swojego czasu, aby doszkalać się w tym zakresie.

W jaki sposób Ty się doszkalasz i jesteś na bieżąco z nowościami w Reactcie?

Istnieje kilka takich miejsc w internecie, a pierwszym jest twitter – warto śledzić osoby, które mają wpływ na to co się dzieje w ekosystemie. Będą to na pewno core developerzy Reacta, ale też twórcy znanych bibliotek (ja śledzę m.in. @sophiebits, @mjackson, @ryanflorence, @sebmarkbage, @acdlite, @brian_d_vaughn, @mxstbr, @jlongster, @Vjeux, @JedWatson, @dan_abramov).

Jest to dla mnie główne źródło wiedzy. Oczywiście wiele nie można przekazać w ograniczonej długości tweeta, jednak jest to miejsce, z którego dowiemy się, gdy ktoś napisał nowego posta na swoim blogu, stworzył nową bibliotekę, którą moglibyśmy wykorzystać. Z takich postów możemy też dowiedzieć się z pierwszej ręki w jakim kierunku w przyszłości będzie zmierzał sam React.

Drugim takim miejscem, które często odwiedzam jest Hacker News. Publikowane newsy dotyczą wielu technologii, dzięki czemu możemy zobaczyć co się dzieje w świecie bardziej ogólnie.

Ile czasu po pracy poświęcasz na naukę, rozwijanie się?

Bardzo różnie, jeśli uczę się jakiejś nowej biblioteki czy konceptu to na pewno dłużej, ale zazwyczaj staram się być po prostu na bieżąco z nowościami. Zajmuje to nie więcej niż godzinę dziennie.

W jaki sposób pomogła Ci społeczność skupiona wokół Reacta? Na forach szukasz rozwiązań problemów, z którymi się mierzysz? Możesz podać jakiś przykład?

Działalność społeczności jest widoczna na każdym kroku.

Gdyby nie społeczność – React nie byłby taki popularny

Pierwszym miejscem gdzie powinniśmy szukać rozwiązania problemu jest oczywiście Google – w zależności od problemu rozwiązania znajdziemy głównie jako posty na blogach, na StackOverflow albo w postaci repozytoriów na GitHubie.

Z jakimi problemami/wyzwaniami mierzysz się każdego dnia?

Jest to bardzo zależne od projektu, nad którym aktualnie pracuję. Są bardziej standardowe, gdzie do wszystkich problemów są znane dobre i sprawdzone rozwiązania, ale są też takie, gdzie trzeba opracować własne rozwiązanie. I takie projekty też są najciekawsze, bo można przy okazji nauczyć się nowych rzeczy i jeszcze bardziej rozwinąć się jako programista.

Jakie są te najczęstsze, standardowe problemy, na które napotka developer pracujący w software housie nad projektami komercyjnymi?

Zazwyczaj jak ktoś już pracuje w software house’ie to raczej nie ma problemów wynikających z jego umiejętności w danej technologii. Miejsce gdzie mogą się pojawić problemy to takie głębsze zrozumienie potrzeb klienta, poznanie odpowiedzi na pytania “po co tak naprawdę klient potrzebuje tej aplikacji?”, “jaki problem ma ona rozwiązywać?”. Często wiąże się to ze znajomością branży, w której działa klient.

Możesz powiedzieć więcej o jednym z takich autorskich rozwiązań problemów?

Piszemy aktualnie aplikację (SaaS), która będzie umieszczać widget na stronie użytkownika. Ciężko znaleźć cokolwiek w internecie nt. dobrych praktyk odnośnie widgetów ani też o samym sposobie implementacji. Można podejrzeć konkurencję – co też zrobiliśmy, jednak rozwiązania zastosowane przez innych nie były dla nas wystarczające. Pojawiły się tutaj dwa problemy.

Pierwszym było zapobiegnięcie temu, aby stylowanie strony wpływało na wygląd widgeta. Rozwiązaniem konkurencji najczęściej były iframe’y, które ze względu na specyfikę naszego produktu nie wchodziły w grę. Drugim problemem była wielkość samej paczki – dajemy użytkownikom możliwość wyboru wielu widgetów na pojedynczej stronie, z setek opcji.

Nie chcieliśmy umieszczać ich wszystkich w jednej paczce, żeby nie zwiększać drastycznie jej wielkości – zwłaszcza biorąc pod uwagę fakt, że zdecydowana większość z nich nie byłaby używana. Opracowaliśmy więc system, który dzieli odpowiednio paczkę na mniejsze części, które są na żądanie dociągane do klienta. Takie autorskie rozwiązania na pewno są bardziej czasochłonne i trudniejsze od zwykłego kodowania aplikacji, jednak są to też rozwiązania najciekawsze dla developera.

Więcej grafik projektu FormEngage na profilu Behance

Jakie projekty pozwalają rozwinąć się programisty?

Programista może rozwijać się w wielu dziedzinach – pod kątem nowych technologii, rozwiązań stosowanych w aplikacjach, przez wiedzę branżową aż po umiejętności miękkie.

Dobrze jest zatem, gdy projekt wprowadza niewielką ilość nowości w jednej lub kilku z tych dziedzin, aby trochę wypchnąć programistę ze strefy komfortu, przez co rozwinie się on w danym kierunku

Co zdecydowanie hamuje jego rozwój?

Gdy programista robi cały czas to samo na pewno się nie rozwinie. Sam z siebie programista musi chcieć się rozwijać, ale też ważna jest kultura w firmie – jeśli nie jest nastawiona na ciągły rozwój pracowników, to na pewno będzie hamować ich rozwój.

Oferty pracy z

Czego większość programistów nie wie na temat pracy ReactJS Developera?

Nie wiem czy większość programistów o tym nie wie, ale taką najbardziej przydatną ciekawostką jest to, że znając React’a można w łatwy sposób zacząć pisać aplikacje mobilne, dzięki React Native. Nie jest to może transfer umiejętności jeden do jednego, bo każda platforma (Android, iOS) ma swoje ograniczenia i pewne rzeczy robi się inaczej, jednak wybierając odpowiednie biblioteki można niejednokrotnie korzystać z tej samej logiki biznesowej, komponentów czy nawet stylowania co w aplikacji webowej.

Programiści poświęcają prywatny czas na to, żeby być na bieżąco. To chyba jedna z tych rzeczy, o których nie wiedzą ludzie spoza branży IT podniecający się, że programiści zarabiają po 5, 10, 15 a nawet 20 i 30 tys. złotych netto. Oprócz ciągłego dokształcania się, co jeszcze jest ważne w życiu programisty?

Zdecydowanie umiejętności zachowania odpowiedniego balansu między pracą, a życiem prywatnym. Jest to ciężkie, bo projekty potrafią być absorbujące, a ekosystem tak szybko się zmienia, więc żeby być na bieżąco trzeba się doszkalać nierzadko poza godzinami pracy. Trzeba na to zwracać dużą uwagę, bo wypalić jest się łatwo.

Jak wyglądał Twój pierwszy kontakt z ReactJS? Dlaczego nauczyłeś się tej biblioteki?

Pierwszy kontakt z ReactJS miałem ok. 3 lata temu. W firmie pisaliśmy wtedy aplikacje głównie w AngularJS, ale React zaczął nabierać trakcji i w zasadzie nie dało się go dłużej ignorować. Podjęliśmy decyzję, że spróbujemy z czym to się je. Akurat mieliśmy zaczynać development wewnętrznej appki firmowej, więc okazja była idealna. Co prawda ekosystem nie był tak rozwinięty jak teraz, ale już wtedy odczuliśmy duży wzrost wydajności przy implementacji interfejsu.

Postanowiliśmy całkowicie przenieść się z AngularJS na ReactJS

Najpierw zaczęliśmy robić mniejsze projekty dla klientów z czasem przechodząc na coraz większe, aż w końcu cały nasz dział front-end pracuje w ReactJS.

Jakie podobieństwa a jakie różnice są między Angularem a Reactem?

Obie biblioteki służą do tego samego – implementowania interfejsów użytkownika. Długo by wymieniać wszystkie różnice, jednak takimi najbardziej rzucającymi się w oczy myślę, że jest to, że Angular jest napisany w TypeScripcie, a React w JavaScripcie. Angular jest też bardziej frameworkiem, np. jak potrzebujemy router – mamy go w Angularze, wystarczy zaimportować odpowiedni komponent. React sam w sobie jest można powiedzieć warstwą widoku. Jeśli chcemy mieć router – musimy skorzystać z zewnętrznego rozwiązania (których jest niemało) lub napisać własne. Oba podejścia mają swoje wady i zalety.

Co sprawia, że dana technologia/język wypiera inną, z której firma korzystała przez lata?

Ciężko jednoznacznie stwierdzić. Na pewno pomaga, gdy za daną technologią stoi korporacja, daje to poczucie bezpieczeństwa, jest większa szansa, że biblioteka będzie dłużej wspierana. Drugą ważną rzeczą są developerzy – jeśli oni zaciekawią się technologią to ma ona szanse wyprzeć inne w swojej dziedzinie. Dzieje się tak zazwyczaj wtedy, gdy nowa biblioteka/technologia umożliwia wykonywanie dotychczasowych zadań łatwiej i szybciej niż poprzednia, pozwala na rzeczy dotychczas niemożliwe (jak np. React Native) i jest bardziej przyjazna dla developerów.

Teraz w webdevelopmencie rządzi JavaScript, ale już na horyzoncie pojawiają się takie języki jak ReasonML od Facebook’a czy Elm. Kto wie, może w przyszłości któryś z nich będzie królował

Jakie narzędzia ułatwiają pracę ReactJS Developera?

Myślę, że jest to mocno subiektywne pytanie. Każdy developer ma swoje ulubione narzędzia, z których lubi korzystać. Jeśli chodzi o samego JS-a niewątpliwie bardzo przydaje się prettier – jest to narzędzie, które pozwala sformatować kod pliku według wcześniej ustalonych reguł. Dzięki temu możemy przestać myśleć o ręcznym formatowaniu kodu, jeszcze bardziej zwiększając swoją wydajność.

Natomiast dla samego React’a najbardziej przydatnym narzędziem będzie wtyczka do przeglądarki React Developer Tools, pomagająca m. in. przeprowadzać inspekcję drzewa komponentów Reacta. Przydatna jest też kolejna wtyczka – Redux Devtools, która pozwala badać aktualny stan aplikacji w projektach wykorzystujących redux’a do zarządzania stanem.

Jak zachęciłbyś innych do zainteresowania się React’em?

Jeśli ktoś szuka pracy we frontendzie to myślę, że React’a nie trzeba mu przedstawiać. Jest to bardzo przyjazna biblioteka dla developerów, z wieloma przykładami i tutorialami w sieci. Ciężko natrafić na problem, który już nie został przez kogoś rozwiązany. Sama biblioteka jak i ekosystem wokół niej stale rozwija się w coraz szybszym tempie, dzięki czemu pracy w tej technologii nie brakuje. Wiąże się to z możliwością pracy przy ciekawych projektach za naprawdę konkurencyjne stawki w porównaniu do innych języków czy bibliotek.

---

Grzegorz Graczyk. Co-founder & CTO w PQ Studio. Od 12 lat zajmuje się programowaniem. Fullstack developer, specjalizujący się głównie w technologiach golang i ReactJS. Od 5 lat odpowiada za rozwój technologiczny PQ studio.