Kutoka UI-kit hadi mfumo wa kubuni

Uzoefu wa sinema ya mtandaoni ya Ivy

Wakati mwanzoni mwa 2017 tulifikiria kwanza juu ya kuunda mfumo wetu wa uwasilishaji wa muundo-kwa-code, wengi walikuwa tayari wanazungumza juu yake na wengine walikuwa wakifanya hivyo. Hata hivyo, hadi leo ni kidogo kinachojulikana kuhusu uzoefu wa kujenga mifumo ya kubuni ya jukwaa la msalaba, na hakujawa na maelekezo ya wazi na yaliyothibitishwa yanayoelezea teknolojia na mbinu za mabadiliko hayo ya mchakato wa utekelezaji wa kubuni katika bidhaa tayari kufanya kazi. Na kwa "vipengele katika kanuni" mara nyingi humaanisha mambo tofauti sana.

Wakati huo huo, kampuni iliongeza wafanyikazi wake mara mbili mwaka baada ya mwaka - ilikuwa ni lazima kuongeza idara ya muundo na kuboresha michakato ya kuunda na kuhamisha mipangilio ya maendeleo. Tunazidisha haya yote kwa "zoo" ya majukwaa ambayo yanahitaji kuungwa mkono, na tunapata mfano wa pandemonium ya Babeli, ambayo haiwezi "kuifanya kawaida" na kupata mapato. Uendelezaji wa majukwaa mara nyingi uliendelea sambamba, na utendaji sawa unaweza kutolewa kwenye majukwaa tofauti na lag ya miezi kadhaa.


Seti tofauti za mpangilio kwa kila jukwaa

Kijadi, tulianza na matatizo ambayo mfumo wa kubuni ungesaidia kutatua na kuunda mahitaji ya muundo wake. Mbali na kuunda lugha ya kuona ya umoja, kuongeza kasi ya mpangilio na ukuzaji, na kuboresha ubora wa bidhaa kwa ujumla, ilikuwa muhimu kuunganisha muundo kadiri iwezekanavyo. Hii ni muhimu ili maendeleo ya utendakazi yawezekane kwenye majukwaa yetu yote kwa wakati mmoja: Wavuti, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - bila kufanya kazi kwa kila moja yao tofauti . Na tulifanya hivyo!

Kubuni → data

Makubaliano ya kimsingi kati ya idara ya bidhaa na maendeleo yalipofikiwa, tuliketi kuchagua rundo la teknolojia na kutayarisha maelezo ya mchakato mzima - kutoka kwa mpangilio hadi kutolewa. Ili kubinafsisha kikamilifu mchakato wa kuhamisha muundo kwa maendeleo, tuligundua chaguo la kuchanganua vigezo vya sehemu moja kwa moja kutoka kwa faili za Mchoro na mipangilio. Ilibainika kuwa kupata vipande vya msimbo tulivyohitaji na kutoa vigezo tulivyohitaji ilikuwa kazi ngumu na hatari. Kwanza, wabunifu watalazimika kuwa waangalifu sana katika kutaja tabaka zote za msimbo wa chanzo, pili, hii inafanya kazi kwa vifaa rahisi zaidi, na tatu, utegemezi wa teknolojia ya mtu mwingine na muundo wa nambari ya mpangilio wa asili wa Mchoro unahatarisha mustakabali wa mpango mzima. mradi. Tuliamua kuachana na otomatiki katika eneo hili. Hivi ndivyo mtu wa kwanza alionekana katika timu ya mfumo wa kubuni, ambaye pembejeo yake ni mipangilio ya muundo, na matokeo ni data inayoelezea vigezo vyote vya vipengele na kuamuru kwa hierarchically kulingana na mbinu ya kubuni ya atomiki.

Kitu pekee kilichosalia ni wapi na jinsi ya kuhifadhi data, jinsi ya kuihamisha kwa maendeleo na jinsi ya kuitafsiri katika maendeleo kwenye majukwaa yote tunayounga mkono. Jioni iliacha kuwa dhaifu ... Matokeo ya mikutano ya mara kwa mara ya kikundi cha kazi kilichojumuisha wabunifu na viongozi wa timu kutoka kwa kila jukwaa ilikuwa makubaliano juu ya zifuatazo.

