Disaini ja koodi vahelise lünga ületamine

„Kujundus ja kood” on sari disaini- ja insenerikatsetest, protsessidest ja õppetundidest, mille tõi teile AirSwap-i meeskond.

AirSwap-is on meil tootearendusele asünkroonne ja korduv lähenemisviis. Üks varasemaid väljakutseid, millega kokku puutusime, oli aga toote identiteedi säilitamine funktsioonide kordamise kaudu tooteomanike vahel. AirSwap Token Traderi ja AirSwap-i vidinate varajaste versioonide väljatöötamisel leidsime kiiresti peotäie visandifaile - iga fail sisaldas sümbolite ja stiilide haaratud kotti, mis tähistas meie tooteidentiteedi seisundit sellel ajahetkel. Kuigi see töötas alguses, kasvas meie konsolideeritud tõdeallika puudumine kiiresti mitmest allikast pärit vananenud stiilide segadusse.

Mitu faili ja sümbolit hajutades neist kõigist, sai sellest ühtlase identiteedi haldamine.

Iga AirSwapi kasutajaliidese kogemus on kirjutatud Reaktis. Alguses oli meil jagatud komponentide kataloog, vajaduse korral esialgne komponentide teek koos sobivate stiilidega, mis vastasid toote identiteedile. Korrates aga muutus meie tooteidentiteet. Uuemate funktsioonide kujunduskomplektide viitamine raskendas tuvastamist, kas konkreetne komponent oli juba olemas või oli seda vaja rakendada. Otsustasime varakult kasutada stiilis komponente, mis võimaldas meil funktsioone kiiresti korrata ja üles ehitada. Stiilikomponentidega kaasas olnud kasutuslihtsus oli tohutu võit, kuid see võimaldas ka meil tahtmatult teha stiili laiendamisel halbu otsuseid. Ilma rangete reegliteta, kuidas komponente luua või laiendada, sai meie koodibaas kiiresti paljude kopeeritud koodide koduks vaid väikeste erinevustega. See mitte ainult ei vähendanud arendaja kiirust ega suurendanud tehnikavõlga, vaid tõi ka meie tooteidentiteedi vastuolu.

Kuna kujunduskompimidel puudub täpselt määratletud süsteem, tutvustaksid paljud meie andmebaasis olevad failid uusi, olemasolevatega sarnaseid komponente või teeksid olemasolevates komponentides väikseid muudatusi.

Nendele probleemidele lahenduse otsimisel oleme hiljuti hakanud katsetama, kuidas ületada lõhe kujunduse ja koodi vahel.

Disainitehnoloogia

Disainitehnoloogia idee pole midagi uut. Tööriistad, nagu Craft ja Invision, on olemas, et aidata disaineritel oma stiile konsolideerida ja edastada see teave arendajatele. See võimaldab mitmetel sidusrühmadel töötada välja erinevad funktsioonid, säilitades samal ajal baaskomponentide konsolideeritud komplekti või ühiskomponentide raamatukogu. Kuid see, mida me vajasime, oli viis mitte ainult säilitada disainilahenduste vaheline võrdsus, vaid säilitada võrdsus selle vahel, millised komponendid moodustavad kujunduse ja millised eksisteerivad koodis.

Umbes aasta tagasi andis Airbnbi disainitehnoloogia meeskond välja avatud lähtekoodiga projekti react-sketchapp, mis võimaldas Reaxi komponentidel visandiks Sketchiks muutuda. Reaketi kogukond vastas positiivselt ja piisavalt kiiresti lasid stiilsed komponendid oma raamatukogu laienduse, stiilis komponendid / primitiivid, mitme eesmärgi abil renderdamise (sealhulgas visandile visandiks muutmise) toega. Need projektid said põhilisteks tehnilisteks lahendusteks meie ees seisvatele vastuoluprobleemidele.

AirSwap'i komponentide raamatukogu

Pärast AirSwap-vidina ammendavat auditit tuvastasime Sketchis komponentide komplekti, mis oli mõeldud kasutamiseks kõigi praeguste ja tulevaste funktsioonide jaoks, ning lugesime need uuesti. Seejärel võtsime aega kogu selle reaktorikomponendi raamatukogu taasloomiseks Reaktis, kasutades meie alusena stiilsed komponendid / primitiivid. Meie komponendid muudeti sümboliteks react-sketchapp abil, luues meie disainilahendustele ühe tõeallika.

Reageerige visandile renderdatud komponendid

