Software house React
Interfejsy w React i TypeScript, które nie zwalniają, gdy dochodzi kolejny ekran i kolejna tabela — najczęściej połączone z Laravelem przez Inertia.js.
Frontend aplikacji piszemy w React i TypeScript. Budujemy w nim panele dla zespołów, portale dla klientów i interfejsy giełd internetowych — wszędzie tam, gdzie interfejs ma dużo danych, filtrów i stanów, a mimo to musi działać płynnie.
Jak łączymy React z backendem
- Inertia.js z Laravelem — nasz domyślny wybór dla aplikacji webowych. React renderuje interfejs, Laravel obsługuje routing i logikę, a nie trzeba utrzymywać osobnego API tylko dla frontu. Renderowanie po stronie serwera daje szybkie pierwsze wczytanie i poprawne SEO. Tak zbudowana jest też ta strona.
- Osobny frontend i API — gdy ten sam backend obsługuje też aplikację mobilną albo partnerów zewnętrznych. Stan i komunikację z API porządkujemy przez Redux Toolkit i RTK Query albo Zustand.
- Next.js — gdy projekt go wymaga albo już na nim działa. W Next.js pracują m.in. frontendy giełdy IGRiT i marketplace'u nieruchomości w Japonii.
Na czym nam zależy w interfejsie
- Typy z backendu — w projektach na Inertii typy TypeScript generujemy z klas PHP (tak działa m.in. ta strona), więc front i back nie rozjeżdżają się po cichu przy zmianie danych.
- Wydajność przy dużej liczbie danych — tabele, filtry i wyszukiwanie, które nie zwalniają przy tysiącach rekordów.
- Czas rzeczywisty — czaty, powiadomienia i zmiany statusów na żywo (Pusher), jak w CRM Leadbrokers i portalu Fansbay.
- Testy — testy end-to-end w Cypress dla ścieżek, które nie mogą się zepsuć, uruchamiane przy każdym pull requeście.
Co budujemy w React
- Panele i systemy dla zespołów — CRM-y, back-office, narzędzia do obsługi procesów, w których użytkownik spędza cały dzień pracy, więc liczy się szybkość i przewidywalność interfejsu.
- Portale i platformy dla klientów — giełdy, marketplace'y i serwisy z kontem użytkownika, gdzie oprócz wygody liczy się też widoczność w wyszukiwarce.
- Interfejsy do danych — dashboardy, raporty i widoki z filtrami, które zbierają dane z kilku systemów w jednym miejscu.
Jak pracujemy
Zanim powstanie kod, przygotowujemy makiety i prototyp, żeby przepływ dało się sprawdzić z użytkownikami. Potem co kilka tygodni pokazujemy działający fragment. Każda zmiana przechodzi code review drugiego programisty, a testy uruchamiają się przy każdym pull requeście. Po starcie zostajemy przy projekcie: poprawki, aktualizacje zależności i kolejne funkcje.
Realizacje z Reactem
React pracuje w interfejsach giełdy rolnej IGRiT, serwisu KupujeNaWsi, portalu Fansbay i systemu MotoBaseLinker. Gdy obok interfejsu webowego potrzebna jest aplikacja mobilna, ten sam zespół pisze ją w React Native.
Najczęściej zadawane pytania
Czym jest Inertia.js i po co jej używacie?
Inertia łączy routing i kontrolery Laravela z komponentami Reacta. Aplikacja działa jak SPA, ale nie trzeba budować i utrzymywać osobnego REST API tylko dla własnego frontu, co skraca czas i koszt rozwoju.
Czy strona w React będzie dobrze widoczna w Google?
Tak, jeśli ma renderowanie po stronie serwera. W Inertii i Next.js serwer wysyła gotowy HTML z treścią i meta tagami, więc wyszukiwarka nie musi czekać na JavaScript.
Możecie rozwijać istniejący frontend w React?
Tak. Zaczynamy od przeglądu kodu i zależności, a potem przejmujemy rozwój albo dołączamy programistów React do Twojego zespołu.
Czy do panelu administracyjnego też używacie Reacta?
Zależy od tego, kto z panelu korzysta. Wewnętrzny back-office dla kilku osób szybciej i taniej budujemy w Filament, gotowym narzędziu do paneli w Laravelu. Gdy panel jest częścią produktu i korzystają z niego klienci, piszemy go w React, żeby miał własny wygląd i dopasowany przepływ pracy.
Jak dbacie o to, żeby interfejs nie zwalniał z czasem?
Dzielimy kod na części ładowane dopiero wtedy, gdy są potrzebne, stronicujemy i filtrujemy dane po stronie serwera zamiast w przeglądarce i pilnujemy rozmiaru paczek przy każdym wdrożeniu. Problemy z wydajnością łatwiej zatrzymać na etapie code review niż naprawiać po roku.