Dizajn sistem i biblioteka komponenti · Izrada
Jedna biblioteka komponenti za web i React Native
Ako su vam web i mobilna aplikacija počele izgledati različito, svaku komponentu pišemo jednom za obje. Naš sistem ima 74 komponente i 678 testova.
AngažmanPo satu · remote
Radno vrijeme9–18 CET · 4 h preklapanja
StackTypeScript · React · Next.js
Dokaz3 projekta
Usluga u 4 dijela
01 · Za koga je
Tim čije su web i mobilna aplikacija počele izgledati i raditi različito, ili tim koji se sprema da po treći put od nule pravi dugmad.
02 · Šta smo napravili
- Naš cross-platform dizajn sistem: 74 komponente, 678 testova i katalog od 81 stranice generisan iz koda. Forma za prijavu u njemu je jedan fajl koji bez izmjena koriste aplikacije u Next.js-u, Viteu i React Nativeu.Projekat 01 →
- Više od 200 komponenti u monorepou američkog marketplacea za usluge kamionima. Napravljene su dok je proizvod radio, a koriste ih i dashboardi i mobilna aplikacija.Projekat 04 →
- Biblioteka od stotinjak komponenti za građevinski white-label proizvod s više od trideset brendova. Napravljena je za dva mjeseca, radi s bilo kojim frameworkom i organizovana je po veličini, tipu i vrsti, da bi developeri našli ono što im treba.Projekat 02 →
- Izmjerili smo jednu stranicu napisanu na tri načina. Verzija s dizajn sistemom bila je za 44% manja od verzije ručno pisane u styled-components i imala je 13 hardkodiranih dizajnerskih vrijednosti, a ručno pisana 197.Tekst →
03 · Kako radimo
01 · RAZLIKE SAMO U PRIMITIVIMAKod koji se razlikuje između weba i mobilnog ide samo u komponente na najnižem nivou, kao što su box, tekst i input. Veći obrasci ne smiju imati posebnu native verziju, a provjera u CI-ju pada ako je neko doda.
02 · KATALOG IZ KODAKatalog komponenti, s tabelama propsa, generiše se iz koda. Ako neka komponenta nema unos u katalogu, build pada, pa dokumentacija ne može zaostati za kodom.
03 · RANI PREGLEDBiblioteku pregledamo kad ima oko 30 komponenti. Na našem sistemu pregled je urađen tek na 75 komponenti i našao je 188 problema. Sva tri uzroka tih problema postojala su već na 30, kad bi ih bilo mnogo jeftinije ispraviti.
04 · Stack
TypeScriptReactNext.jsReact NativeVitestyled-componentspnpm workspacesvlastita ESLint pravila
Dokaz
Gdje smo ovo već radili
Projekat 01 · Platforme74 / 678Naš cross-platform dizajn sistem: 74 komponente, 678 testova i katalog od 81 stranice generisan iz koda. Forma za prijavu u njemu je jedan fajl koji bez izmjena koriste aplikacije u Next.js-u, Viteu i React Nativeu.Pročitajte više o projektu →Projekat 04 · MarketplaceNula prekida radaViše od 200 komponenti u monorepou američkog marketplacea za usluge kamionima. Napravljene su dok je proizvod radio, a koriste ih i dashboardi i mobilna aplikacija.Pročitajte više o projektu →Projekat 02 · Platforme~100 / 30+Biblioteka od stotinjak komponenti za građevinski white-label proizvod s više od trideset brendova. Napravljena je za dva mjeseca, radi s bilo kojim frameworkom i organizovana je po veličini, tipu i vrsti, da bi developeri našli ono što im treba.Pročitajte više o projektu →BlogStranica s napola izgrađenim dizajn sistemom bila je veća od čistog HTML-aIzmjerili smo jednu stranicu napisanu na tri načina. Verzija s dizajn sistemom bila je za 44% manja od verzije ručno pisane u styled-components i imala je 13 hardkodiranih dizajnerskih vrijednosti, a ručno pisana 197.Pročitajte tekst →
Česta pitanja
Pitanja o ovoj usluzi
Hoće. Otprilike polovina komponenti u našem sistemu je jedan fajl za obje platforme. U ostalima se razlika svodi na jedan primitiv, recimo div koji postaje View, i ništa što je izgrađeno iznad njega ne mora za to znati.
Kad smo prenosili našu marketing stranicu, telefon je bez ijedne izmjene ponovo iskoristio 91% onoga što iscrtava. Dio koji radi samo na webu ostao je u jednom layout fajlu, i to zato što su razlike među platformama bile u primitivima.
Ne. Biblioteku za marketplace napravili smo unutar proizvoda koji je sve vrijeme radio.
Na stranici koju smo mjerili nije se isplatio. Verzija s ručno pisanim polovičnim sistemom bila je najveća od tri, veća čak i od čistog HTML-a, jer je prvo morala iznova napraviti kontejnere, naslove, dugmad i kartice koje dizajn sistem već ima.
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.