Sisi huchanganua wenyewe taswira katika vipengee vya atomiki: fonti, rangi, uwazi, ujongezaji, miduara, aikoni, picha na muda wa uhuishaji. Na tunakusanya kutoka kwa vifungo hivi, pembejeo, visanduku vya kuteua, vilivyoandikwa vya kadi ya benki, nk. Tunaweka majina yasiyo ya kisemantiki kwa mitindo ya ngazi yoyote, isipokuwa kwa icons, kwa mfano, majina ya miji, majina ya nymphs, Pokemon, gari. bidhaa... Kuna hali moja tu - orodha haipaswi kumalizika kabla, jinsi mitindo inavyoisha - show lazima iende! Haupaswi kubebwa na semantiki, ili sio lazima uongeze kitufe cha kati kati ya "ndogo" na "kati," kwa mfano.

Lugha inayoonekana

Wasanidi programu waliachwa kufikiria jinsi ya kuhifadhi na kuhamisha data kwa njia inayofaa mifumo yote, na muundo ulilazimika kubuni vipengee vya kiolesura ambavyo vingeweza kuonekana vyema na kufanya kazi kwa ufanisi katika kundi zima la vifaa vinavyotumika.

Hapo awali, tayari tulikuwa tumeweza "kujaribu" vipengele vingi vya kubuni katika programu ya Windows 10, ambayo wakati huo ilikuwa jukwaa jipya kwetu, yaani, ilihitaji utoaji na maendeleo "tangu mwanzo." Kwa kuichora, tuliweza kuandaa na kujaribu vipengele vingi na kuelewa ni kipi kati yao kilipaswa kujumuishwa katika mfumo wa kubuni wa Eevee wa siku zijazo. Bila sanduku la mchanga kama hilo, uzoefu kama huo ungeweza kupatikana tu kupitia idadi kubwa ya marudio kwenye majukwaa ambayo tayari yanafanya kazi, na hii ingechukua zaidi ya mwaka mmoja.

Kutumia tena vipengele sawa kwenye majukwaa tofauti hupunguza idadi ya mipangilio na safu ya data ya mfumo wa kubuni kwa kiasi kikubwa, hivyo kubuni ilibidi kutatua tatizo moja zaidi, ambalo hapo awali halijaelezewa katika mazoea ya kubuni na maendeleo ya bidhaa - jinsi gani, kwa mfano; kitufe cha simu na kompyuta kibao kinaweza kutumika tena kwenye TV? Na tunapaswa kufanya nini na saizi za fonti na vitu kwenye majukwaa tofauti kama haya?

Ni wazi, ilikuwa ni lazima kubuni gridi ya kawaida ya jukwaa-msingi ambayo ingeweka ukubwa wa maandishi na vipengele tulivyohitaji kwa kila jukwaa mahususi. Kama sehemu ya kuanzia kwa gridi ya taifa, tulichagua saizi na idadi ya mabango ya sinema ambayo tunataka kuona kwenye skrini fulani na, kwa msingi wa hii, tulitengeneza sheria ya kuunda safu wima, mradi upana wa safu moja ni sawa. kwa upana wa bango.

Sasa tunahitaji kuleta skrini zote kubwa kwa ukubwa sawa wa mpangilio na kuziweka kwenye gridi ya kawaida. Apple TV na Roku zimeundwa kwa ukubwa wa 1920x1080, Android TV - 960x540, Smart TV, kulingana na muuzaji, ni sawa, lakini wakati mwingine 1280x720. Programu inapotolewa na kuonyeshwa kwenye skrini za HD Kamili, 960 inazidishwa na 2, 1280 inazidishwa na 1,33, na 1920 inatolewa kama ilivyo.

Kuruka maelezo ya boring, tulifikia hitimisho kwamba kwa ujumla skrini zote, ikiwa ni pamoja na skrini za televisheni, kwa suala la vipengele na ukubwa wao, zimefunikwa na mpangilio mmoja wa kubuni, na skrini zote za televisheni ni kesi maalum ya gridi ya jumla ya jukwaa. na inajumuisha safu wima tano au sita, kama kompyuta ndogo au kompyuta ya mezani wastani. Nani anavutiwa na maelezo, nenda kwenye maoni.

UI Moja kwa majukwaa yote

Sasa, ili kuchora kipengele kipya, hatuhitaji kuchora miundo kwa kila jukwaa, pamoja na chaguo za kubadilika kwa kila moja yao. Inatosha kuonyesha mpangilio mmoja na kubadilika kwake kwa majukwaa yote na vifaa vya upana wowote: simu - 320-599, kila kitu kingine - 600-1280.

Data → maendeleo

Bila shaka, kadri tunavyotaka kufikia muundo uliounganishwa kabisa, kila jukwaa lina vipengele vyake vya kipekee. Ijapokuwa wavuti na Smart TV hutumia rafu ya ReactJS + TypeScript, programu ya Smart TV inaendeshwa na wateja wa zamani wa WebKit na Presto na kwa hivyo haiwezi kushiriki mitindo na wavuti. Na majarida ya barua pepe yanalazimishwa kabisa kufanya kazi na mpangilio wa tabular. Wakati huo huo, hakuna majukwaa yasiyo ya html yanayotumia au kupanga kutumia React Native au analogi zake zozote, ikihofia uharibifu wa utendakazi, kwa kuwa tuna mipangilio mingi maalum, mikusanyiko iliyo na mantiki changamano ya sasisho, picha na video. Kwa hiyo, mpango wa kawaida wa kutoa mitindo ya CSS iliyopangwa tayari au vipengele vya React haifai kwetu. Kwa hivyo, tuliamua kusambaza data katika umbizo la JSON, tukielezea maadili katika fomu ya dhahania ya tamko.

Kwa hivyo mali rounding: 8 Windows 10 programu inabadilika kuwa CornerRadius="8", mtandao - border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
Mali offsetTop: 12 mteja wa wavuti sawa katika hali tofauti anaweza kutafsiri kama top, margin-top, padding-top au transform

Ufafanuzi wa maelezo pia unamaanisha kuwa ikiwa jukwaa kiufundi haliwezi kutumia mali au thamani yake, linaweza kuipuuza. Kwa upande wa istilahi, tulitengeneza aina ya lugha ya Kiesperanto: zingine zilichukuliwa kutoka Android, zingine kutoka SVG, zingine kutoka CSS.

Ikiwa kwenye jukwaa fulani unahitaji kuonyesha vipengele kwa njia tofauti, tumetekeleza uwezo wa kuhamisha kizazi cha data kinacholingana katika mfumo wa faili tofauti ya JSON. Kwa mfano, hali ya "kuzingatia" kwa Smart TV inaamuru mabadiliko katika nafasi ya maandishi chini ya bango, ambayo ina maana kwa jukwaa hili kipengele hiki katika thamani ya mali ya "indent" kitakuwa na pointi 8 za kujitambulisha zinazohitaji. Ingawa hii inatatiza miundombinu ya mfumo wa muundo, inatoa kiwango cha ziada cha uhuru, ikituacha na fursa ya kudhibiti "kutofanana" kwa majukwaa sisi wenyewe, na sio kuwa mateka wa usanifu tuliounda.

Picha za picha

Ikonigrafia katika bidhaa ya kidijitali daima ni mradi mkubwa na sio mradi rahisi zaidi, ambao mara nyingi huhitaji mbuni tofauti. Daima kuna glyphs nyingi, kila mmoja wao ana ukubwa na rangi kadhaa, na majukwaa kawaida huhitaji katika muundo tofauti. Kwa ujumla, hapakuwa na sababu ya kutoweka haya yote katika mfumo wa kubuni.

Glyphs hupakiwa katika fomati ya vekta ya SVG, na maadili ya rangi hubadilishwa kiotomatiki na anuwai. Programu za mteja zinaweza kuzipokea tayari kutumika - katika muundo na rangi yoyote.

Hakiki

Juu ya data ya JSON, tuliandika zana ya kukagua vipengee - programu ya JS ambayo hupitisha data ya JSON mkondoni kupitia lebo na jenereta za mitindo, na kuonyesha tofauti tofauti za kila sehemu kwenye kivinjari. Kimsingi, onyesho la kukagua ni mteja sawa na programu za jukwaa na hufanya kazi na data sawa.

Njia rahisi ya kuelewa jinsi sehemu fulani inavyofanya kazi ni kwa kuingiliana nayo. Kwa hivyo, hatukutumia zana kama vile Kitabu cha Hadithi, lakini tulifanya muhtasari wa mwingiliano - unaweza kugusa, kuelekeza, kubofya... Unapoongeza kijenzi kipya kwenye mfumo wa usanifu, inaonekana katika onyesho la kukagua ili mifumo iwe na kitu cha kuzingatia wakati gani. kuitekeleza.

Nyaraka

Kulingana na data inayotolewa kwa majukwaa katika mfumo wa JSON, hati za vijenzi huundwa kiotomatiki. Orodha ya mali na aina zinazowezekana za maadili katika kila moja yao zimeelezewa. Baada ya kutengeneza kiotomatiki, habari inaweza kufafanuliwa kwa mikono na maelezo ya maandishi yanaweza kuongezwa. Onyesho la kuchungulia na uhifadhi wa hati hurejelewa kwa kila kipengele katika kiwango cha kila kipengele, na maelezo yote yaliyojumuishwa kwenye hati yanapatikana kwa wasanidi programu katika mfumo wa faili za ziada za JSON.

Deprecator

Sharti lingine lilikuwa uwezo wa kubadilisha na kusasisha vipengee vilivyopo kwa wakati. Mfumo wa usanifu umejifunza kuwaambia watengenezaji ni mali gani au hata vipengele vyote haviwezi kutumika na kuviondoa mara tu vinapoacha kutumika kwenye majukwaa yote. Bado kuna kazi nyingi za "mwongozo" katika mchakato huu, lakini hatujasimama.

Maendeleo ya mteja

Bila shaka, hatua ngumu zaidi ilikuwa tafsiri ya data ya mfumo wa muundo katika kanuni za majukwaa yote tunayotumia. Ikiwa, kwa mfano, gridi za kawaida kwenye wavuti sio kitu kipya, basi watengenezaji wa programu asilia za rununu za iOS na Android walifanya kazi kwa bidii kabla ya kufikiria jinsi ya kuishi nayo.

Ili kupanga skrini za programu za iOS, tunatumia njia mbili za msingi zinazotolewa na iviUIKit: mpangilio wa bure wa vipengele na mpangilio wa makusanyo ya vipengele. Tunatumia VIPER, na mwingiliano wote na iviUIKit umejikita katika Mwonekano, na mwingiliano mwingi na Apple UIKit hujikita katika iviUIKit. Ukubwa na mpangilio wa vipengele hubainishwa kulingana na safu wima na miundo ya kisintaksia inayofanya kazi juu ya vikwazo asilia vya iOS SDK, na kuzifanya kuwa za vitendo zaidi. Hii imerahisisha maisha yetu hasa wakati wa kufanya kazi na UICollectionView. Tumeandika vifuniko kadhaa maalum vya mpangilio, pamoja na zile ngumu kabisa. Kulikuwa na kiwango cha chini cha nambari ya mteja na ikawa ya kutangaza.

Ili kutengeneza mitindo katika mradi wa Android, tunatumia Gradle, kugeuza data ya mfumo wa muundo kuwa mitindo katika umbizo la XML. Wakati huo huo, tuna jenereta kadhaa za viwango tofauti:

• Msingi. Data ya primitives kwa jenereta za kiwango cha juu huchanganuliwa.
• Rasilimali. Pakua picha, ikoni na michoro zingine.
• Sehemu. Zimeandikwa kwa kila sehemu, ambayo inaelezea mali gani na jinsi ya kutafsiri kwa mitindo.

Matoleo ya maombi

Baada ya wabunifu kuchora sehemu mpya au kuunda upya iliyopo, mabadiliko haya yanaingizwa kwenye mfumo wa kubuni. Wasanidi wa kila jukwaa wanarekebisha uundaji wao wa msimbo ili kusaidia mabadiliko. Baada ya hayo, inaweza kutumika katika utekelezaji wa utendaji mpya ambapo sehemu hii inahitajika. Kwa hivyo, mwingiliano na mfumo wa kubuni haufanyiki kwa wakati halisi, lakini tu wakati wa kukusanya matoleo mapya. Mbinu hii pia inaruhusu udhibiti bora wa mchakato wa kuhamisha data na kuhakikisha utendakazi wa msimbo katika miradi ya maendeleo ya mteja.

Matokeo ya

Imepita mwaka mmoja tangu mfumo wa usanifu uwe sehemu ya miundombinu inayosaidia maendeleo ya sinema ya mtandaoni ya Ivy, na tayari tunaweza kufikia hitimisho fulani:

• Huu ni mradi mkubwa na ngumu ambao unahitaji rasilimali za kujitolea mara kwa mara.
• Hili lilituruhusu kuunda lugha yetu ya kipekee ya kuona ya jukwaa tofauti ambayo inakidhi malengo ya huduma ya video mtandaoni.
• Hatuna tena majukwaa yaliyochelewa kwa macho na kiutendaji.

Muhtasari wa vipengele vya mfumo wa muundo wa Ivy - design.ivi.ru

Chanzo: mapenzi.com