Kako izraditi skalabilan React UI Kit

Fotografiju Blake Wheeler

U Travixu imamo jedan proizvod s 4 različite teme. Svaka je tema neovisna marka, a svaka marka ima neke web stranice. Trenutno imamo više od 45 web stranica koje rade na našoj platformi.

Dvije od naše 4 različite marke

Da bi sve ostalo u funkciji, imamo nešto blizu 40 razvojnih programera koji rade na proizvodu i prilično je teško držati kodeks i dizajn dosljednim.

Ako radite na velikom React projektu, vjerojatno imate neki UI Kit integriran u svoju kodnu bazu. Uobičajena komponenta gumba, modalna generička implementacija, kalendar koji koristite cijelo vrijeme, uobičajene komponente koje ne sadrže poslovnu logiku.

Glavni cilj ovog članka je pomoći vam da razvijete i organizirate svoj UI Kit kako biste poboljšali svoj razvojni proces i dosljednost dizajna vašeg projekta.

Kao što možete zamisliti, ova knjižnica neće ovisiti samo o vašem razvojnom timu. Također biste trebali uključiti dizajnere. Nije važno koliko ste vješti ili tehnologije koje odaberete ako vaš tim dizajnera zatraži 9 različitih gumba i 22 veličine slova.

Ako budete imali sreće, to neće biti veliki problem. Postaje sasvim uobičajeno da dizajnerski timovi imaju stilski vodič. Ali ako sreća nije vaša najbolja vještina, možete imati nešto poput sivogCantBeLighterThanOvo naziv varijable u vašoj temi (istinita priča).

Tehnologija

Kao što naslov govori, mi koristimo React za izgradnju naše aplikacije. Većina savjeta u ovom članku lako se može koristiti u različitim arhitekturama jer imaju slične alate i knjižnice.

Knjiga pripovjedaka

Storybook će biti igralište vašeg razvojnog igrališta i komponenta. Pomaže da svoju komponentu razmišljate kao izolirani paket i da ih razdvojite na svoj proizvod, tako da možete imati općenita i dobro opisana svojstva.

Komponenta nije za višekratnu upotrebu

Specifična implementacija gumba

Generička komponenta

Općenita primjena gumba

Knjiga knjiga također je odlična u pružanju dokumentacije. Postoji dodatak zvan storybook-addon-info koji automatski dodaje komponentni JSX i opis vrsta propita na stranicu s komponentama.

Pokretanje cijele aplikacije vjerojatno zahtijeva nekoliko koraka i može biti vrlo sporo. Knjiga s knjigama obično je brže startati pa poboljšava brzinu vašeg razvoja. Možete razviti svoje UI komponente koje ismijavaju sva svojstva (storybook-addon-knopovi su savršeni za ismijavanje) u potpuno izoliranom igralištu bez pokretanja glavne aplikacije.

Stilizirane komponente

Trebat će vam i nešto za rješavanje tema. Prije smo isprobali čiste CSS varijable i on je dobro funkcionirao. Vaš će paket imati dvije CSS datoteke, jedna s komponentom knjižnice i druga za deklaraciju varijabli. Ako imate više od jedne teme, samo trebate prebaciti datoteku teme i ona bi trebala raditi.

Theming koristeći čisti CSS

U našoj novoj knjižnici odlučili smo krenuti sa Styled Components. Već nudi tematsko rješenje i CSS u JS-u prilično dobro surađuje s Reactom. Također ste prema zadanim postavkama dobili CSS koji rješava najveći problem u računalnoj znanosti, imenovanju.

Ovo je sjajan način da se izbjegne neočekivano prebacivanje CSS-a i također sprečava programere da namjerno nadjačaju CSS pravila. Ponašanje vašeg sastavnog dijela povezano je s vlastitom definicijom svojstava i nitko ne može globalno nadjačati stilove.

Također vam pomaže da bolje definirate uvjetna pravila u svojim stilovima, jer vam nije potrebno proširiti CSS klase ili njima upravljati u svom elementu. U osnovi prosljeđujete rekvizite komponenti vlasničkog pregleda i ova komponenta može je koristiti za rješavanje rubnih slučajeva.

Odabrana tema dostupna za upotrebu u našim komponentama

Na Travixu smo stvorili dodatak Storybooka kako bismo lako promijenili temu. Ako ste se igrali sa Styled Components ThemeProvider-om, znate da mi u osnovi moramo promijeniti svojstvo teme i ona djeluje poput šarma. Ovaj dodatak pomaže nam da testiramo sve marke tijekom razvoja, a također pomaže vlasnicima proizvoda (proizvođačima proizvoda) i dizajnerima da potvrde implementaciju.

Dodatak teme za odabir tema

kucana kopija

