Ezmûna sînemaya serhêl a Ivy
Gava ku di destpêka sala 2017-an de em yekem car fikirîn ku pergala xweya radestkirina sêwirana-kodê biafirînin, pir kes berê li ser wê diaxivîn û hinan jî wiya dikirin. Lêbelê, heya roja îro hindik di derbarê ezmûna avakirina pergalên sêwirana cross-platformê de têne zanîn, û ti reçeteyên zelal û îsbatkirî yên ku teknolojiyê û rêbazan diyar dikin ji bo veguheztina bi vî rengî ya pêvajoya pêkanîna sêwiranê li hilberek jixwe xebitîn tune. Û ji hêla "pêkhateyên di kodê de" ew pir caran wateyên cûda cûda dikin.
Di vê navberê de, pargîdanî sal bi sal karmendên xwe ducar kir - pêdivî bû ku beşa sêwiranê mezin bike û pêvajoyên çêkirin û veguheztina sêwiranan ji bo pêşkeftinê xweş bike. Em van hemîyan bi "zoo" platformên ku divê werin piştgirî kirin zêde dikin, û em dişibin pandemoniya Babîlonî, ya ku bi tenê nekare "wê bi normalî bike" û dahatê çêbike. Pêşveçûna platforman bi gelemperî bi paralelî dimeşe, û heman fonksiyonel dikare li ser platformên cihêreng bi çend mehan dereng were berdan.
Ji bo her platformê setên sêwirana veqetandî
Kevneşopî, me bi pirsgirêkên ku pergalek sêwiranê dê ji bo sêwirana wê alîkariyê bide çareserkirin û formulekirin dest pê kir. Ji bilî afirandina zimanek dîtbarî ya yekbûyî, zêdekirina leza sêwirandin û pêşkeftinê, û başkirina kalîteya hilberê bi tevahî, girîng bû ku sêwiranê bi qasî ku gengaz be yek bike. Ev pêdivî ye ku pêşveçûna fonksiyonê li ser hemî platformên me bi hevdemî mimkun bibe: Web, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - bêyî ku li ser her yek ji wan cuda bixebitin. Û me ew kir!
Sêwirandin → dane
Dema ku peymanên bingehîn di navbera beşên hilber û pêşkeftinê de hatin bidestxistin, em rûniştin ku stûnek teknolojiyê hilbijêrin û hûrguliyên tevahiya pêvajoyê - ji sêwiranê heya berdanê bixebitin. Ji bo ku pêvajoya veguheztina sêwiranê ji pêşkeftinê re bi tevahî otomatîk bikin, me vebijarka parskirina pîvanên pêkhateyê rasterast ji pelên Sketch-ê yên bi sêwiranan vekolîn. Derket holê ku dîtina perçeyên kodê yên ku ji me re hewce ne û derxistina pîvanên ku ji me re hewce ne karek tevlihev û xeternak bû. Ya yekem, sêwiraner neçar in ku di navkirina hemî qatên koda çavkaniyê de pir baldar bin, ya duyemîn jî, ev tenê ji bo hêmanên herî hêsan dixebite, û ya sêyemîn jî, girêdayîbûna bi teknolojiya kesek din û avahiya kodê ya sêwirana orîjînal Sketch paşeroja tevahiyê dixe xeterê. rêvename. Me biryar da ku em dev ji otomasyona di vî warî de berdin. Bi vî rengî yekem kes di tîmê pergala sêwiranê de xuya bû, ku têketina wî sêwiranên sêwiranê ne, û derdan daneya ku hemî pîvanên pêkhateyan vedibêje û bi hiyerarşîk li gorî metodolojiya sêwirana atomî hatî rêz kirin.
Tiştê ku hişt ku were kirin ev bû ku li ku û çawa datayê hilanîn, meriv wê çawa berbi pêşkeftinê veguhezîne û meriv wê çawa di pêşkeftinê de li ser hemî platformên ku em piştgirî dikin şîrove bike. Ev êvar ji xwe re namîne... Encama civînên asayî yên koma xebatê ya ku ji sêwiraner û pêşengên tîmê ji her platformê pêk tê, li ser vê yekê lihevhatin bû.
Em bi destan dîmenê di hêmanên atomê de pars dikin: font, reng, şefafîtî, derdan, dorpêçkirin, îkon, wêne û dirêjahiya anîmasyonan. Û em ji vê bişkok, têketin, qutikên kontrolê, widgetên qerta bankê û hwd berhev dikin. Em navên ne-semantîk didin şêwazên her astê, ji bilî îkonan, wek nimûne, navên bajaran, navên nymphan, Pokemon, erebe. markayên... Tenê şertek heye - lîste divê berê neyê qedandin, şêwaz çawa bi dawî dibin - divê nîşan bide! Pêdivî ye ku hûn xwe bi semantîkê negirin, da ku hûn ne hewce ne ku bişkokek navîn di navbera "biçûk" û "navîn", mînakî de zêde bikin.
Zimanê dîtbarî
Ji pêşdebiran re hişt ku bifikirin ka meriv çawa çawa daneyan hilanîn û veguheztin bi rengek ku li gorî hemî platforman be, û sêwiran neçar bû ku hêmanên navbeynkar sêwirîne ku karibe baş xuya bike û bi bandor li seranserê fîloya cîhazên piştgirîkirî bi bandor bixebite.
Berê, me berê xwe da "ceribandina" piraniya hêmanên sêwiranê di serîlêdanek ji bo Windows 10, ku wê demê ji bo me platformek nû bû, ango, jê re "ji sifirê" pêdivî û pêşkeftina hewce dikir. Bi xêzkirina wê, me karî piraniya hêmanan amade bikin û ceribandin û fam bikin ka kîjan ji wan diviyabû di pergala sêwirana pêşerojê ya Eevee de cîh bigirta. Bêyî sandboxek wusa, ezmûnek wusa tenê dikaribû bi jimarek mezin dubarekirina li ser platformên ku jixwe dixebitin were bidestxistin, û ev ê ji salek zêdetir bigire.
Dubarekirina heman hêmanan li ser platformên cihêreng, hejmara sêwiranan û rêza daneyên pergala sêwiranê bi girîngî kêm dike, ji ber vê yekê sêwiranê neçar ma ku pirsgirêkek din çareser bike, ku berê di pratîkên sêwirandin û pêşkeftina hilberê de nehatibû diyar kirin - çawa, mînakî, gelo bişkokek ji bo têlefon û tabletan dikare li ser TV-yê ji nû ve were bikar anîn? Û divê em bi mezinahiyên font û hêmanên li ser platformên wusa cihêreng çi bikin?
Eşkere bû, pêdivî bû ku meriv torgilokek modular a cross-platform were sêwirandin ku ji bo her platformek taybetî pîvanên nivîs û hêmanan destnîşan bike. Wekî xala destpêkek ji bo torê, me mezinahî û hejmara afîşên fîlimê yên ku em dixwazin li ser ekranek taybetî bibînin hilbijart û, li ser bingeha vê, me qaîdeyek ji bo avakirina stûnên şebek formul kir, bi şertê ku firehiya stûnek wekhev be. bi firehiya afîşê.
Naha pêdivî ye ku em hemî ekranên mezin bînin heman pîvanê û wan bixin nav tora hevpar. Apple TV û Roku di mezinahiya 1920x1080 de têne sêwirandin, Android TV - 960x540, TV-yên Smart, li gorî firoşkarê, yek in, lê carinan 1280x720. Dema ku serîlêdan li ser ekranên Full HD-ê tê pêşkêş kirin û xuyang kirin, 960 bi 2-ê tê zêdekirin, 1280 bi 1,33-ê tê zêdekirin, û 1920 wekî ku tê derxistin.
Ji hûrguliyên bêzar dûrketin, em gihîştin wê encamê ku bi gelemperî hemî ekran, tevî ekranên televîzyonê, ji hêla hêman û mezinahiyên wan ve, ji hêla yek sêwirana sêwiranê ve têne nixumandin, û hemî ekranên televîzyonê rewşek taybetî ya tora gişt-platformê ne. û ji pênc an şeş stûnan pêk tê, mîna tabletek an sermaseya navîn. Kî bi hûrguliyan re eleqedar e, di şîroveyan de biçin.
Yekane UI ji bo hemî platforman
Naha, ji bo xêzkirina taybetmendiyek nû, em ne hewce ne ku ji bo her platformê sêwiranan xêz bikin, ji bo her yek ji wan jî vebijarkên adaptasyonê. Bes e ku meriv yek layout û adaptasyona wê ji bo hemî platform û cîhazên her firehî nîşan bide: têlefon - 320-599, her tiştê din - 600-1280.
Daneyên → pêşveçûn
Bê guman, bi qasî ku em dixwazin sêwiranek bi tevahî yekgirtî bi dest bixin, her platformek taybetmendiyên xwe yên bêhempa hene. Her çend hem tevn û hem jî Smart TV stoka ReactJS + TypeScript bikar bînin, sepana Smart TV li ser xerîdarên WebKit û Presto yên mîras dimeşe û ji ber vê yekê nikare şêwazên bi tevneyê re parve bike. Û bultenên e-nameyê bi tevahî neçar in ku bi sêwirana tabloyê re bixebitin. Di heman demê de, yek ji platformên ne-html bikar neynin an plan nakin ku React Native an yek ji wan analogên wê bikar bînin, ji tirsa xirabkirina performansê, ji ber ku me gelek sêwiranên xwerû, berhevokên bi mantiqa nûvekirina tevlihev, wêne û vîdyoyan hene. Ji ber vê yekê, nexşeya hevpar a radestkirina şêwazên amadekirî yên CSS an pêkhateyên React ji bo me ne maqûl e. Ji ber vê yekê, me biryar da ku em daneyan bi formata JSON veguhezînin, nirxan bi rengek eşkerekirî diyar bikin.
Ji ber vê yekê milk
rounding: 8Serlêdana Windows 10 veguherîneCornerRadius="8", web -border-radius: 8px, Android -android:radius="8dp", iOS -self.layer.cornerRadius = 8.0.
MaloffsetTop: 12heman muwekîlê webê di rewşên cûda de dikare wekî şîrove biketop,margin-top,padding-topantransform
Daxuyaniya ravekirinê jî tê vê wateyê ku ger platform ji hêla teknîkî ve nikaribe milkek an nirxa wê bikar bîne, ew dikare wê paşguh bike. Di warê termînolojiyê de, me cûreyek zimanê esperanto çêkir: hin ji Android, hin ji SVG, hin ji CSS hatine girtin.
Ger li ser platformek taybetî hewce bike ku hûn hêmanan bi rengek cûda nîşan bidin, me kapasîteya veguheztina hilberîna daneya têkildar di forma pelek JSON ya cihêreng de bicîh kiriye. Mînakî, rewşa "li balkê" ji bo Smart TV guheztinek di pozîsyona nivîsê ya li binê posterê de destnîşan dike, ku tê vê wateyê ku ji bo vê platformê ev pêkhate di nirxa taybetmendiya "derketinê" de dê 8 xalên dakêşanê yên ku jê re hewce dike vedihewîne. Her çend ev binesaziya pergala sêwiranê tevlihev dike jî, ew dereceyek din a azadiyê dide, û fersendê dide me ku em bi xwe "cudabûna" dîtbarî ya platforman îdare bikin, û nebin rehîn mîmariya ku me afirandiye.
Pîktogram
Di hilberek dîjîtal de îkonografiya her gav projeyek berbiçav û ne hêsan e, bi gelemperî sêwiranek cûda hewce dike. Her gav gelek glyph hene, her yek ji wan çend pîvan û reng hene, û platform bi gelemperî di formên cûda de hewceyê wan in. Bi gelemperî, sedemek tune ku ev hemî nexe nav pergala sêwiranê.
Glyph di forma vektorê SVG de têne barkirin, û nirxên rengan bixweber bi guherbaran têne guhertin. Serlêdanên xerîdar dikarin wan ji bo karanîna amade bistînin - di her format û reng de.
Pêşpirsyarî
Li ser daneyên JSON-ê, me amûrek ji bo pêşdîtina hêmanan nivîsand - serîlêdanek JS-ê ku daneyên JSON-ê bi lez û bez di nav jeneratorên xwe yên nîşankirin û şêwazê re derbas dike, û guhertoyên cihêreng ên her pêkhateyê di gerokê de nîşan dide. Di bingeh de, pêşdîtin tam heman muwekîlê serîlêdanên platformê ye û bi heman daneyan re dixebite.
Awayê herî hêsan ku meriv têbigihîje ka pêkhateyek taybetî çawa dixebite bi têkilkirina pê re ye. Ji ber vê yekê, me amûrên mîna Storybook bikar neanî, lê pêşdîtinek înteraktîf çêkir - hûn dikarin dest bidin, nîşan bidin, bikirtînin... Dema ku pêkhateyek nû li pergala sêwiranê zêde bikin, ew di pêşdîtinê de xuya dike da ku platforman tiştek hebe ku meriv li ser hûr bibe gava pêkanîna wê.
Dokumentasyonê
Li ser bingeha daneyên ku di forma JSON de ji platforman re têne peyda kirin, belgeyên ji bo pêkhateyan bixweber têne çêkirin. Di her yek ji wan de navnîşek taybetmendî û celebên gengaz ên nirxan têne diyar kirin. Piştî hilberîna otomatîkî, agahdarî dikare bi destan were zelal kirin û ravekek nivîsê dikare were zêdekirin. Pêşdîtin û belgekirin di asta her pêkhateyê de bi hev re têne referans kirin, û hemî agahdariya ku di belgeyê de cih digirin di forma pelên JSON ên din de ji pêşdebiran re peyda dibin.
Deprecator
Pêdiviyek din jî ew bû ku bi demê re beşên heyî biguhezînin û nûve bikin. Pergala sêwiranê fêr bûye ku ji pêşdebiran re bêje ka kîjan taybetmendî an jî hemî pêkhate nekarin bikar bînin û gava ku ew êdî li ser hemî platforman neyên bikar anîn, wan jêbirin. Di vê pêvajoyê de hê jî gelek keda "destanî" heye, lê em li ber xwe nadin.
Pêşveçûna xerîdar
Bê guman, qonaxa herî tevlihev şirovekirina daneyên pergala sêwiranê di koda hemî platformên ku em piştgirî dikin de bû. Ger, bo nimûne, torên modular ên li ser tevneyê ne tiştek nû ne, wê hingê pêşdebirên sepanên desta yên xwemalî yên ji bo iOS û Android-ê berî ku fêhm bikin ka meriv çawa bi wê re bijîn pir xebitîn.
Ji bo xêzkirina ekranên serîlêdana iOS-ê, em du mekanîzmayên bingehîn ên ku ji hêla iviUIKit ve têne peyda kirin bikar tînin: sêwirana belaş a hêmanan û sêwirana berhevokên hêmanan. Em VIPER bikar tînin, û hemî danûstendina bi iviUIKit re di View-yê de tê berhev kirin, û piraniya danûstendina bi Apple UIKit re di iviUIKit-ê de ye. Mezinahî û birêkûpêkkirina hêmanan li gorî stûn û strukturên hevoksaziyê yên ku li ser astengên SDK-ya iOS-ê yên xwemalî dixebitin têne destnîşan kirin, û wan pratîktir dike. Vê yekê bi taybetî dema ku bi UICollectionView re dixebitin jiyana me hêsan kir. Me ji bo sêwiranan çend pêçanên xwerû nivîsandine, di nav de yên pir tevlihev. Kêmtirîn koda xerîdar hebû û ew bû eşkere.
Ji bo afirandina şêwazên di projeya Android-ê de, em Gradle bikar tînin, daneyên pergala sêwiranê vediguhezînin şêwazên di forma XML de. Di heman demê de, me gelek jeneratorên astên cihêreng hene:
- Bingehîn. Daneyên primitives ji bo jeneratorên asta bilind têne pars kirin.
- Kanî. Wêne, îkon û grafikên din dakêşin.
- Perçe. Ew ji bo her pêkhateyê têne nivîsandin, ku diyar dike ka kîjan taybetmendî û çawa wan wergerîne şêwazê.
Serlêdan berdan
Piştî ku sêwiraner pêkhateyek nû xêz kirin an yekek heyî ji nû ve dîzayn kirin, ev guhertin di pergala sêwiranê de têne xwarin. Pêşdebirên her platformê hilberîna koda xwe baş rast dikin da ku piştgiriyê bidin guhertinan. Piştî vê yekê, ew dikare di pêkanîna fonksiyonên nû yên ku ev pêkhatî hewce ye were bikar anîn. Bi vî rengî, danûstendina bi pergala sêwiranê re di demek rast de çênabe, lê tenê di dema berhevkirina berdanên nû de. Ev nêzîkatî di heman demê de rê dide kontrolkirina çêtir li ser pêvajoya veguheztina daneyê û fonksiyona kodê di projeyên pêşkeftina xerîdar de misoger dike.
Encam
Ev salek e ku pergala sêwiranê bûye beşek ji binesaziya ku piştgirî dide pêşkeftina sînemaya serhêl Ivy, û em jixwe dikarin hin encaman derxînin:
- Ev projeyek mezin û tevlihev e ku hewceyê çavkaniyên domdar ên domdar hewce dike.
- Vê yekê hişt ku em zimanê xweya dîtbarî ya xaç-platformê ya bêhempa biafirînin ku armancên karûbarê vîdyoya serhêl pêk tîne.
- Êdî platformên me yên ji hêla dîtbarî û fonksiyonel ve dereng nemane.
Pêşdîtina pêkhateyên pergala sêwirana Ivy -
Source: www.habr.com