Lati UI-kit si eto apẹrẹ

Ivy online cinima iriri

Nigbati ni ibẹrẹ ti 2017 a akọkọ ro nipa ṣiṣẹda ara wa oniru-to-koodu ifijiṣẹ eto, ọpọlọpọ awọn ti wa tẹlẹ sọrọ nipa o ati diẹ ninu awọn ti ani n ṣe o. Sibẹsibẹ, titi di oni diẹ ni a mọ nipa iriri ti kikọ awọn ọna ṣiṣe apẹrẹ agbelebu, ati pe ko si awọn ilana ti o han gbangba ati ti a fihan ti n ṣalaye awọn imọ-ẹrọ ati awọn ọna fun iru iyipada ti ilana imuse apẹrẹ sinu ọja ti n ṣiṣẹ tẹlẹ. Ati nipasẹ “awọn paati ninu koodu” wọn nigbagbogbo tumọ si awọn nkan ti o yatọ pupọ.

Lati UI-kit si eto apẹrẹ
Nibayi, ile-iṣẹ naa ṣe ilọpo meji oṣiṣẹ rẹ ni ọdun lẹhin ọdun - o jẹ dandan lati ṣe iwọn ẹka apẹrẹ ati mu awọn ilana ti ṣiṣẹda ati gbigbe awọn ipilẹ fun idagbasoke. A ṣe isodipupo gbogbo eyi nipasẹ “zoo” ti awọn iru ẹrọ ti o nilo lati ṣe atilẹyin, ati pe a ni irisi pandemonium ti Babiloni, eyiti ko ni anfani lati “ṣe ni deede” ati ṣe ipilẹṣẹ owo-wiwọle. Idagbasoke ti awọn iru ẹrọ nigbagbogbo tẹsiwaju ni afiwe, ati pe iṣẹ ṣiṣe kanna le ṣe idasilẹ lori awọn iru ẹrọ oriṣiriṣi pẹlu aisun ti awọn oṣu pupọ.

Lati UI-kit si eto apẹrẹ
Awọn eto iṣeto lọtọ fun pẹpẹ kọọkan

Ni aṣa, a bẹrẹ pẹlu awọn iṣoro ti eto apẹrẹ kan yoo ṣe iranlọwọ lati yanju ati ṣe agbekalẹ awọn ibeere fun apẹrẹ rẹ. Ni afikun si ṣiṣẹda ede wiwo ti iṣọkan, jijẹ iyara ti ifilelẹ ati idagbasoke, ati imudara didara ọja lapapọ, o ṣe pataki lati ṣọkan apẹrẹ naa bi o ti ṣee ṣe. Eyi jẹ pataki ki idagbasoke iṣẹ ṣiṣe ṣee ṣe lori gbogbo awọn iru ẹrọ wa ni nigbakannaa: Oju opo wẹẹbu, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox Ọkan, PS4, Roku - laisi ṣiṣẹ lori ọkọọkan wọn lọtọ . Ati pe a ṣe!

Apẹrẹ → data

Nigbati awọn adehun ipilẹ laarin ọja ati awọn apa idagbasoke ti de, a joko lati yan akopọ imọ-ẹrọ ati ṣiṣẹ awọn alaye ti gbogbo ilana - lati ipilẹ si idasilẹ. Lati ṣe adaṣe ni kikun ilana ti gbigbe apẹrẹ si idagbasoke, a ṣawari aṣayan ti sisọ awọn paramita paati taara lati awọn faili Sketch pẹlu awọn ipilẹ. O wa jade pe wiwa awọn ege koodu ti a nilo ati yiyo awọn aye ti a nilo jẹ iṣẹ ṣiṣe eka ati ti o lewu. Ni akọkọ, awọn apẹẹrẹ yoo ni lati ṣọra gidigidi ni sisọ gbogbo awọn fẹlẹfẹlẹ ti koodu orisun, ni ẹẹkeji, eyi nikan ṣiṣẹ fun awọn paati ti o rọrun julọ, ati ni ẹkẹta, igbẹkẹle lori imọ-ẹrọ ẹnikan ati eto koodu ti ipilẹṣẹ Sketch atilẹba jẹ ewu ọjọ iwaju ti gbogbo ise agbese. A pinnu lati kọ adaṣe silẹ ni agbegbe yii. Eyi ni bii eniyan akọkọ ṣe farahan ninu ẹgbẹ eto apẹrẹ, eyiti igbewọle rẹ jẹ awọn ipilẹ apẹrẹ, ati abajade jẹ data ti n ṣapejuwe gbogbo awọn aye ti awọn paati ati aṣẹ ni aṣẹ ni ibamu si ilana apẹrẹ atomiki.