Komponentide raamatukogu loomine sai meie esialgse lõpliku kujundusprotsessi aluseks AirSwap'is. Komponentide kavandid tulid kõigepealt, millele järgnes juurutamine. Kuna me kasutasime stiilikomponente ja skeemi skeemi reageerimist, võisime rakendatud koodi visandile visandiks tagasi saata. Heakskiitmise korral muutuvad renderdatud komponendid uuteks kujundusteks, mis on vajadusel valmis edaspidiseks ülevaatamiseks.

Komponentide raamatukogu mitu versiooni, mis on joonistatud eskiisiks ja üles laaditud Figma

Sisestage Figma

See tsükkel kõrvaldab erinevused koodi ja kujunduse vahel. Kui avastasime suurema osa oma kujundustöödest Figma peal, avastasime selle lahenduse täiendavad eelised kiiresti. Kuna meie kujundusriistad võimaldavad meil luua visanddokumente oma komponentide teegist, laadime iga uue versiooni üles Figma. Kommentaare ja muudatustaotlusi saab teha interaktiivselt viimasel redaktsioonil, mis sisaldab järgmise redaktsiooni tehnilisi andmeid, ja laaditakse üles alles siis, kui kõik eelnevad kommentaarid on adresseeritud. See ei ole veel täiesti sujuv (veel), kuid loob kasutajaliidese ülevaatusprotsessi, mis on informatiivselt sarnane GitHubi tõmbetaotlustega.

Meie uue komponentide raamatukogu kasutamine piltide loomiseks uue AirSwap Conversational OTC Trading jaoks

Lisaks saame Figma jagatud teegi funktsioone kasutades juurdepääsu nendele komponentidele kõigis meie disainikomplektides. Inseneridena saame reaalajas neid kompasse ühiselt vaadata ja redigeerida, mis annab selge ülevaate, millist komponenti kasutatakse. See välistab täielikult igasuguse arvamise, kas komponent on juba olemas või mitte, kuna komponendi nimi kuvatakse joonisel.

Komponendi nimi kuvatakse joonisel Figma, mis annab kohe pilku vaatavatele arendajatele teavet

Mis järgmiseks

Edasi liikudes kavatseme seda protsessi täiustada ja muuta, et see sujuvamalt meie tootearendustöösse sobiks. Vaja on veel mitmeid käsitsi tehtavaid ja ebaefektiivseid samme.

Ühe puhul ei paku Figma praegu dokumentide jaoks kirjutusfunktsionaalset API-liidet, mis nõuab, et me genereeritavad visandifailid käsitsi üles laadiksime. Nõuetekohase API-toega saame selle lõpu-otsa protsessi hõlpsalt integreerida oma pidevasse integratsiooniprotsessi. Kujutame ette tulevikku, kus CI torujuhtme kaudu visandifail sildist või harust reprodutseeritakse (või veel parem, renderdatakse skripti läbimise asemel natiivsed Figma objektid), laadime selle faili üles Figma ja linkime selle tulemuseks oleva dokumendi tõmbele taotlus. Figma kommentaare saab GitHubisse risti postitada, pakkudes sujuvat suhtlemist ja tagasisidet disaini ja koodi vahel.

Lisaks, kuigi oleme loonud komponentide raamatukogu tehnilise aluse, peame veel kehtestama praktilised reeglid, kuidas ja millal peaksime komponente laiendama ja / või uusi looma. Milliseid komponentide omadusi saab iga juhtumi puhul eraldi kohandada ja millal näitavad suured muudatused uue komponendi loomise vajadust? Peame leidma neile probleemidele loomulikud vastused, ideaaljuhul pakkuma välja automatiseeritud viisid nende otsuste jõustamiseks.

Selle uue komponentide raamatukogu abil oleme märkinud, et meie disainilahenduse muutmise korral on tootlikkus ja tõhusus suurenenud. Ehkki kaugeltki mitte täiuslik, on selle uue protsessi täielikud otsmõju võimalused võimaldanud meil suurendada töö kordamise kiirust, säilitades samas toote identiteedi kõrge terviklikkuse. Vestlus disaini ja disainitehnoloogia ümber areneb kiiresti paljudes tootetiimides üle kogu maailma. Kujundus on asi, millest me AirSwapil sügavalt hoolime, ja disainitehnoloogiast on saanud põnev tootearenduse ristmik, mida saame kasutada vingete toodete saatmisel.

  • Telli AirSwap'i ajaveeb
  • Liituge meie ametliku kanaliga Telegramis
  • Jälgi meid Twitteris
  • leia meid Facebookis
  • Liituge meie alamreklaamiga