Khibrad shaleemo online Ivy
Markii bilawgii 2017-kii aan marka hore ka fikirnay abuurista nidaamkeena qaabaynta-koodka bixinta nidaamka, qaar badan ayaa horeyba uga hadlay qaarna xitaa way sameynayeen. Si kastaba ha ahaatee, ilaa maantadan la joogo wax yar ayaa laga yaqaanaa waayo-aragnimada dhismaha nidaamyada naqshadaynta isku-dhafan, mana jirin cuntooyin cad oo la xaqiijiyay oo qeexaya teknoolajiyada iyo hababka isbeddelka noocan oo kale ah ee habka hirgelinta naqshadeynta ee badeecad horay u shaqeysa. Iyo "qaybaha koodhka" waxay badanaa ula jeedaan waxyaabo aad u kala duwan.
Dhanka kale, shirkaddu waxay labanlaabtay shaqaalaheeda sanadba sanadka ka dambeeya - waxay ahayd lagama maarmaan in la cabbiro qaybta naqshadeynta iyo kor u qaadida hababka abuurista iyo wareejinta qaababka horumarinta. Waxaas oo dhan waxaan ku dhufaneynaa "xayawaanka" ee goobaha u baahan in la taageero, waxaanan heleynaa muuqaal ah pandemonium Baabiloon, kaas oo aan si fudud u awoodin inuu "si caadi ah u sameeyo" oo uu soo saaro dakhli. Horumarinta dhufto ee inta badan waxay ku socotay si isbarbar ah, isla shaqeynta ayaa laga yaabaa in lagu sii daayo meelo kala duwan oo leh dhowr bilood.
Habayn gooni ah oo madal kasta ah
Dhaqan ahaan, waxaan ku bilownay dhibaatooyin in nidaamka naqshadeynta uu ka caawin doono xallinta iyo dejinta shuruudaha naqshadeynta. Marka laga soo tago abuurista luqad muuqaal midaysan, kordhinta xawaaraha qaabaynta iyo horumarka, iyo hagaajinta tayada badeecadda guud ahaan, waxa muhiim ahayd in la mideeyo naqshadda intii suurtogal ah. Tani waa lagama maarmaan si horumarinta shaqeyntu ay suurtogal u noqoto dhammaan dhufto eeyada isku mar: Web, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - iyada oo aan mid kasta oo iyaga ka mid ah si gooni ah u shaqeynayo . Anaguna waanu samaynay!
Naqshad β xogta
Markii heshiisyada aasaasiga ah ee u dhexeeya qaybaha badeecada iyo horumarinta la gaarey, waxaan u fadhiisanay inaan doorano xirmo tignoolajiyada oo aan ka shaqeyno faahfaahinta habka oo dhan - laga bilaabo qaabeynta ilaa sii deynta. Si aan si buuxda u habaynno habka u wareejinta nashqada horumarka, waxaanu sahaminay ikhtiyaarka kala soocida xuduudaha qaybaha si toos ah faylalka Sketch oo leh qaabayn. Waxaa soo baxday in helista qaybaha code ee aan u baahanahay iyo soo saarista halbeegyada aan u baahanahay ay ahayd hawl adag oo khatar ah. Marka hore, naqshadeeyayaashu waa inay aad uga taxaddaraan magacaabista dhammaan lakabyada koodhka isha, marka labaad, tani waxay u shaqeysaa oo keliya qaybaha ugu fudud, iyo marka saddexaad, ku tiirsanaanta tignoolajiyada qof kale iyo qaab-dhismeedka code ee qaabka asalka ah ee Sketch waxay khatar gelinaysaa mustaqbalka oo dhan. mashruuc. Waxaan go'aansanay inaan ka tagno automation-ka aaggan. Tani waa sida qofka ugu horreeya uu uga dhex muuqday kooxda nidaamka naqshadaynta, kuwaas oo wax-soo-saarkoodu yahay qaabaynta naqshadaynta, wax-soo-saarkuna waa xog qeexaysa dhammaan cabbirrada qaybaha oo si heersare ah loo dalbay iyadoo loo eegayo habka naqshadaynta atomiga.
Waxa kaliya ee hadhay in la sameeyo waxay ahayd halka iyo sida loo kaydiyo xogta, sida loogu wareejiyo horumarka iyo sida loo fasiro horumarinta dhammaan goobaha aan taageerno. Fiidnimadii ayaa joojisay in ay noqoto mid caajis ah ... Natiijada shirarka joogtada ah ee kooxda shaqada ee ka kooban naqshadeeyayaasha iyo kooxda hogaamiyaasha madal kasta waxay ahayd heshiis ku saabsan kuwan soo socda.
Waxaanu gacanta ku kala qaybinnaa muuqaalka walxaha atomiga ah: xarfaha, midabada, daah-furnaanta, faleemooyinka, wareegyada, summada, sawirrada iyo muddada dhaqdhaqaaqa. Oo waxaan ka soo ururin badhamada this, gelinta, sanduuqyada jeeg, widgets kaarka bangiga, iwm. Waxaan ku meeleeyaa magacyo aan semantic qaababka mid ka mid ah heerarka, marka laga reebo icons, tusaale ahaan, magacyada magaalooyinka, magacyada nymphs, Pokemon, baabuur. brands ... Waxaa jira hal shuruud oo kaliya - liiska waa in aan la daalin ka hor , sida qaababka dhamaadka - show waa inuu tago! Waa inaadan ku qaadin semantics, si aadan ugu darin badhanka dhexe ee u dhexeeya "yar" iyo "dhexdhexaad," tusaale ahaan.
Luqada muuqaalka
Horumarinta ayaa loo daayay inay ka fikiraan sida loo kaydiyo oo loo wareejiyo xogta hab ku habboon dhammaan aaladaha, iyo naqshadeynta waxay ahayd inay naqshadeeyaan walxaha interface kuwaas oo u ekaan kara mid wanaagsan oo si wax ku ool ah uga shaqeynaya dhammaan qalabka la taageeray.
Markii hore, waxaan horeyba ugu suurtagelinay inaan "tijaabinno" inta badan walxaha naqshadeynta ee codsiga Windows 10, kaas oo wakhtigaas noo ahaa madal cusub, taas oo ah, waxay u baahan tahay samaynta iyo horumarinta "laga bilaabo xoqin." Sawirka, waxaan awoodnay inaan diyaarino oo tijaabino inta badan qaybaha oo aan fahanno mid ka mid ah iyaga oo loo maleynayo in lagu daro nidaamka naqshadeynta Eevee mustaqbalka. Sanduuqa bacaadka ah la'aanteed, waayo-aragnimada noocan oo kale ah waxaa lagu heli karaa oo kaliya tiro badan oo ku celcelin ah oo ku saabsan goobaha horeba u shaqeynayay, tani waxay qaadan doontaa in ka badan hal sano.
Dib-u-isticmaalka qaybaha isku midka ah ee qaybaha kala duwan waxay yareynayaan tirada qaababka iyo xogta xogta nidaamka naqshadeynta si weyn, sidaas darteed naqshadeynta waxay ahayd in ay xalliso hal dhibaato oo kale, oo aan hore loo sheegin habdhaqanka naqshadeynta alaabta iyo horumarinta - sida, tusaale ahaan, badhanka telefoonada iyo tablets-ka dib ma loo isticmaali karaa TV-yada? Maxaan ku samaynaa cabbirada xarfaha iyo curiyeyaasha ku yaal goobaha kala duwan ee sida?
Sida iska cad, waxay ahayd lama huraan in la naqshadeeyo shabag-madal-madax-dhaaf ah kaas oo dejin doona cabbirrada qoraalka iyo walxaha aan ugu baahanahay goob kasta oo gaar ah. Bilawga shabkada, waxaanu dooranay xajmiga iyo tirada sawirada filimada ee aanu rabno inaanu ku aragno shaashad gaar ah, anagoo taas ka duulayna, waxaanu dejinay xeer lagu dhisayo tiirarka xadhkaha, waase haddii ballaca hal tiir uu siman yahay. ilaa ballaca boodhka.
Hadda waxaan u baahannahay inaan keeno dhammaan shaashadaha waaweyn ee cabbirka qaabeynta oo isku mid ah oo ku habboon sharoobada caadiga ah. Apple TV iyo Roku waxa loo nashqadeeyay cabbir dhan 1920x1080, Android TV β 960x540, Smart TVs, oo ku xidhan iibiyaha, waa isku mid, laakiin mararka qaar 1280x720. Marka app-ka la soo bandhigo oo lagu soo bandhigo shaashadaha HD Full, 960 waxaa lagu dhuftey 2, 1280 waxaa lagu dhuftey 1,33, 1920na waa la soo saarayaa sidiisii.
Ka boodista faahfaahinta caajiska ah, waxaan gaadhnay in guud ahaan dhammaan shaashadaha, oo ay ku jiraan shaashadaha telefishinka, marka la eego walxaha iyo cabbirkooda, ay ku daboolan yihiin hal naqshad naqshadeed, iyo dhammaan shaashadaha telefishinku waa kiis gaar ah oo ka mid ah shabakadaha guud ee iskutallaabta. oo ka kooban shan ama lix tiir, sida celceliska tablet-ka ama miiska. Yaa xiiseynaya faahfaahinta, gal faallooyinka.
Hal UI ee dhammaan aaladaha
Hadda, si loo sawiro sifo cusub, uma baahnid inaan u sawirno jaangooyo mid kasta oo ka mid ah aaladaha, iyo xulashooyinka la qabsiga mid kasta oo iyaga ka mid ah. Waa ku filan in la muujiyo hal qaab iyo la qabsigeeda dhammaan aaladaha iyo aaladaha ballac kasta: telefoonada - 320-599, wax kasta oo kale - 600-1280.
Xogta β horumarinta
Dabcan, inta aan jeclaan lahayn inaan gaarno naqshad gebi ahaanba midaysan, madal kasta waxay leedahay astaamo u gaar ah. In kasta oo shabkada iyo Smart TV-ga labaduba ay isticmaalaan kaydka ReactJS + TypeScript, abka Smart TV waxa uu ku shaqeeyaa macaamiisha WebKit iyo Presto ee dhaxalka ah sidaas darteedna qaab uma wadaagi karaan shabakadda. Iyo wargeysyada iimaylka si buuxda ayaa loogu qasbay inay la shaqeeyaan qaabeynta shaxda. Isla mar ahaantaana, mid ka mid ah aaladaha aan html ahayn midkoodna ma isticmaalo ama ma qorsheynayo inuu isticmaalo React Native ama mid ka mid ah analoogyadiisa, iyagoo ka baqaya hoos u dhaca waxqabadka, maadaama aan haysano qaabab badan oo caado ah, aruurin leh caqli-gal cusub oo adag, sawirro iyo fiidiyowyo. Sidaa darteed, nidaamka guud ee keenista qaababka CSS ee diyaarsan ama qaybaha falcelinta maaha mid nagu haboon. Sidaa darteed, waxaan go'aansanay inaan ku gudbino xogta qaabka JSON, annagoo ku sifeynay qiyamka qaab cadeyn ah.
Markaa hanti
rounding: 8Windows 10 App-ka ayaa loo beddelaaCornerRadius="8", shabakada -border-radius: 8pxAndroid-android:radius="8dp", iOS -self.layer.cornerRadius = 8.0.
HantioffsetTop: 12isla macmiilka shabakadda ee xaalado kala duwan ayaa u tarjumi kara sidatop,margin-top,padding-topamatransform
Sharaxaada ku dhawaaqida sidoo kale waxay tusinaysaa in haddii madal farsamo ahaan aanay isticmaali karin hanti ama qiimaheeda, ay iska indho tiri karto. Xagga erey bixinta, waxaanu samaynay nooc ka mid ah luqadda Esperanto: qaar waxa laga soo qaatay Android, qaar SVG, qaarna CSS.
Haddii goob gaar ah aad u baahan tahay inaad si kala duwan u soo bandhigto curiyeyaasha, waxaanu hirgelinay awoodda lagu wareejinayo jiilka xogta u dhiganta qaab fayl gaar ah oo JSON ah. Tusaale ahaan, gobolka "fiirsashada" ee TV-ga Smart wuxuu tilmaamayaa isbeddel ku yimaada booska qoraalka ee hoosta boodhka, taas oo macnaheedu yahay goobtan qaybtan ee qiimaha "indent" hantida waxay ka koobnaan doontaa 8 dhibcood ee gelinta ee ay u baahan tahay. Inkasta oo tani ay adkeynayso kaabayaasha nidaamka naqshadeynta, waxay siinaysaa xoriyad dheeraad ah, taas oo naga tagaysa fursad aan ku maarayn karno "la'aanta" muuqaalka ah ee dhufto ee nafteena, oo aan la afduubin dhismaha aan abuurnay.
Sawirro
Iconography ee alaabta dhijitaalka ah had iyo jeer waa mug weyn mana aha mashruuc-hoosaadka ugu fudud, inta badan waxay u baahan tahay naqshadeeye gooni ah. Had iyo jeer waxaa jira glyphs badan, mid kasta oo iyaga ka mid ah wuxuu leeyahay dhowr cabbir iyo midabyo, iyo dhufto ee badanaa waxay u baahan yihiin qaabab kala duwan. Guud ahaan, ma jirto sabab aan waxaas oo dhan u gelin nidaamka naqshadeynta.
Glyphs waxaa lagu raray qaabka SVG vector, iyo qiimaha midabka waxaa si toos ah loogu bedelay doorsoomayaal. Codsiyada macmiilku waxay heli karaan iyaga oo diyaar u ah in la isticmaalo - qaab iyo midab kasta.
Π Π΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡ
Dusha sare ee xogta JSON, waxaanu ku qornay qalab lagu eegi karo qaybaha - codsiga JS kaas oo gudbiya xogta JSON ee duulista iyada oo loo marayo calaamadayntiisa iyo qaab-dhaliyeyaashiisa, oo muujiya kala duwanaansho kala duwan oo qayb kasta oo browserka ah. Asal ahaan, horu-u-eegiddu waa isla macmiilka codsiyada madal waxayna ku shaqeysaa xog isku mid ah.
Sida ugu fudud ee lagu fahmi karo sida qayb gaar ahi u shaqeyso waa iyadoo lala falgalayo. Sidaa darteed, ma aan isticmaalin qalabka sida Storybook, laakiin waxaan samaynay horudhac is dhexgal ah - waxaad taaban kartaa, tilmaami kartaa, guji ... Markaad ku darto qayb cusub nidaamka naqshadeynta, waxay ka soo muuqanaysaa horudhac si ay goobuhu u helaan wax ay diiradda saaraan marka fulinteeda.
Dukumentiyada
Iyadoo lagu salaynayo xogta la siiyay aaladaha qaabka JSON, dukumeentiyada qaybaha si toos ah ayaa loo soo saarayaa. Liiska guryaha iyo noocyada suurtagalka ah ee qiimaha mid kasta oo iyaga ka mid ah ayaa lagu sifeeyay. Ka dib jiilka tooska ah, macluumaadka waxaa lagu cadeeyn karaa gacanta waxaana lagu dari karaa sharaxaad qoraal ah. Aragtida horudhaca ah iyo dukumeentiyadu waa kuwo la isu tixraacayo heerka qayb kasta, iyo dhammaan macluumaadka ku jira dukumeentigu waxay diyaar u yihiin horumariyeyaasha qaab faylal dheeraad ah oo JSON ah.
Deprecator
Baahida kale waxay ahayd awoodda lagu beddelayo laguna cusboonaysiinayo qaybaha jira waqti ka dib. Nidaamka naqshadeynta wuxuu bartay inuu u sheego horumariyeyaasha guryaha ama xitaa dhammaan qaybaha aan la isticmaali karin oo ka saar isla marka aan la isticmaalin dhammaan goobaha. Weli waxaa jira hawlo badan oo "manual" ah oo hawshan ku jira, laakiin ma joogno.
Horumarinta macmiilka
Shaki la'aan, marxaladda ugu adag waxay ahayd tarjumaadda xogta nidaamka naqshadeynta ee koodka dhammaan goobaha aan taageerno. Haddii, tusaale ahaan, shabakadaha modular-ka ee shabakada aysan ahayn wax cusub, markaa horumariyayaasha codsiyada mobilada hooyo ee iOS iyo Android waxay si adag u shaqeeyeen kahor intaanay ogaanin sida loola noolaado.
Si aan u habaynno shaashadaha codsiga IOS, waxaanu isticmaalnaa laba hab oo aasaasi ah oo ay bixiso iviUIKit: qaabaynta curiyeyaasha bilaashka ah iyo qaabaynta ururinta walxaha. Waxaan isticmaalnaa VIPER, iyo dhammaan is dhexgalka iviUIKit wuxuu ku urursan yahay View, iyo inta badan dhexgalka Apple UIKit wuxuu ku urursan yahay iviUIKit. Cabirka iyo habaynta curiyeyaasha waxa lagu cayimay tiirar iyo qaab-dhismeedyo isku mid ah oo ka shaqeeya korka caqabadaha asalka ah ee iOS SDK, taasoo ka dhigaysa kuwo la taaban karo. Tani waxay si gaar ah u fududaysay nolosheenna markaan la shaqaynayno UICollectionView. Waxaan u qornay dhowr duub oo caado u ah qaabeynta, oo ay ku jiraan kuwa aad u adag. Waxa jiray ugu yaraan koodka macmiilka oo noqday caddayn.
Si loo abuuro qaabab mashruuca Android, waxaanu isticmaalnaa Gradle, anagoo u rogaya xogta nidaamka naqshadaynta qaabab qaab XML ah. Isla mar ahaantaana, waxaanu haynaa dhawr matoor oo heerar kala duwan leh:
- Aasaas. Xogta asaasiga ah ee koronto-dhaliyeyaasha heerka sare waa la miisaamay.
- Khayraadka. Soo deji sawirada, astaanta, iyo garaafyada kale.
- Qayb. Waxay u qoran yihiin qayb kasta, kuwaas oo qeexaya waxa guryaha iyo sida loo turjumayo qaababka.
Codsiga sii daaya
Ka dib markii naqshadeeyayaashu ay sawiraan qayb cusub ama dib u habeyn ku sameeyaan mid jira, isbeddelladan waxaa lagu quudiyaa nidaamka naqshadeynta. Soosaarayaasha madal kasta ayaa si fiican u hagaajinaya jiilkooda koodka si ay u taageeraan isbeddelada. Taas ka dib, waxaa loo isticmaali karaa hirgelinta shaqeyn cusub oo qaybtan loo baahan yahay. Sidaa darteed, isdhexgalka nidaamka naqshadeynta ma dhacayso waqtiga dhabta ah, laakiin kaliya wakhtiga la ururinayo sii-deynta cusub. Habkani wuxuu sidoo kale u oggolaanayaa in si wanaagsan loo xakameeyo habka wareejinta xogta waxayna hubisaa shaqeynta code ee mashaariicda horumarinta macaamiisha.
Natiijooyinka
Waxaa laga joogaa hal sano tan iyo markii nidaamka naqshadeynta uu noqday qayb ka mid ah kaabayaasha taageeraya horumarinta shaleemada internetka ee Ivy, waxaanan horay u soo qaadan karnaa gabagabada:
- Kani waa mashruuc ballaadhan oo adag oo u baahan dhaqaale joogto ah.
- Tani waxay noo ogolaatay inaan abuurno luqadeena u gaar ah oo iskutallaab ah oo muuqaal ah oo buuxiya ujeedooyinka adeegga fiidiyaha ee khadka tooska ah.
- Hadda ma hayno goobo muuqaal iyo shaqo ahaan dib u dhac ah.
Horudhac qaybaha nidaamka naqshadaynta Ivy -
Source: www.habr.com