Ohun kan ṣoṣo ti o kù lati ṣe ni ibiti ati bii o ṣe le tọju data naa, bii o ṣe le gbe lọ si idagbasoke ati bii o ṣe le tumọ rẹ ni idagbasoke lori gbogbo awọn iru ẹrọ ti a ṣe atilẹyin. Aṣalẹ dawọ lati jẹ languid ... Abajade ti awọn ipade deede ti ẹgbẹ iṣẹ ti o ni awọn apẹẹrẹ ati awọn oludari ẹgbẹ lati ori pẹpẹ kọọkan jẹ adehun lori atẹle naa.

A fi ọwọ ṣe itọka wiwo wiwo sinu awọn eroja atomiki: awọn nkọwe, awọn awọ, akoyawo, awọn indents, awọn iyipo, awọn aami, awọn aworan ati awọn akoko fun awọn ohun idanilaraya. Ati pe a gba lati awọn bọtini yii, awọn igbewọle, awọn apoti ayẹwo, awọn ẹrọ ailorukọ kaadi banki, ati bẹbẹ lọ A fi awọn orukọ ti kii ṣe itumọ si awọn aza ti eyikeyi awọn ipele, ayafi fun awọn aami, fun apẹẹrẹ, awọn orukọ ti awọn ilu, awọn orukọ ti nymphs, Pokemon, ọkọ ayọkẹlẹ brands... Nibẹ ni nikan kan majemu - awọn akojọ ko yẹ ki o wa ni ti re ṣaaju ki o to , bawo ni awọn aza pari - show gbọdọ lọ! O yẹ ki o ko gbe lọ pẹlu awọn atunmọ, ki o ko ni lati ṣafikun bọtini aarin laarin “kekere” ati “alabọde,” fun apẹẹrẹ.

Ede wiwo

A fi awọn olupilẹṣẹ silẹ lati ronu bi o ṣe le fipamọ ati gbe data ni ọna ti o baamu gbogbo awọn iru ẹrọ, ati apẹrẹ ni lati ṣe apẹrẹ awọn eroja wiwo ti o le dara dara ati ṣiṣẹ ni imunadoko kọja gbogbo ọkọ oju-omi kekere ti awọn ẹrọ atilẹyin.

Ni iṣaaju, a ti ṣakoso tẹlẹ lati “idanwo” pupọ julọ awọn eroja apẹrẹ ninu ohun elo kan fun Windows 10, eyiti o jẹ pẹpẹ tuntun fun wa ni akoko yẹn, iyẹn ni, o nilo ṣiṣe ati idagbasoke “lati ibere.” Nipa yiya rẹ, a ni anfani lati mura ati idanwo pupọ julọ awọn paati ati loye eyiti ninu wọn yẹ ki o wa ninu eto apẹrẹ Eevee iwaju. Laisi iru apoti iyanrin, iru iriri bẹẹ le ṣee gba nipasẹ nọmba nla ti awọn iterations lori awọn iru ẹrọ ti n ṣiṣẹ tẹlẹ, ati pe eyi yoo gba diẹ sii ju ọdun kan lọ.

Lilo awọn paati kanna lori awọn iru ẹrọ oriṣiriṣi dinku nọmba awọn ipilẹ ati titobi data ti eto apẹrẹ ni pataki, nitorinaa apẹrẹ naa ni lati yanju iṣoro kan diẹ sii, ni iṣaaju ko ṣe apejuwe ninu awọn iṣe ti apẹrẹ ọja ati idagbasoke - bii, fun apẹẹrẹ, Ṣe bọtini kan fun awọn foonu ati awọn tabulẹti le tun lo lori awọn TV? Ati kini o yẹ ki a ṣe pẹlu awọn iwọn ti awọn nkọwe ati awọn eroja lori iru awọn iru ẹrọ oriṣiriṣi?

O han ni, o jẹ dandan lati ṣe apẹrẹ agbekorọ apọjuwọn iru ẹrọ agbelebu ti yoo ṣeto ọrọ ati awọn iwọn eroja ti a nilo fun pẹpẹ kọọkan pato. Gẹgẹbi aaye ibẹrẹ fun akoj, a yan iwọn ati nọmba ti awọn panini fiimu ti a fẹ lati rii loju iboju kan pato ati, da lori eyi, a ṣe agbekalẹ ofin kan fun ṣiṣe awọn ọwọn akoj, ti pese pe iwọn ti iwe kan jẹ dogba. si awọn iwọn ti panini.

