Naš proizvod · uskoro kao open source
CDS.
Jedan skup komponenti za web, iOS i Android.
CDS (Cross-platform Design System) je naš dizajn sistem. UI napišete jednom i koristite ga u Next.js, React Native i Vite SPA aplikacijama, bez ijednog Platform.select u vašem kodu. Ovaj sajt već radi na CDS-u.
LoginForm je fajl od 135 linija, bez nativnog blizanca. Po platformi se razlikuju samo primitivi.
komponente, jedan API na svakoj platformi
onoga što telefon crta preuzeto je bez izmjena
testova nakon prelaska na mobilne uređaje
stranica kataloga, props generisani iz koda
linija provjera zbog kojih build pada
Platform.select u kodu aplikacije
Zašto postoji
Pet problema zbog kojih smo napravili CDS.
Na jedanaest projekata nailazili smo na istih pet propusta. Svaki je koštao novca prije nego što smo počeli praviti CDS.
Zašto se dešava · Platform.select i uslovni importi omogućavaju da se svaki fajl grana po platformi, a to ništa ne košta. Ni jedno ni drugo ne ostavlja trag i ništa ne pukne ni kad se grananja namnože.
Šta CDS radi · Platforme se razdvajaju tek jedan sloj ispod koda koji poziva komponentu. Token teme se razrješava po platformi, na webu u CSS varijablu, a na mobilnom u vrijednost koju upiše nativni resolver, pa jedna definicija boje služi za obje.
Princip
Razdvajamo samo ono što zavisi od platforme.
38 od 74 komponente imaju nativnog blizanca, pa izgleda kao da se pola sistema razišlo. Nije tako: 33 od tih 38 ne uvoze nijednu drugu komponentu. To su komponente na dnu stabla koje pretvaraju jedan element u drugi, div u View, pa ništa iznad njih ne mora znati na kojoj je platformi.
A nijedan pattern nema nativnog blizanca, jer CI pada čim neka izmjena patternu doda blizanca.
Nativni blizanci po sloju
Provjera konvencija
Ako se pravilo prekrši, build pada.
- verify-tokens902Provjerava integritet tokena, od vrijednosti u Figmi do svake platforme.
- verify-conventions1.056Provjerava da nijedan pattern nema nativnog blizanca, da se exporti blizanaca poklapaju i da se poštuju klijentske granice.
- verify-katalog485Pokreće deset strogih provjera nad generisanim katalogom.
- eslint-plugin4 pravilaPrimjenjuje ista pravila u editoru dok kucate, prije hooka i CI-ja.
Status
Bit će besplatan i open source.
Repozitorij ostaje privatan dok demo aplikacije ne budu spremne za objavu zajedno s njim. Ostavite email i poslat ćemo vam jednu poruku kad postane javan.
Prije lansiranja
Želite isti pristup u svom proizvodu? Dizajn sisteme radimo i za klijente.
Prvi poziv traje 30 minuta i ni na šta vas ne obavezuje.