Nowy projekt - decyzje architektoniczne

Problem do rozwiązania

Mój znajomy poprosił mnie o stworzenie dość prostej aplikacji, która pozwoli pracownikom jego firmy zapisywać się na zlecenia dodane przez przełożonego na podstawie ich dostępności. Aplikacja ma być używana głównie na urządzeniach mobilnych.

Po zebraniu niezbędnych informacji na temat logiki biznesowej, nadszedł czas na wybór stacku technologicznego.

Kluczowe cechy architektury

Na podstawie wymagań zdefiniowałem kluczowe charakterystyki jako:

• użyteczność
• prostota
• samowystarczalność
• rozszerzalność

Frontend

Jeśli chodzi o frontend, zdecydowałem się na Angular, ponieważ jest to framework, z którym mam największe doświadczenie.

Wsparcie mobilne

Ze względu na prostotę, chcę początkowo zapewnić wsparcie dla urządzeń mobilnych poprzez PWA - Angular zapewnia dobre wsparcie. Jeśli projekt będzie się rozwijał, lepsze wsparcie mobilne może być zapewnione w przyszłości poprzez Capacitor.

Pozwoli to ominąć problematyczny proces umieszczania aplikacji w Google Play i App Store.

Backend

Tutaj ponownie chciałem skupić się na prostocie, ale także zapewnić rozszerzalność/skalowalność.

Oto krótkie zestawienie opcji, które rozważałem:

Opcja 1: Kompleksowa aplikacja webowa backend + frontend - Angular + NestJS

✅ Całkowita kontrola, skalowalność, czysta architektura.
✅ Gotowość do rozwoju na poziomie SaaS.
❌ Większa złożoność - utrzymanie backendu, CORS, wdrożenia.

To kompleksowe rozwiązanie, które gwarantuje skalowalność ale najprawdopodobniej to trochę zbyt wiele dla tak prostej aplikacji.

Opcja 2: Pełny Angular z Analog.js

✅ Zunifikowany frontend i backend, wbudowane SSR i API.
❌ Projekt wciąż dojrzewa i się rozwija, jeszcze nie sprawdzony w produkcji.

Ciekawa alternatywa jednak nie posiadam doświadczenia w pracy z Analog.js, co stwarza ryzyko pewnego progu wejścia i w efekcie opóźnienia realizacji projektu.

Opcja 3: Angular + Supabase

✅ Brak konieczności pisania backendu - Supabase zapewnia bazę danych, REST API i Auth.
✅ Rozwiązanie serverless, skalowalność i płynna integracja z Angular.
✅ Aktualizacje w czasie rzeczywistym + edge functions.
❌ Mniejsze możliwości dostosowania backendu, choć można je później rozszerzyć.

W tym przypadku cały backend jest dostarczany przez Supabase. Oczywistą wadą tego rozwiązania jest potencjalny vendor lock-in, ale baza danych Supabase jest oparta na Postgres, więc jedynym potencjalnym problemem byłoby pisanie auth i CRUD. Dodatkową zaletą jest fakt, że mam doświadczenie z Supabase pracując nad GymCraft.

Bonus: Wsparcie PWA

Angular ma świetne wsparcie dla Progressive Web App - użytkownicy mogą zainstalować aplikację na swoich telefonach lub komputerach stacjonarnych, używać jej offline i otrzymywać powiadomienia push.
Nie ma potrzeby tworzenia oddzielnej wersji mobilnej.

Co wybrałem?

Jak można się domyślić, wybrałem tę drugą opcję, która wydaje się być idealną równowagą między prostotą a skalowalnością. Wydaje się, że ten stos pozwala mi szybko budować, szybko modyfikować i skalować, gdy będzie taka potrzeba.

Bądź ze mną w kontakcie na LinkedIn, jeśli interesuje Cię świat aplikacji webowych 😉