Lati UI-kit si eto apẹrẹ
Bayi a nilo lati mu gbogbo awọn iboju nla wa si iwọn ifilelẹ kanna ati ki o baamu wọn sinu akoj ti o wọpọ. Apple TV ati Roku jẹ apẹrẹ ni iwọn 1920x1080, Android TV - 960x540, Smart TVs, da lori olutaja, jẹ kanna, ṣugbọn nigbakan 1280x720. Nigbati ohun elo naa ba ṣe ati ṣafihan lori awọn iboju HD ni kikun, 960 jẹ isodipupo nipasẹ 2, 1280 jẹ isodipupo nipasẹ 1,33, ati pe 1920 jẹjade bi o ti jẹ.

Sisọ awọn alaye alaidun, a wa si ipari pe ni gbogbogbo gbogbo awọn iboju, pẹlu awọn iboju tẹlifisiọnu, ni awọn ofin ti awọn eroja ati awọn iwọn wọn, ti a bo nipasẹ apẹrẹ apẹrẹ kan, ati gbogbo awọn iboju tẹlifisiọnu jẹ ọran pataki ti akoj agbekọja gbogbogbo, ati pe o ni awọn ọwọn marun tabi mẹfa, bi apapọ tabulẹti tabi tabili tabili. Tani o nifẹ si awọn alaye, lọ ninu awọn asọye.

Lati UI-kit si eto apẹrẹ
UI ẹyọkan fun gbogbo awọn iru ẹrọ

Bayi, lati fa ẹya tuntun, a ko nilo lati fa awọn ipilẹ fun pẹpẹ kọọkan, pẹlu awọn aṣayan isọdi fun ọkọọkan wọn. O to lati ṣafihan iṣeto kan ati ibaramu rẹ fun gbogbo awọn iru ẹrọ ati awọn ẹrọ ti iwọn eyikeyi: awọn foonu - 320-599, ohun gbogbo miiran - 600-1280.

Data → idagbasoke

Nitoribẹẹ, bi a ṣe fẹ lati ṣaṣeyọri apẹrẹ iṣọkan patapata, pẹpẹ kọọkan ni awọn ẹya alailẹgbẹ tirẹ. Paapaa botilẹjẹpe oju opo wẹẹbu mejeeji ati Smart TV lo akopọ ReactJS + TypeScript, ohun elo Smart TV nṣiṣẹ lori julọ WebKit ati awọn alabara Presto ati nitorinaa ko le pin awọn aza pẹlu wẹẹbu. Ati awọn iwe iroyin imeeli ti fi agbara mu patapata lati ṣiṣẹ pẹlu ifilelẹ tabili. Ni akoko kanna, ko si ọkan ninu awọn iru ẹrọ ti kii ṣe html ti o lo tabi gbero lati lo Ilu abinibi React tabi eyikeyi awọn afọwọṣe rẹ, iberu ibajẹ iṣẹ ṣiṣe, niwọn igba ti a ni ọpọlọpọ awọn ipalemo aṣa, awọn ikojọpọ pẹlu ọgbọn imudojuiwọn eka, awọn aworan ati awọn fidio. Nitorinaa, ero ti o wọpọ ti jiṣẹ awọn aza CSS ti a ti ṣetan tabi awọn paati React ko dara fun wa. Nitorinaa, a pinnu lati tan kaakiri data ni ọna kika JSON, ti n ṣapejuwe awọn iye ni fọọmu asọye abọtẹlẹ.

Nitorina ohun-ini rounding: 8 Windows 10 app yipada si CornerRadius="8", ayelujara - border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
Ohun ini offsetTop: 12 Onibara wẹẹbu kanna ni awọn ọran oriṣiriṣi le tumọ bi top, margin-top, padding-top tabi transform

Alaye ti apejuwe naa tun tumọ si pe ti pẹpẹ ti imọ-ẹrọ ko ba le lo ohun-ini tabi iye rẹ, o le foju rẹ. Ni awọn ofin ti ọrọ-ọrọ, a ṣe iru ede Esperanto kan: diẹ ninu wọn ni a mu lati Android, diẹ ninu SVG, diẹ ninu lati CSS.

Ti o ba wa lori pẹpẹ kan pato o nilo lati ṣafihan awọn eroja ni oriṣiriṣi, a ti ṣe imuse agbara lati gbe iran data ti o baamu ni irisi faili JSON lọtọ. Fun apẹẹrẹ, ipo "ni idojukọ" fun Smart TV n ṣalaye iyipada ni ipo ti ọrọ labẹ panini, eyi ti o tumọ si fun iru ẹrọ yii paati ni iye ti ohun-ini "indent" yoo ni awọn aaye indentation 8 ti o nilo. Botilẹjẹpe eyi ṣe idiju awọn amayederun ti eto apẹrẹ, o funni ni alefa afikun ti ominira, nlọ wa pẹlu aye lati ṣakoso “aiṣedeede” wiwo ti awọn iru ẹrọ tikararẹ, ati pe ki o ma ṣe ijẹmọ si faaji ti a ṣẹda.

Lati UI-kit si eto apẹrẹ

Awọn aworan aworan

Aworan aworan ni ọja oni-nọmba nigbagbogbo jẹ iwọn didun ati kii ṣe koko-ọrọ ti o rọrun julọ, nigbagbogbo nilo oluṣeto lọtọ. Ọpọlọpọ awọn glyphs nigbagbogbo wa, ọkọọkan wọn ni awọn titobi pupọ ati awọn awọ, ati awọn iru ẹrọ nigbagbogbo nilo wọn ni awọn ọna kika oriṣiriṣi. Ni gbogbogbo, ko si idi kan lati ma fi gbogbo eyi sinu eto apẹrẹ.

Lati UI-kit si eto apẹrẹ
Awọn Glyphs ti kojọpọ ni ọna kika vector SVG, ati awọn iye awọ ti rọpo laifọwọyi pẹlu awọn oniyipada. Awọn ohun elo alabara le gba wọn ṣetan lati lo - ni eyikeyi ọna kika ati awọ.

Awotẹlẹ

Lori oke ti data JSON, a kowe ohun elo kan fun awotẹlẹ awọn paati – ohun elo JS kan ti o kọja data JSON lori fo nipasẹ isamisi rẹ ati awọn olupilẹṣẹ ara, ati ṣafihan awọn iyatọ oriṣiriṣi ti paati kọọkan ninu ẹrọ aṣawakiri. Ni pataki, awotẹlẹ jẹ alabara kanna bi awọn ohun elo Syeed ati ṣiṣẹ pẹlu data kanna.

Ọna to rọọrun lati ni oye bi paati kan pato ṣe n ṣiṣẹ jẹ nipa ibaraenisọrọ pẹlu rẹ. Nitorinaa, a ko lo awọn irinṣẹ bii Iwe itan-akọọlẹ, ṣugbọn ṣe awotẹlẹ ibaraenisepo - o le fi ọwọ kan, aaye, tẹ… Nigbati o ba ṣafikun paati tuntun si eto apẹrẹ, o han ninu awotẹlẹ ki awọn iru ẹrọ ni nkan lati dojukọ nigbati imuse rẹ.

Iwe akosilẹ

Da lori data ti a pese si awọn iru ẹrọ ni irisi JSON, awọn iwe aṣẹ fun awọn paati jẹ ipilẹṣẹ laifọwọyi. Atokọ ti awọn ohun-ini ati awọn iru awọn iye ti o ṣeeṣe ninu ọkọọkan wọn jẹ apejuwe. Lẹhin iran-laifọwọyi, alaye naa le ṣe alaye pẹlu ọwọ ati pe apejuwe ọrọ le ṣafikun. Awotẹlẹ ati iwe jẹ itọkasi-agbelebu si ara wọn ni ipele ti paati kọọkan, ati pe gbogbo alaye ti o wa ninu iwe naa wa fun awọn olupilẹṣẹ ni irisi awọn faili JSON afikun.

Deprecator

Ohun miiran ti o ṣe pataki ni agbara lati rọpo ati imudojuiwọn awọn paati ti o wa lori akoko. Eto apẹrẹ ti kọ ẹkọ lati sọ fun awọn olupilẹṣẹ kini awọn ohun-ini tabi paapaa gbogbo awọn paati ko ṣee lo ati yọ wọn kuro ni kete ti wọn ko ba lo lori gbogbo awọn iru ẹrọ. Ọpọlọpọ iṣẹ “Afowoyi” tun wa ninu ilana yii, ṣugbọn a ko duro jẹ.

