TypeScript, React i Node: co w nim budujemy i dlaczego
TypeScript to nasz domyślny język do wszystkiego, co widać w przeglądarce: stron, paneli klienta, sklepów i aplikacji webowych, a Node i Next.js do ich zaplecza.
TypeScript, React i Node na prawdziwych zrzutach
Projekty z tej strony na ekranach z portfolio i case studies, każdy z krótkim opisem i drogą do pełnego.
WaveHost: strona i panel
Strona z panelem admina i panel klienta z API w Next.js.
Kiedy TypeScript, React i Node, a kiedy coś innego
Technologia ma pasować do miejsca, w którym kod będzie działał, i do zespołu, który go przejmie. Ostateczny wybór zapada przy wycenie, razem z Tobą.
Wybieramy TypeScript, React i Node
Strony firmowe z prerenderem
Ta strona generuje gotowy HTML każdej podstrony przy budowaniu. Wyszukiwarka dostaje treść bez uruchamiania skryptów, a po załadowaniu działa szybki interfejs w React.
Panel klienta do zainstalowania
Panel klienta VulCode instaluje się na telefonie jako aplikacja webowa, z manifestem i service workerem. Ten sam kod i to samo API obsługują komputer i telefon, bez osobnej aplikacji mobilnej.
Systemy wewnętrzne z uprawnieniami
Panel sztabowy obsługuje klientów dwóch marek z jednego miejsca, a pracownik widzi tylko swoją markę. Granica jest sprawdzana w API, a każda wrażliwa zmiana trafia do dziennika audytu.
Panel nad rdzeniem w innym języku
Panel Flaem w React obsługuje ekrany klienta, resellera i operatora nad API w Ruście. Interfejs rozwija się szybko, a logika z pieniędzmi zostaje w rdzeniu.
Zaplecze z kolejkami zadań
W WaveHost zamówienie trafia z API w Next.js do kolejki BullMQ, a osobny proces zakłada maszynę w Proxmoxie albo serwer gry w Pterodactylu. Panel odpowiada od razu, a długa praca nikogo nie blokuje.
Komunikator w przeglądarce
Aplikacja webowa Plazera ma interfejs w TypeScripcie, a szyfrowanie wywołuje z rdzenia w Ruście skompilowanego do WebAssembly. Interfejs zmienia się swobodnie, a kryptografia jest tym samym kodem co w aplikacjach natywnych.
Tak piszemy w usługach
Wybieramy coś innego
Agent na maszynie klienta
Agent VPS Flaem jest w Go: to jeden plik binarny, który nie wymaga instalowania Node ani pilnowania jego wersji na cudzym serwerze.
Rdzeń z rozliczeniami na lata
Typy TypeScriptu znikają po kompilacji, więc dane z sieci trzeba sprawdzać osobną walidacją. Rdzeń Flaem z rozliczeniami i KSeF jest w Ruście, gdzie odczyt danych od razu sprawdza ich kształt.
Obliczenia na wszystkich rdzeniach
Node wykonuje JavaScript w jednej pętli zdarzeń, więc ciężkie liczenie wstrzymuje odpowiedzi dla wszystkich. Taką pracę wydzielamy do usługi w Ruście albo w Go.
Widżety i praca w tle na telefonie
Widżety na ekranie głównym i pełne powiadomienia systemowe ma tylko aplikacja natywna. Flaem i Plazer mają na telefony aplikacje w Kotlinie i Swifcie.
Program desktopowy bez przeglądarki
Aplikacja desktopowa Flaem jest w C# z Avalonią, która rysuje kontrolki sama, bez silnika przeglądarki. Program otwarty cały dzień startuje szybko i zostawia pamięć innym aplikacjom.
Usługa, która sama podnosi się po awarii
W Node nieobsłużony wyjątek kończy cały proces razem ze wszystkimi połączeniami. Router na węzłach Flaem jest w Elixirze, bo nadzorca OTP restartuje tylko tę część, która padła.
TypeScript, React i Node w porównaniu, punkt po punkcie
Każda potrzeba w jednym wierszu, a obok siebie to, co w tej sprawie daje każda z dwóch kolumn.
ProjektJak budujemyDlaczego
Strona firmowa
React z prerenderem
Treść w pierwszym HTML, szybki interfejs
Panel klienta
React i API w Node
Jeden język po obu stronach
Aplikacja na telefon i www
Aplikacja webowa z instalacją
Jeden kod zamiast trzech
Panel nad rdzeniem platformy
React nad API w Ruście
Interfejs zmienia się szybko, rozliczenia zostają w rdzeniu
Zamówienia i zadania w tle
API w Next.js i kolejki BullMQ
Długa praca nie wstrzymuje odpowiedzi panelu
Komunikator w przeglądarce
Interfejs w TypeScripcie, szyfrowanie w WebAssembly
Kryptografia z tego samego kodu co w aplikacjach
Logowanie i konta
Better-auth z 2FA i kluczami dostępu
Sprawdzona biblioteka zamiast własnego systemu haseł
TypeScript w całym naszym kodzie
Ile linii napisaliśmy w TypeScript i JavaScript i jaką część wszystkiego, co napisaliśmy, to stanowi. Liczymy linie dodane w commitach naszych repozytoriów, osobno dla każdego języka.
Biblioteki, na których stoją te projekty
Z plików zależności naszych repozytoriów. Przy każdej jedno zdanie o tym, do czego jej używamy.
React 19 i Vite
Interfejsy stron i paneli.
Next.js 15
API panelu WaveHost bez warstwy interfejsu.
Prisma
Baza danych w panelach klienta.
better-auth
Logowanie z 2FA i kluczami dostępu.
BullMQ
Kolejki zadań w tle.
Tailwind CSS i motion
Style i ruch interfejsu.
Nasze zmiany w cudzych projektach w TypeScript
27 przyjętych zmian w 5 repozytoriach. Opiekunowie tych projektów przejrzeli nasz kod i włączyli go do swojego.
Tydzień po tygodniu
- TypeScript
- JavaScript
Udział języków w naszych zmianach
- JavaScript25 20%
- TypeScript2 1,6%
- Go33 26%
- PHP32 26%
- C#11 8,8%
- Rust10 8,0%
- Perl i JavaScript6 4,8%
- Python6 4,8%
- compromiseBiblioteka do przetwarzania języka naturalnego w JavaScripcie: rozbija tekst na zdania i słowa, rozpoznaje części mowy i odmienia czasowniki.21 przyjętych zmian12 161 gwiazdek na GitHubie
- AutoprefixerWtyczka PostCSS, która dodaje prefiksy przeglądarek do CSS na podstawie danych Can I Use.3 przyjęte zmiany22 209 gwiazdek na GitHubie
- vscode-neovimTryb Vima w VS Code, w którym edycję obsługuje prawdziwy Neovim.1 przyjęta zmiana7753 gwiazdki na GitHubie
- MailDevSerwer SMTP z interfejsem w przeglądarce do testowania poczty podczas pracy nad aplikacją.1 przyjęta zmiana6135 gwiazdek na GitHubie
- spacetimeLekka biblioteka JavaScriptu do dat ze strefami czasowymi.1 przyjęta zmiana4107 gwiazdek na GitHubie
Inne technologie i gdzie działa ich kod
Każda ma swoją stronę z projektami na prawdziwych ekranach i porównaniem z alternatywami.
Pytania o TypeScript, React i Node
Odpowiedzi o TypeScript, React i Node, naszych projektach i liczbach na tej stronie.
Czytaj dalej
Opisy projektów z tej strony i przegląd wszystkich technologii.
Projekt w TypeScript, React i Node?
Opisz, co chcesz zbudować. Odpiszemy w godzinę i powiemy wprost, czy ta technologia jest dobrym wyborem.