Kiedy polecamy React i Node.js, a kiedy wystarczy Livewire
Najczęściej łączymy interfejs w React z backendem w Laravelu. Node.js po stronie serwera wybieramy w konkretnych sytuacjach, opisanych niżej.
Polecamy React, gdy:
- interfejs działa jak aplikacja: przeciąganie elementów, edycja w tabelach, filtrowanie bez przeładowań strony,
- panel korzysta z tego samego API co aplikacja mobilna i ma pokazywać te same dane na żywo,
- produkt będzie latami rozwijany przez osobny zespół frontendowy,
- publiczna część produktu ma się szybko ładować i być dobrze widoczna w Google.
Polecamy Node.js po stronie serwera, gdy:
- system opiera się na zdarzeniach w czasie rzeczywistym: czat, powiadomienia na żywo, śledzenie pojazdów,
- Twój zespół pracuje w TypeScripcie i przejmie utrzymanie po wdrożeniu,
- budujemy integracje i automatyzacje reagujące na zmiany w innych systemach.
Odradzamy, gdy:
- panel ma głównie listy, formularze i raporty - Livewire da ten sam efekt taniej, w jednym projekcie zamiast dwóch,
- budżet jest mały, a osobny frontend i backend podniosą koszt,
- nie masz planu na aktualizacje zależności JavaScript, które starzeją się szybciej niż w PHP.
React, Vue czy Livewire - porównanie dla interfejsu webowego
Trzy sposoby na interfejs aplikacji webowej. W nowych projektach decyzja zapada zwykle między React a Livewire.
| Kryterium | React | Vue | Laravel Livewire |
|---|---|---|---|
| Gdzie działa logika interfejsu | w przeglądarce (TypeScript) | w przeglądarce (TypeScript) | na serwerze (PHP), przeglądarka dostaje gotowy HTML |
| Osobny projekt frontendu | tak | tak | nie - ten sam kod co backend |
| Najlepszy do | rozbudowanych aplikacji z dużą liczbą interakcji | średnich aplikacji i rozwoju istniejących projektów | paneli administracyjnych i systemów wewnętrznych |
| Koszt budowy panelu | najwyższy z trzech | średni | najniższy z trzech |
| Nasze realizacje | panele: Gmina Jarocin, Clean App, APH | panel VG Lock | Ratuj Jedzenie, aplikacja dla kierowców |
Zakres, etapy i ceny aplikacji webowych opisujemy na stronie aplikacje webowe na zamówienie. Jak zaplanować budżet takiego projektu, wyjaśniamy w artykule budżetowanie projektu dedykowanego systemu IT.
Jak pracujemy w React i Node.js
Wersje
Piszemy w TypeScripcie, a nie w czystym JavaScripcie - błędy typów wychodzą przy kompilacji, a nie u użytkownika. Node.js uruchamiamy wyłącznie w wersjach LTS, a zależności aktualizujemy planowo, z automatycznym powiadomieniem o zgłoszonych lukach bezpieczeństwa.
Architektura
Interfejs budujemy z komponentów jednego systemu projektowego, dane z API pobieramy przez warstwę z pamięcią podręczną, a stan globalny ograniczamy do minimum. Gdy liczy się widoczność w Google, stosujemy Next.js z renderowaniem po stronie serwera. Backend w Node.js piszemy w NestJS albo Express, z walidacją danych w każdym punkcie API.
CI/CD i wdrożenia
Każda zmiana uruchamia lint, testy i budowę wersji produkcyjnej. Nowe funkcje sprawdzasz na środowisku testowym, zanim trafią na produkcję, a wdrożenia są automatyczne.
Testy
Komponenty testujemy jednostkowo, a najważniejsze ścieżki - logowanie, zamówienie, płatność - testami end-to-end w przeglądarce. Przed odbiorem sprawdzamy dostępność: obsługę klawiaturą, kontrast i współpracę z czytnikami ekranu.
Realizacje z interfejsem webowym w React
Projekty, w których część webowa powstała w React, a backend w Laravelu.
Gmina Jarocin: serwis jarocin.pl zbudowany z mikroserwisów i powiązana z nim aplikacja mobilna, z płatnościami Przelewy24 dzielonymi między partnerów. Clean App: marketplace łączący klientów z firmami sprzątającymi, z rezerwacją, płatnościami i lokalizacją GPS. APH: platforma B2B dla branży kosmetycznej ze skanerem kodów kreskowych i 2D.
Dlaczego możesz nam zlecić aplikację webową
Od 2010 roku na rynku, ponad 300 zrealizowanych projektów
Panele w React dla gminy, marketplace’ów i platform B2B
Backend w Laravelu albo Node.js - dobrany do projektu i zespołu, który go utrzyma
Kod i prawa autorskie przechodzą na Ciebie po zapłacie ostatniej faktury
Najczęściej zadawane pytania o React i Node.js
Zaktualizowano: