React.js to szybka, stabilna i wszechstronna biblioteka javascriptowa. Pozwala na tworzenie świetnych rozwiązań stosunkowo niskim kosztem czasowym (i finansowym). Niedawno pisaliśmy o jej zaletach i zastosowaniach. Tym razem chcielibyśmy pochwalić się projektami, które udało nam się zrealizować w React.js.

React.js to jedno z najlepszych narzędzi do tworzenia interfejsów użytkownika (UI). Jest biblioteką języka JavaScript, choć bywa również nazywany frameworkiem – ze względu na dużą liczbę gotowych rozwiązań, dostępnych dla Reacta w zewnętrznych bibliotekach.

React.js służy do projektowania aplikacji webowych (jego „bliźniacza” wersja przeznaczona dla kanału mobile to React Native), w szczególności jej elementów interaktywnych. Choć sam w sobie jest prosty, pozwala na tworzenie dowolnie skomplikowanych konstrukcji o rozmaitym przeznaczeniu biznesowym.

Do głównych zalet React.js należą:

• niewielkie rozmiary,
• szybkość działania,
• stabilność,
• wykorzystanie reużywalnych komponentów,
• zastosowanie przy tworzeniu aplikacji SPA,
• łatwość kodowania,
• a także duża społeczność wspierająca jego rozwój,

Więcej na temat plusów i – niejednoznacznych – minusów React.js pisaliśmy w jednym z poprzednich tekstów. Jeśli jeszcze go nie czytaliście, zapraszamy do lektury: „Szybki, elastyczny i wszechstronny. Dlaczego React.js to technologia korzystna dla biznesu?”.

Tym razem chcielibyśmy opisać zastosowanie Reacta w praktyce i pochwalić się kilkoma projektami, które udało nam się zrealizować za pomocą tej biblioteki.

No to zaczynamy!

PayPo

Produkt

Dla marki PayPo stworzyliśmy elementy frontendu zintegrowane z systemem odroczonych płatności. Aplikacja umożliwia nabycie produktu w sklepie internetowym bez płacenia za niego w momencie zakupu. Klient otrzymuje towar od razu, a na uiszczenie należności ma 30 dni.

Wyzwanie

Działanie aplikacji opiera się na formularzach, w których użytkownik zamieszcza dane. Formularze nie są jednak gotowcami – trzeba je napisać. Bez wykorzystania odpowiednich narzędzi proces ten byłby żmudną, długotrwałą „klepaniną”.

Rozwiązanie

W realizacji tego zadania bezkonkurencyjny okazał się React wraz z jego zewnętrznymi bibliotekami. Dzięki zastosowaniu Formika udało nam się stworzyć formularze w błyskawicznym tempie. Z kolei Yup był bardzo pomocny w uproszczeniu zasad walidacji.

Co dało nam zastosowanie Reacta?

React przyspieszył i usprawnił cały proces. Umożliwił stworzenie Single Page Application, czyli strony, której stan zmienia się bez konieczności jej przeładowania, i pomógł zapewnić wysokiej jakości UX. React po raz kolejny „udowodnił”, że jest rozwiązaniem stworzonym do tego typu projektów.

Parlor Social Club

Produkt

Na zamówienie klienta „napisaliśmy” platformę społecznościową, pozwalająca użytkownikom uczestniczyć w ekskluzywnych wydarzeniach kulturalnych i rozbudowywać siatkę kontaktów.

Wyzwanie

Naszym celem było stworzenie strony www, przez którą użytkownik zapisuje się do klubu oraz aplikacji natywnej na iOS i Androida. Zależało nam na sprawnym procesie rejestracji.

Rozwiązanie

React.js składa się z reużywalnych komponentów, które zapewniają gotowe rozwiązania dla wielu problemów i umożliwiają projektowanie funkcji w „przyspieszonym” tempie. Ponadto dzięki rozwiązaniom dostępnym w zewnętrznych bibliotekach Reacta, takim jak Redux, można w prosty sposób tworzyć sesje użytkownika i wyświetlać odpowiednie ekrany na podstawie wprowadzonych danych.

Co dało nam zastosowanie Reacta?