Imali smo nekoliko problema za implementaciju TypeScript-a. Proveli smo najmanje dva tjedna na ažuriranju našeg rješenja kako bismo ga podržali i još dva tjedna premještajući sve. Ako se odlučite za korištenje, toplo preporučam da svoj projekt započnete s TypeScriptom ispočetka.

Ali definitivno se isplati, a automatsko dovršavanje svojstava i vrijednosti mnogo pomaže tijekom razvoja. Također vam pomaže da definirate bolje ugovore za vašu komponentu jer bilo koja definicija egzotičnih svojstava svijetli na crvenom svjetlu tijekom postupka pregleda.

TypeScript se automatski dovršava

Eslint

Da bi se osigurala dosljednost baze podataka, imamo super strogu konfiguraciju eslint-a. Ovdje smo odlučili potpuno strogo pa ne gubimo vrijeme na preglede manjih detalja u kodu.

Naš se veznik automatski pokreće prije bilo kakvog pritiska s automatskim popravkom koji je izmijenjen u posljednju obvezu. Također se pokreće u našem CI stroju, pa ako netko odluči preskočiti provjeru valjanosti, tijekom izrade neće uspjeti.

Razvojni proces

Za nas se najvažniji dio nije odnosio na samu tehnologiju, već na postupak. Proveli smo dosta vremena pokušavajući ga održati što strože, tako da dugoročno možemo jamčiti kvalitetu knjižnice. To je vrlo važno u velikoj tvrtki, jer programeri odlaze, programeri se pridružuju, ali vaša će baza podataka koda izdržati test vremena.

RFC zahtjev za povlačenjem

RFC znači "zahtjev za komentare". U ovom zahtjevu za povlačenje ne primjenjujemo nijedan redak koda. U osnovi dodamo datoteku za označavanje koja opisuje našu komponentu. Koristite slučajeve, svojstva, povratne pozive, moguće nuspojave.

Vaša će nova knjižnica koristiti cijela tvrtka i imat će puno rubnih slučajeva i sitnih detalja za prilagodbu. Zahtjevi za povlačenje mogu lako postati ogromne teme za raspravu treba li komponenta biti HOC ili renderProps, nešto komponiranije ili strože, kontrolirano ili nekontrolirano itd. Dakle, RFC vam pomaže da ne gubite vrijeme na implementaciju nečega što će se u potpunosti promijeniti nakon pregleda.

Povlačenje zahtjeva

Naš pregled zahtjeva za povlačenje zahtijeva nekoliko automatiziranih koraka, tri odobrenja razvojnog programera i recenzije PO / dizajnera. Ništa se ne spaja ako jedan od ovih koraka ne uspije.

CI koraci:
- Pokrenite eslint i testove.
- Provjerite da li se pokrivenost koda ne smanjuje.
- Stvorite jedinstveno okruženje knjiga knjiga (također ažurira okruženje ako počinite nešto novo).

Programeri koji pregledavaju vaš zahtjev za povlačenjem moraju provjeriti odgovara li implementacija RFC-u i je li dizajn ispravan.

Dizajneri i proizvođači narudžbe mogu pregledati vašu primjenu u okruženju s knjigama koje je stvorio vaš CI.

Objavljivanje nove verzije

Za kontrolu našeg ciklusa izdanja odlučili smo se poslužiti Semantic Releaseom, tako da samo moramo dodati „patch“, „minor“ ili „major“ u našu poruku o objedinjavanju i ona će automatski objaviti novu verziju u našem privatnom NPM-u. Naš CI također ažurira okruženje naše glavne knjige.

Zaključak

Izgradnja UI Kit nije lak zadatak i zahtijevat će mnogo napora od vašeg tima, ali definitivno će vam pomoći u skaliranju vaše prijave i njenom održavanju dosljednim.

Svako veće ažuriranje korisničkog sučelja lako se postiže budući da naše komponente korisničkog sučelja ostaju izolirane, a također je lako dodati bilo koju novu marku, trebamo dodati novu datoteku tema.

Još jedna prednost premještanja naše tematske deklaracije u vanjsku knjižnicu jest ta što naša glavna aplikacija uopće ne brine o tematiziranju. U tom smislu je apatridija jer naša sučelje Biblioteka brine o svim temama.

A ako imate tim dizajnera koji kodira (također se naziva Unicorns), oni mogu započeti prototipirati pomoću ove biblioteke. Je li to najvjerniji prototip ili ne?

Ako želite koristiti nešto slično onome što koristimo u Travix-u, izdvojim dio baze podataka i stvorio sam malu ploču s slojevitim komponentama, TypeScriptom i Jestom. Bilo je prilično neugodno postavljanje svega, pa se nadam da će vam se svidjeti: https://github.com/leandrooriente/react-ui-kit-boilerplate.

Hvala na čitanju.