Idagbasoke onibara

Laisi iyemeji, ipele ti o nira julọ ni itumọ ti data eto apẹrẹ ni koodu ti gbogbo awọn iru ẹrọ ti a ṣe atilẹyin. Ti, fun apẹẹrẹ, awọn grids modular lori oju opo wẹẹbu kii ṣe nkan tuntun, lẹhinna awọn olupilẹṣẹ ti awọn ohun elo alagbeka abinibi fun iOS ati Android ṣiṣẹ takuntakun ṣaaju ki wọn to pinnu bi wọn ṣe le gbe pẹlu rẹ.

Lati ṣeto awọn iboju ohun elo iOS, a lo awọn ọna ṣiṣe ipilẹ meji ti a pese nipasẹ iviUIKit: ifilelẹ awọn eroja ọfẹ ati ifilelẹ ti awọn akojọpọ awọn eroja. A lo VIPER, ati gbogbo ibaraenisepo pẹlu iviUIKit ni ogidi ni Wo, ati julọ ibaraenisepo pẹlu Apple UIKit ti wa ni ogidi ni iviUIKit. Awọn iwọn ati iṣeto ti awọn eroja jẹ pato ni awọn ofin ti awọn ọwọn ati awọn ẹya syntactic ti o ṣiṣẹ lori oke awọn ihamọ iOS SDK abinibi, ti o jẹ ki wọn wulo diẹ sii. Eyi ni pataki ni irọrun igbesi aye wa nigbati a n ṣiṣẹ pẹlu UICollectionView. A ti kọ ọpọlọpọ awọn murasilẹ aṣa fun awọn ipalemo, pẹlu awọn idiju pupọ. O kere koodu alabara ati pe o di asọye.

Lati ṣe ipilẹṣẹ awọn aṣa ni iṣẹ akanṣe Android, a lo Gradle, titan data eto apẹrẹ sinu awọn aza ni ọna kika XML. Ni akoko kanna, a ni ọpọlọpọ awọn olupilẹṣẹ ti awọn ipele oriṣiriṣi:

  • Ipilẹ. Awọn data ti primitives fun awọn olupilẹṣẹ ipele ti o ga julọ ti wa ni itọka.
  • Awọn orisun. Ṣe igbasilẹ awọn aworan, awọn aami, ati awọn eya aworan miiran.
  • Ẹya ara ẹrọ. Wọn ti kọ fun paati kọọkan, eyiti o ṣe apejuwe kini awọn ohun-ini ati bi o ṣe le tumọ wọn sinu awọn aza.

Awọn idasilẹ ohun elo

Lẹhin ti awọn apẹẹrẹ ti fa paati tuntun tabi tun ṣe ọkan ti o wa tẹlẹ, awọn ayipada wọnyi jẹ ifunni sinu eto apẹrẹ. Awọn olupilẹṣẹ ti pẹpẹ kọọkan n ṣe atunṣe iran koodu wọn lati ṣe atilẹyin awọn ayipada. Lẹhin eyi, o le ṣee lo ni imuse ti iṣẹ-ṣiṣe titun nibiti a ti nilo paati yii. Nitorinaa, ibaraenisepo pẹlu eto apẹrẹ ko waye ni akoko gidi, ṣugbọn nikan ni akoko apejọ awọn idasilẹ tuntun. Ọna yii tun ngbanilaaye fun iṣakoso to dara julọ lori ilana gbigbe data ati idaniloju iṣẹ ṣiṣe koodu ni awọn iṣẹ idagbasoke alabara.

Awọn esi

O ti jẹ ọdun kan lati igba ti eto apẹrẹ ti di apakan ti awọn amayederun ti n ṣe atilẹyin idagbasoke ti sinima ori ayelujara Ivy, ati pe a le fa awọn ipinnu diẹ tẹlẹ:

  • Eyi jẹ iṣẹ akanṣe nla ati eka ti o nilo awọn orisun iyasọtọ igbagbogbo.
  • Eyi gba wa laaye lati ṣẹda ede alakọja alailẹgbẹ ti ara wa ti o pade awọn ibi-afẹde ti iṣẹ fidio ori ayelujara.
  • A ko ni oju ati awọn iru ẹrọ aisun iṣẹ mọ.

Awotẹlẹ ti awọn paati eto apẹrẹ Ivy - design.ivi.ru

orisun: www.habr.com

Fi ọrọìwòye kun