React umożliwił nam zapewnienie wysokiej jakości user experience. Z punktu widzenia użytkownika strona działa w sposób płynny – jej zawartość się zmienia, ale zmiana nie jest zakłócona przez przeładowywanie się strony (Single Page Application).

PLM

Produkt

Dla producenta ubrań Haddad Brands stworzyliśmy frontend integrujący system PLM (Product Lifecycle Management), przeznaczony do zarządzania cyklem życia produktu na każdym etapie: od wstępnej koncepcji, przez specyfikację techniczną i kreację, aż po tworzenie wytycznych dla fabryk. Rozwiązanie pobiera dane z wielu różnych źródeł i przedstawia je w przejrzystej formie.

Wyzwanie

PLM nie jest prostą aplikacją. Obsługuje wiele procesów i pobiera dane z różnych źródeł, a zatem musi mieć bardzo rozbudowany backend. Priorytetem w tym projekcie było umożliwienie prezentacji tych danych z jak najmniejszym opóźnieniem.

Rozwiązanie

React umożliwił nam znaczącą optymalizację kodu pod względem jego długości. Dzięki wykorzystaniu tej biblioteki mogliśmy napisać znacznie mniej linii kodu niż w sytuacji, gdybyśmy pisali go w czystym JS. Reacta zastosowaliśmy w połączeniu z Reduxem, który umożliwił nam stworzenie rozwiązania pozwalającego na przechowywanie bardzo złożonego stanu aplikacji, oraz z biblioteką React Router, dzięki której przechodzenie między podstronami nie powoduje odświeżenia strony (Single Page Application). Dla wygody użytkownika wprowadziliśmy funkcję drag'n'drop, a dzięki bibliotece React DnD mogliśmy ją sprawnie zaimplementować we wszystkich miejscach występowania.

Co dało nam zastosowanie Reacta?

React.js pozwolił nam na zaoszczędzenie czasu przeznaczonego na kodowanie, a przede wszystkim na stworzenie rozwiązania „lekkiego” i wygodnego w obsłudze. Ponadto mogliśmy w łatwy sposób uzyskać ciekawe efekty UX.

Farmlifes

Produkt

Dla firmy z branży agro stworzyliśmy serwis społecznościowy przeznaczony dla rolników. Aplikacja pozwala na nawiązywanie kontaktów między „farmerami”, np. z sąsiedztwa, zamieszczanie zdjęć lub nagrań wideo, a także publikację ogłoszeń i ofert sprzedaży.

Wyzwanie

Klient potrzebował systemu, w którym zalogowani użytkownicy mogliby dzielić się treściami w formie wpisów, zdjęć, filmów czy ogłoszeń. System wymagał więc stworzenia odpowiednich narzędzi do interakcji.

Rozwiązanie

Dzięki komponentom i bibliotekom React.js sprawnie i szybko stworzyliśmy aplikację zgodną z oczekiwaniami klienta. W pracy wykorzystaliśmy m.in. takie narzędzia, jak Formik (do kreacji formularzy), Yup (do walidacji formularzy), React Redux (do przechowywania stanu aplikacji), Redux Thunk (do zarządzania zapytaniami asynchronicznymi), Blueimp Load Image (do łatwiejszego zarządzania wgrywanymi obrazkami). Zastosowaliśmy także websockety do szybkiego przepływu danych między serwerem a przeglądarką.

Co dało nam zastosowanie Reacta?

Dzięki React.js udało nam się stworzyć szybką aplikację o przejrzystym kodzie, pozwalającą na łatwe aktualizacje i modyfikacje.

React.js to narzędzie, bez którego nie wyobrażamy sobie pracy. Jest niezastąpione w projektowaniu wszelkich interaktywnych elementów aplikacji o przeznaczeniu webowym. Z czystym sumieniem polecamy je wszystkim firmom zainteresowanym tworzeniem tego typu rozwiązań – w przypadku naszych przedsięwzięć sprawdził się na medal.

Jeśli szukasz partnera z dużym doświadczeniem w tworzeniu interaktywnych aplikacji webowych, który potrafi realizować tego typu projekty sprawnie, szybko i oszczędnie – porozmawiajmy!