Arhitektura React SPA · Izrada
Jedan način dohvatanja podataka i osvježavanja sesije u React SPA-u
Ako svaki feature u vašem SPA-u na svoj način dohvata podatke i obrađuje sesiju, svakom od tih poslova dajemo jedan sloj, a provjere u buildu paze da ga featurei koriste.
AngažmanPo satu · remote
Radno vrijeme9–18 CET · 4 h preklapanja
StackReact · TypeScript · Vite
Dokaz3 projekta
Usluga u 4 dijela
01 · Za koga je
Tim čija je React single-page aplikacija rasla feature po feature, pa sada svaki feature na svoj način dohvata podatke, kešira ih i obrađuje isteklu sesiju.
02 · Šta smo napravili
- Vite SPA je jedan od tri targeta našeg dizajn sistema, uz Next.js i React Native. Poziv koji iscrtava ekran za prijavu isti je do posljednjeg bajta u svakoj od tih aplikacija.Projekat 01 →
- Među 678 testova sistema postoji i poseban SPA target, a svako pokretanje CI-ja radi pravi Vite build, uz build za Next.js i Metro.Projekat 01 →
- Dashboardi u Reactu i Reduxu za pet vrsta korisnika na američkom marketplaceu. Svaka vrsta korisnika dobila je svoju granu routera, /dashboard/{user_type}/{page}, pa provjere uloga nisu završile razbacane po komponentama.Projekat 08 →
- Na istom marketplaceu pravila u buildu tražila su da svaki API poziv navede tip zahtjeva i tip odgovora i da nijedna komponenta ne bude duža od 200 linija.Projekat 03 →
Dizajn sistem smo napravili za sebe i nijedan klijent ga nije platio. Na njemu se vidi gdje u SPA aplikaciji povlačimo granice između slojeva.
03 · Kako radimo
01 · PO JEDAN SLOJDohvatanje, keširanje, osvježavanje sesije i obrada grešaka imaju svako svoje mjesto u kodu. Kad sesija istekne, svaki ekran prolazi isti put osvježavanja.
02 · PROVJERA U BUILDUZa svaku od tih odluka build ima svoju provjeru, pa se odluka poštuje i u sedmici kad niko nema vremena za pažljiv code review.
04 · Stack
ReactTypeScriptViteReduxstyled-componentspnpm workspacesvlastita ESLint pravila
Dokaz
Gdje smo ovo već radili
Projekat 01 · Platforme74 / 678Vite SPA je jedan od tri targeta našeg dizajn sistema, uz Next.js i React Native. Poziv koji iscrtava ekran za prijavu isti je do posljednjeg bajta u svakoj od tih aplikacija.Pročitajte više o projektu →Projekat 08 · Marketplace506 rutaDashboardi u Reactu i Reduxu za pet vrsta korisnika na američkom marketplaceu. Svaka vrsta korisnika dobila je svoju granu routera, /dashboard/{user_type}/{page}, pa provjere uloga nisu završile razbacane po komponentama.Pročitajte više o projektu →Projekat 03 · Platforme~50%Na istom marketplaceu pravila u buildu tražila su da svaki API poziv navede tip zahtjeva i tip odgovora i da nijedna komponenta ne bude duža od 200 linija.Pročitajte više o projektu →
Česta pitanja
Pitanja o ovoj usluzi
Ne. Prvo napravimo listu mjesta na kojima svaki feature danas dohvata podatke, kešira ih i obrađuje isteklu sesiju. Zatim te dijelove jedan po jedan selimo u zajednički sloj.
To je dogovor tima napisan kao kod. Isto pravilo je upozorenje u editoru, a greška u pre-commit hooku i u CI-ju. Tako je prisutno u svakoj fazi, a blokira samo tamo gdje zaustavljanje malo košta.
Zavisi od proizvoda. Naš dizajn sistem radi na oba načina, kao Vite SPA i uz renderovanje na serveru u Next.js-u, s istim pozivima komponenti.
Sljedeći korak
Opišite problem i javit ćemo vam se s tri opcije.
Prvi poziv traje 30 minuta i ni na šta vas ne obavezuje.