Sparing Vue Composition API vs. React Hooks

Już 6 listopada odbędzie się pierwsza edycja DevRing, konferencji programistycznej dla front-end developerów. Wydarzenie odbędzie się online, dlatego może w nim uczestniczyć każdy, kto wypełni formularz rejestracyjny dostępny na stronie wydarzenia. Można spodziewać się nie tylko solidnej dawki wiedzy, ale i ciekawej formy jej prezentacji. Konfrontując rozmaite podejścia i technologie w ramach sparingów, otworzy się dla uczestników szeroki wachlarz rozwiązań dla konkretnych wyzwań developerskich. Przeprowadziliśmy wywiad z jednym z uczestników sparingu - Grzegorzem Marzenckim, trenerem i ekspertem JavaScript.

Bulldogjob: Będziesz brać udział w sparingu Vue Composition API <> React Hooks. W którym narożniku stoisz?

Grzegorz: W tym starciu występuję w barwach team-React. Jestem olbrzymim zwolennikiem funkcyjnego podejścia w programowaniu, a wprowadzenie hooków do Reacta to prawdziwy game changer w tym temacie. Sprawiają one, że można w prosty, zgrabny sposób komponować funkcje i pisać programy w sposób deklaratywny. To właśnie na tych zaletach skupię się w czasie konferencji.

Bulldogjob: Dlaczego w ogóle warto o tym dyskutować? Jak bardzo w codziennej pracy przydają się tego typu rozwiązania?

Grzegorz: Podstawową funkcją hooków jest to, że pozwalają na jasne oddzielenie warstwy logiki biznesowej od warstwy logiki aplikacji. Dzięki nim logikę biznesową możemy trzymać poza komponentami i łatwo ją współdzielić, a to zmniejsza stopień skomplikowania kodu, jego długość oraz sprawia, że code-base jest tańszy w utrzymaniu i rozwoju. 

Inne zalety to m.in. ujednolicenie zarówno różnych API wewnątrz Reacta (life-cycle hooks, context API itp.), jak i rodzajów komponentów (każdy komponent niezależnie od tego, czy jest stanowy, czy bezstanowy jest komponentem funkcyjnym). Hooki wymuszają również pewne praktyki, które znakomicie łączą się z podejściem typowo deklaratywnym.

A co daje nam takie podejście? Otóż programy pisane w ten sposób zdecydowanie zyskują na czytelności i skalowalności, ponieważ cały kod opiera się na opisie danych.

Opis przepływu danych i czystych transformacji typu:  

dane’ = dane
  |> transformacja1
  |> transformacja2
 
dane’’ = dane’ 
  |> transformacja3

gdzie wszystkie transformacje są na tym samym poziomie abstrakcji, jest bardzo wygodny. Jasno wynikają z niego zależności między zmiennymi, a kod czytamy z góry na dół.

Zapis programu w sposób następujący:

funkcja(dane)

gdzie w ciele funkcji wywoływane są kolejne funkcje ‘w głąb’, sprawia, że łatwo stracić kontrolę nad kolejnością wywołań. Zamiast czytać kod z góry na dół, wchodzimy coraz głębiej i głębiej w zagnieżdżone funkcje:

funkcja(dane) {
        ...operacje
        funkcja2(dane)
        ...dalsze operacje
}


funkcja2(dane) {
        ....operacje
        funkcja3(dane)
        ...dalsze operacje
        funkcja4(dane)
}

Taki zapis sprawia, że łatwo skończyć z prawdziwym callback hellem. Debugowanie takiego kodu jest bardzo trudne. Zamiast śledzić liniowy przepływ danych, musimy budować w głowie skomplikowane drzewo wywołań.

I tutaj, żeby nie było nieporozumień, hooki same w sobie magicznie nie sprawią, że programiści zaczną pisać kod w czytelny, deklaratywny sposób, ale jest to narzędzie, które może bardzo w tym pomóc. W czasie sparingu pokażę, jak go użyć w tym celu.

Bulldogjob: Czy spotkałeś się z niechęcią programistów do używania React Hooks? Jeżeli tak, to skąd ona może wynikać? Co jest kluczowe dla dobrego zrozumienia i efektywnego stosowania ich w praktyce?

Grzegorz: Wręcz przeciwnie. Hooki mają stosunkowo niski próg wejścia, dzięki czemu większość programistów nie ma większych problemów z nauczeniem się tego, jak działają. Wystarczy napisać funkcję, a potem wywołać ją w komponencie. Proste API sprawia, że ludzie chętnie zaczynają używać hooków nie tylko w nowych, ale także w istniejących projektach. Cieszą się, że dzięki nim kod jest dużo bardziej uporządkowany i przejrzysty w porównaniu do React Classical Components.

Niemniej, aby je dobrze zrozumieć i umieć efektywnie stosować w praktyce, niezbędna jest nauka programowania funkcyjnego. Przydatne może być także zaznajomienie się z koncepcjami programowania reaktywnego i efektów algebraicznych (algebraic effects). Wygląda na to, że twórcy Reacta czerpią wiele pomysłów z istniejących języków funkcyjnych, takich jak F# czy OCaml. Oczywiście nie trzeba się ich uczyć, żeby używać hooków, ale im bardziej poszerzymy wiedzę z najnowszych trendów programowania funkcyjnego, tym sprawniej będziemy ich używać.

Bulldogjob: Wracając trochę do konkurencji z Vue - w tym momencie React jest czołowym rozwiązaniem, jeżeli chodzi o aplikacje front-endowe. Myślisz, że w najbliższych latach jest szansa, że straci na popularności, kosztem swoich konkurentów?

Grzegorz: Uważałbym ze stwierdzeniem, że React jest czołowym rozwiązaniem. Rzeczywiście, jest on zdecydowanie częściej wybieraną technologią w Europie czy USA, niemniej globalnie już niekoniecznie. Wystarczy popatrzeć na ilość gwiazdek na GitHubie - już od dawna Vue udało się prześcignąć Reacta w tym rankingu. 

Zarówno React jak i Vue to bardzo mocni gracze na rynku. Stwierdzenie, że jeden z nich zdominuje rywala to trochę wróżenie z fusów. Pamiętam jak na rynek wchodził AngularJS, który bardzo szybko stał się najjaśniejszą gwiazdą na frontendowym niebie. Miał on tak silną pozycję, że ciężko było sobie wyobrazić, że coś może ją zachwiać. Niemniej po kilku latach, AngularJS stał się melodią przeszłości i można się z nim spotkać tylko w książkach do historii, muzeach czy legacy projektach w większych korporacjach. React i Vue mogą podzielić jego los.

Należy również pamiętać o tym, że sam standard HTML bardzo się rozwinął i oferuje takie możliwości jak WebComponents. To sprawia, że używanie dodatkowych bibliotek do tworzenia architektur opartych o komponenty, nie jest w tym momencie konieczne. Kolejne lata mogą więc koncentrować się na bardzo lekkich, wyspecjalizowanych bibliotekach, które będą tylko cienką warstwą ponad feature’ami dostarczanymi bezpośrednio przez HTML. I nie powiem, taka wizja mi się bardzo podoba.

Pozostałe zagadnienia, które zostaną omówione w ramach sparingu:

• Przyczyny powstania VUE Composition API / React Hooks (kontekst języków funkcyjnych)
• State management system
• Porównanie ze standardem WebComponents
• Skalowalność rozwiązań
• Kontekst biznesowy, wsparcie dla rozwiązań, ewentualne zagrożenia z tym związane 

Zapraszamy serdecznie! Zarejestruj się tutaj.