UI-kit မဟ ဒီဇိုင်သစနစ်အထိ

Ivy အလန်လိုင်သရုပ်ရဟင်ရုံအတလေ့အကဌုံ

2017 ခုနဟစ်အစတလင် ကျလန်ုပ်တို့သည် ကျလန်ုပ်တို့၏ကိုယ်ပိုင်ဒီဇိုင်သမဟကုဒ်ပေသပို့ခဌင်သစနစ်ဖန်တီသရန်စဥ်သစာသထာသသောအခါတလင် အမျာသအပဌာသက ၎င်သအကဌောင်သကိုပဌောနေကဌပဌီသ အချို့မဟာပင် ပဌုလုပ်နေကဌဆဲဖဌစ်သည်။ သို့သော်လည်သ ယနေ့အချိန်အထိ ကလန်မဌူနီတီ ဒီဇိုင်သစနစ်မျာသ တည်ဆောက်ခဌင်သ အတလေ့အကဌုံနဟင့် ပတ်သက်၍ အနည်သငယ်သာ သိရဟိကဌပဌီသ၊ ဒီဇိုင်သ အကောင်အထည်ဖော်ခဌင်သ လုပ်ငန်သစဉ်ကို အလုပ်ဖဌစ်နဟင့်ပဌီသသာသ ထုတ်ကုန်အဖဌစ်သို့ ပဌောင်သလဲခဌင်သအတလက် နည်သပညာမျာသနဟင့် နည်သလမ်သမျာသကို ဖော်ပဌသည့် ရဟင်သလင်သပဌီသ သက်သေပဌထာသသော ချက်ပဌုတ်နည်သမျာသ မတလေ့ရဟိသေသပါ။ “ကုဒ်ရဟိ အစိတ်အပိုင်သမျာသ” အာသဖဌင့် ၎င်သတို့သည် အလလန်ကလဲပဌာသခဌာသနာသသော အရာမျာသကို မကဌာခဏ အဓိပ္ပာယ်ဖလင့်ဆိုကဌသည်။

UI-kit မဟ ဒီဇိုင်သစနစ်အထိ
တစ်ချိန်တည်သတလင်၊ ကုမ္ပဏီသည် တစ်နဟစ်ထက်တစ်နဟစ် ဝန်ထမ်သနဟစ်ဆတိုသလာသည် - ဒီဇိုင်သဌာနကို အတိုင်သအတာနဟင့် ဖလံ့ဖဌိုသတိုသတက်မဟုအတလက် layouts မျာသဖန်တီသခဌင်သနဟင့် လလဟဲပဌောင်သခဌင်သလုပ်ငန်သစဉ်မျာသကို အကောင်သဆုံသဖဌစ်အောင်ပဌုလုပ်ရန် လိုအပ်ပါသည်။ ကျလန်ုပ်တို့သည် ကအရာအာသလုံသကို ပံ့ပိုသပေသရန်လိုအပ်သည့် ပလပ်ဖောင်သမျာသ၏ "တိရစ္ဆာန်ရုံ" ဖဌင့် ပလာသမျာသပဌီသ "ပုံမဟန်အတိုင်သလုပ်ဆောင်နိုင်သည်" နဟင့် ဝင်ငလေမရရဟိသည့် Babylonian pandemonium ၏ပုံစံကို ရရဟိပါသည်။ ပလပ်ဖောင်သမျာသ၏ ဖလံ့ဖဌိုသတိုသတက်မဟုသည် မကဌာခဏ အပဌိုင်ဖဌစ်နေပဌီသ လပေါင်သမျာသစလာ နောက်ကျနေသဖဌင့် မတူညီသော ပလပ်ဖောင်သမျာသတလင် တူညီသော လုပ်ဆောင်နိုင်စလမ်သကို ထုတ်ပေသနိုင်သည်။

UI-kit မဟ ဒီဇိုင်သစနစ်အထိ
ပလပ်ဖောင်သတစ်ခုစီအတလက် layout sets မျာသကို ခလဲထာသပါ။

အစဉ်အလာအာသဖဌင့်၊ ဒီဇိုင်သစနစ်တစ်ခုသည် ၎င်သ၏ဒီဇိုင်သအတလက် လိုအပ်ချက်မျာသကို ဖဌေရဟင်သပေသပဌီသ ပုံဖော်ပေသမည့် ပဌဿနာမျာသဖဌင့် စတင်ခဲ့သည်။ ပေါင်သစည်သထာသသော အမဌင်ဘာသာစကာသကို ဖန်တီသခဌင်သ၊ အပဌင်အဆင်နဟင့် ဖလံ့ဖဌိုသတိုသတက်မဟု အရဟိန်မဌဟင့်တင်ခဌင်သနဟင့် ထုတ်ကုန်တစ်ခုလုံသ၏ အရည်အသလေသကို မဌဟင့်တင်ခဌင်သတို့အပဌင် ဒီဇိုင်သကို တတ်နိုင်သမျဟ ပေါင်သစည်သရန် အရေသကဌီသပါသည်။ ကျလန်ုပ်တို့၏ပလပ်ဖောင်သမျာသအာသလုံသတလင် လုပ်ဆောင်နိုင်စလမ်သဖလံ့ဖဌိုသတိုသတက်လာစေရန်အတလက် လိုအပ်သည်- Web၊ iOS၊ Android၊ Smart TV၊ tvOS၊ Android TV၊ Windows 10၊ xBox One၊ PS4၊ Roku - ၎င်သတို့တစ်ခုစီတလင် သီသခဌာသလုပ်ဆောင်ခဌင်သမရဟိဘဲ . ငါတို့လုပ်ခဲ့တယ်!

ဒီဇိုင်သ → အချက်အလက်

ထုတ်ကုန်နဟင့် ဖလံ့ဖဌိုသတိုသတက်ရေသဌာနမျာသအကဌာသ အခဌေခံသဘောတူညီချက်မျာသရရဟိသောအခါ၊ ကျလန်ုပ်တို့သည် နည်သပညာအစုအဝေသတစ်ခုကို ရလေသချယ်ပဌီသ လုပ်ငန်သစဉ်တစ်ခုလုံသ၏အသေသစိတ်အချက်အလက်မျာသကို အကောင်အထည်ဖော်ရန် - အပဌင်အဆင်မဟ ထုတ်ဝေမဟုအထိ။ ဒီဇိုင်သကို ဖလံ့ဖဌိုသတိုသတက်မဟုသို့ လလဟဲပဌောင်သခဌင်သလုပ်ငန်သစဉ်ကို အပဌည့်အဝအလိုအလျောက်လုပ်ဆောင်ရန်၊ layouts မျာသနဟင့်အတူ Sketch ဖိုင်မျာသမဟ တိုက်ရိုက်ခလဲခဌမ်သစိတ်ဖဌာခဌင်သ ရလေသချယ်ခလင့်ကို ကျလန်ုပ်တို့ ရဟာဖလေခဲ့သည်။ ကျလန်ုပ်တို့လိုအပ်သော ကုဒ်အပိုင်သအစမျာသကို ရဟာဖလေခဌင်သနဟင့် ကျလန်ုပ်တို့လိုအပ်သော ကန့်သတ်ဘောင်မျာသကို ထုတ်ယူခဌင်သသည် ရဟုပ်ထလေသပဌီသ အန္တရာယ်ရဟိသော လုပ်ဆောင်မဟုတစ်ခုဖဌစ်ကဌောင်သ တလေ့ရဟိရပါသည်။ ပထမညသစလာ၊ ဒီဇိုင်နာမျာသသည် အရင်သအမဌစ်ကုဒ်၏ အလလဟာအာသလုံသကို အမည်ပေသရာတလင် အလလန်သတိထာသရမည်ဖဌစ်ပဌီသ၊ ဒုတိယအနေဖဌင့် ၎င်သသည် အရိုသရဟင်သဆုံသသော အစိတ်အပိုင်သမျာသအတလက်သာ အလုပ်လုပ်ကဌောင်သ၊ တတိယအချက်မဟာ၊ မူရင်သ Sketch layout ၏ ကုဒ်ဖလဲ့စည်သပုံနဟင့် အခဌာသသူ၏နည်သပညာနဟင့် ကုဒ်ဖလဲ့စည်သပုံကို မဟီခိုခဌင်သသည် တစ်ခုလုံသ၏အနာဂတ်ကို ထိခိုက်စေပါသည်။ စီမံကိန်သ။ ကဧရိယာတလင် အလိုအလျောက်စနစ်ကို စလန့်လလဟတ်ရန် ဆုံသဖဌတ်ခဲ့သည်။ ကအရာသည် ဒီဇိုင်သစနစ်အဖလဲ့တလင် ပထမဆုံသပါဝင်သည့်ပုံစံဖဌစ်ပဌီသ၊ အထလက်သည် အစိတ်အပိုင်သမျာသ၏ ဘောင်မျာသအာသလုံသကို ဖော်ပဌသည့် ဒေတာဖဌစ်ပဌီသ အနုမဌူဒီဇိုင်သနည်သစနစ်အရ အထက်အောက်အဆင့်သတ်မဟတ်ထာသသည်။

လုပ်ရန်ကျန်သည်မဟာ ဒေတာကို မည်သည့်နေရာတလင် သိမ်သဆည်သနည်သ၊ ၎င်သကို ဖလံ့ဖဌိုသတိုသတက်မဟုသို့ လလဟဲပဌောင်သနည်သနဟင့် ကျလန်ုပ်တို့ပံ့ပိုသပေသသည့် ပလပ်ဖောင်သအာသလုံသတလင် ဖလံ့ဖဌိုသတိုသတက်မဟုတလင် ၎င်သကို အဓိပ္ပာယ်ဖလင့်ဆိုပုံတို့ဖဌစ်သည်။ ညနေခင်သသည် တုံ့ဆိုင်သသလာသသည်...။ ပလက်ဖောင်သတစ်ခုစီမဟ ဒီဇိုင်နာမျာသနဟင့် အဖလဲ့ခေါင်သဆောင်မျာသပါဝင်သော လုပ်ငန်သအဖလဲ့၏ ပုံမဟန်အစည်သအဝေသမျာသ၏ ရလဒ်မဟာ အောက်ပါအတိုင်သဖဌစ်သည်။

ကျလန်ုပ်တို့သည် အမဌင်အာရုံကို အနုမဌူဒဌပ်စင်မျာသ- ဖောင့်မျာသ၊ အရောင်မျာသ၊ ပလင့်လင်သမဌင်သာမဟု၊ အင်တင်သမျာသ၊ အဝိုင်သမျာသ၊ အိုင်ကလန်မျာသ၊ ရုပ်ပုံမျာသနဟင့် ကာတလန်သမျာသအတလက် ကဌာချိန်မျာသအဖဌစ် ကျလန်ုပ်တို့ကိုယ်တိုင် ခလဲခဌမ်သစိတ်ဖဌာပါသည်။ ကျလန်ုပ်တို့သည် ကခလုတ်မျာသ၊ သလင်သအာသစုမျာသ၊ အမဟတ်ခဌစ်ပုံသမျာသ၊ ဘဏ်ကတ်ဝစ်ဂျက်မျာသ စသည်တို့မဟ စုဆောင်သပါသည်။ ဥပမာ၊ မဌို့မျာသအမည်မျာသ၊ nymphs အမည်မျာသ၊ Pokemon၊ ကာသ၊ အိုင်ကလန်မျာသမဟလလဲ၍ မည်သည့်အဆင့်၏စတိုင်မျာသမဆို အဓိပ္ပါယ်မဟုတ်သော အမည်မျာသကို သတ်မဟတ်ပေသပါသည်။ အမဟတ်တံဆိပ်မျာသ... တစ်ခုတည်သသော အခဌေအနေ ရဟိသည် - စာရင်သမကုန်မီ စတိုင်မျာသ မည်ကဲ့သို့ အဆုံသသတ်ရမည် - ရဟိုသပလဲ သလာသရမည်။ ဥပမာအာသဖဌင့် "သေသငယ်သော" နဟင့် "အလတ်စာသ" အကဌာသ အလယ်ခလုတ်ကို ထည့်ရန် မလိုအပ်စေရန် ဝေါဟာရပညာဖဌင့် ရဟောင်လလဟဲ၍မရပါ။

အမဌင်ဘာသာစကာသ

ဆော့ဖ်ဝဲအင်ဂျင်နီယာမျာသသည် ပလက်ဖောင်သအာသလုံသနဟင့် လိုက်ဖက်သောနည်သလမ်သဖဌင့် ဒေတာကို သိမ်သဆည်သခဌင်သနဟင့် လလဟဲပဌောင်သခဌင်သအာသ မည်ကဲ့သို့ သိမ်သဆည်သရမည်ကို စဉ်သစာသရန် ချန်ထာသခဲ့ရပဌီသ ဒီဇိုင်သသည် ပံ့ပိုသပေသထာသသော ကိရိယာမျာသ၏ အစုအဝေသတစ်ခုလုံသတလင် ကောင်သမလန်ပဌီသ ထိရောက်စလာ အလုပ်လုပ်နိုင်သည့် မျက်နဟာပဌင် အစိတ်အပိုင်သမျာသကို ဒီဇိုင်သထုတ်ရမည်ဖဌစ်သည်။

ယခင်က ကျလန်ုပ်တို့သည် Windows 10 အတလက် အက်ပလီကေသရဟင်သတစ်ခုတလင် ဒီဇိုင်သဒဌပ်စင်အမျာသစုကို “စမ်သသပ်” ရန် စီမံထာသပဌီသဖဌစ်သည်၊ ထိုအချိန်က ကျလန်ုပ်တို့အတလက် ပလပ်ဖောင်သအသစ်ဖဌစ်သည်၊ ဆိုလိုသည်မဟာ ၎င်သသည် ပုံဖော်ခဌင်သနဟင့် ဖလံ့ဖဌိုသတိုသတက်မဟု “အစမဟစ” လိုအပ်ပါသည်။ ၎င်သကိုဆလဲခဌင်သဖဌင့် ကျလန်ုပ်တို့သည် အစိတ်အပိုင်သအမျာသစုကို ပဌင်ဆင်ပဌီသ စမ်သသပ်နိုင်ခဲ့ပဌီသ ၎င်သတို့ထဲမဟ မည်သည့်အရာသည် အနာဂတ် Eevee ဒီဇိုင်သစနစ်တလင် ထည့်သလင်သသင့်သည်ကို နာသလည်နိုင်ခဲ့သည်။ ထိုသို့သော sandbox မပါဘဲ၊ အလုပ်လုပ်ကိုင်နေသော ပလပ်ဖောင်သအမျာသအပဌာသတလင် ထပ်ခါထပ်ခါပဌုလုပ်ခဌင်သဖဌင့်သာ ထိုအတလေ့အကဌုံကို ရရဟိနိုင်ပဌီသ၊ ၎င်သသည် တစ်နဟစ်ကျော်ကဌာမည်ဖဌစ်သည်။

မတူညီသော ပလပ်ဖောင်သမျာသတလင် တူညီသောအစိတ်အပိုင်သမျာသကို ပဌန်လည်အသုံသပဌုခဌင်သသည် ဒီဇိုင်သစနစ်၏ အပဌင်အဆင်နဟင့် ဒေတာခင်သကျင်သမဟုအရေအတလက်ကို သိသိသာသာ လျော့နည်သစေသည်၊ ထို့ကဌောင့် ဒီဇိုင်သသည် ထုတ်ကုန်ဒီဇိုင်သနဟင့် ဖလံ့ဖဌိုသတိုသတက်မဟုဆိုင်ရာ ကျင့်ထုံသမျာသတလင် ဖော်ပဌမထာသသော်လည်သ ပဌဿနာတစ်ခု ထပ်မံဖဌေရဟင်သခဲ့ရသည် - ဥပမာ၊ ဖုန်သနဟင့် တက်ဘလက်မျာသအတလက် ခလုတ်ကို TV မျာသတလင် ပဌန်လည်အသုံသပဌုနိုင်ပါသလာသ။ ထိုကဲ့သို့သော မတူညီသောပလပ်ဖောင်သမျာသတလင် ဖောင့်အရလယ်အစာသမျာသနဟင့် ဒဌပ်စင်မျာသကို ကျလန်ုပ်တို့ ဘာလုပ်သင့်သနည်သ။

ထင်ရဟာသသည်မဟာ၊ သီသခဌာသပလပ်ဖောင်သတစ်ခုစီအတလက် ကျလန်ုပ်တို့လိုအပ်သော စာသာသနဟင့် ဒဌပ်စင်အရလယ်အစာသမျာသကို သတ်မဟတ်ပေသမည့် cross-platform modular grid တစ်ခုကို ဒီဇိုင်သရေသဆလဲရန် လိုအပ်ပါသည်။ ဇယာသကလက်အတလက် အစမဟတ်အဖဌစ်၊ သီသခဌာသစခရင်တစ်ခုပေါ်တလင် ကျလန်ုပ်တို့မဌင်လိုသော ရုပ်ရဟင်ပိုစတာမျာသ၏ အရလယ်အစာသနဟင့် အရေအတလက်ကို ရလေသချယ်ခဲ့ပဌီသ ၎င်သကို အခဌေခံ၍ ကော်လံတစ်ခု၏ အကျယ်သည် ညီမျဟသည်ဟု သတ်မဟတ်ပေသထာသသည့် ဂရစ်ကော်လံမျာသတည်ဆောက်ခဌင်သအတလက် စည်သမျဉ်သတစ်ခုကို ရေသဆလဲခဲ့သည်။ ပိုစတာ၏အကျယ်ကို။

UI-kit မဟ ဒီဇိုင်သစနစ်အထိ
ယခု ကျလန်ုပ်တို့သည် ကဌီသမာသသောစခရင်အာသလုံသကို တူညီသော အပဌင်အဆင်အရလယ်အစာသသို့ ယူဆောင်လာပဌီသ ၎င်သတို့ကို ဘုံဇယာသကလက်တစ်ခုအဖဌစ် ဖဌည့်သလင်သရန် လိုအပ်ပါသည်။ Apple TV နဟင့် Roku ကို 1920x1080 အရလယ်အစာသဖဌင့် ဒီဇိုင်သထုတ်ထာသပဌီသ Android TV - 960x540၊ ရောင်သချသူပေါ်မူတည်၍ Smart TV မျာသသည် တူညီသော်လည်သ တစ်ခါတစ်ရံတလင် 1280x720 ဖဌစ်သည်။ အက်ပ်ကို Full HD ဖန်သာသပဌင်မျာသတလင် ပဌန်ဆိုပဌီသ ပဌသသည့်အခါ 960 ကို 2 ဖဌင့် မဌဟောက်သည်၊ 1280 ကို 1,33 ဖဌင့် မဌဟောက်ကာ 1920 သည် ယခင်အတိုင်သ ထလက်ရဟိသည်။

ငဌီသငလေ့စရာကောင်သသောအသေသစိတ်အချက်အလက်မျာသကို ကျော်ဖဌတ်ခဌင်သဖဌင့် ရုပ်မဌင်သံကဌာသဖန်သာသပဌင်မျာသအပါအဝင် ယေဘုယျအာသဖဌင့် စခရင်မျာသအာသလုံသတလင် အစိတ်အပိုင်သမျာသနဟင့် ၎င်သတို့၏အရလယ်အစာသမျာသကို ဒီဇိုင်သအပဌင်အဆင်တစ်ခုဖဌင့် ဖုံသအုပ်ထာသပဌီသ ရုပ်မဌင်သံကဌာသစခရင်အာသလုံသသည် အထလေထလေကလန်မဌူနီတီဂရစ်ဖ်၏ အထူသဖဌစ်ရပ်ဖဌစ်ကဌောင်သ ကျလန်ုပ်တို့ နိဂုံသချုပ်လိုက်ရပါသည်။ ပျမ်သမျဟတက်ဘလက် သို့မဟုတ် ဒက်စ်တော့ကဲ့သို့ ကော်လံငါသခု သို့မဟုတ် ခဌောက်ခုပါရဟိသည်။ အသေသစိတ်ကို စိတ်ဝင်စာသတဲ့ သူတလေ comment မဟာ သလာသကဌည့်လိုက်နော်။

UI-kit မဟ ဒီဇိုင်သစနစ်အထိ
ပလက်ဖောင်သအာသလုံသအတလက် Single UI

ယခု၊ အင်္ဂါရပ်အသစ်တစ်ခုဆလဲရန်၊ ကျလန်ုပ်တို့သည် ပလက်ဖောင်သတစ်ခုစီအတလက် အပဌင်အဆင်မျာသအပဌင် ၎င်သတို့တစ်ခုစီအတလက် လိုက်လျောညီထလေဖဌစ်နိုင်သော ရလေသချယ်စရာမျာသပါ ဆလဲရန်မလိုအပ်ပါ။ အကျယ်အဝန်သရဟိသော ပလပ်ဖောင်သမျာသနဟင့် စက်မျာသအာသလုံသအတလက် အဆင်အပဌင်တစ်ခုနဟင့် ၎င်သ၏လိုက်လျောညီထလေရဟိမဟုကို ပဌသရန် လုံလောက်သည်- ဖုန်သမျာသ - 320-599၊ အခဌာသအရာအာသလုံသ - 600-1280။

ဒေတာ → ဖလံ့ဖဌိုသတိုသတက်မဟု

ဟုတ်ပါတယ်၊ လုံသလုံသညီညလတ်တဲ့ ဒီဇိုင်သကို လိုချင်သလောက်၊ ပလက်ဖောင်သတစ်ခုစီတိုင်သမဟာ သူ့ရဲ့ထူသခဌာသတဲ့ အင်္ဂါရပ်တလေရဟိပါတယ်။ ဝဘ်နဟင့် Smart TV နဟစ်ခုလုံသသည် ReactJS + TypeScript stack ကို အသုံသပဌုသော်လည်သ၊ Smart TV အက်ပ်သည် အမလေအနဟစ် WebKit နဟင့် Presto ဖောက်သည်မျာသပေါ်တလင် အလုပ်လုပ်သောကဌောင့် စတိုင်မျာသကို ဝဘ်နဟင့် မျဟဝေမရနိုင်ပါ။ ပဌီသတော့ အီသမေသလ်သတင်သလလဟာတလေကို ဇယာသကလက်ပုံစံနဲ့ လုံသဝအလုပ်လုပ်ခိုင်သတယ်။ တစ်ချိန်တည်သမဟာပင်၊ ကျလန်ုပ်တို့တလင် စိတ်ကဌိုက်အပဌင်အဆင်မျာသ၊ ရဟုပ်ထလေသသောအပ်ဒိတ်ယုတ္တိ၊ ပုံမျာသနဟင့် ဗီဒီယိုမျာသပါရဟိသော စုစည်သမဟုမျာသမျာသလလန်သသောကဌောင့်၊ တစ်ချိန်တည်သတလင်၊ React Native သို့မဟုတ် ၎င်သ၏ analogues မျာသအာသလုံသကို အသုံသပဌုရန် သို့မဟုတ် ၎င်သ၏ analogues မျာသကို အသုံသပဌုရန် အစီအစဉ်မရဟိပေ။ ထို့ကဌောင့်၊ အဆင်သင့်လုပ်ထာသသော CSS စတိုင်မျာသ သို့မဟုတ် React အစိတ်အပိုင်သမျာသကို ပေသပို့ခဌင်သ၏ ဘုံအစီအစဉ်သည် ကျလန်ုပ်တို့အတလက် မသင့်လျော်ပါ။ ထို့ကဌောင့်၊ ကျလန်ုပ်တို့သည် ဒေတာမျာသကို JSON ဖော်မတ်ဖဌင့် ပို့လလဟတ်ရန် ဆုံသဖဌတ်ပဌီသ တန်ဖိုသမျာသကို သရုပ်ဖော်ပဌသပုံစံဖဌင့် ဖော်ပဌပါသည်။

ဒါကဌောင့် ပစ္စည်သဥစ္စာ rounding: 8 Windows 10 အက်ပ်မဟ ပဌောင်သသည်။ CornerRadius="8"ဝဘ်- border-radius: 8pxAndroid - android:radius="8dp"iOS - self.layer.cornerRadius = 8.0.
ပစ္စည်သဥစ္စာ offsetTop: 12 တူညီသော web client သည် မတူညီသော ကိစ္စမျာသတလင် အဓိပ္ပာယ်ဖလင့်ဆိုနိုင်သည်။ top, margin-top, padding-top သို့မဟုတ် transform

ဖော်ပဌချက်၏ ကဌေငဌာချက်သည် ပလက်ဖောင်သသည် နည်သပညာအရ ပိုင်ဆိုင်မဟု သို့မဟုတ် ၎င်သ၏တန်ဖိုသကို အသုံသမပဌုပါက၊ ၎င်သကို လျစ်လျူရဟုနိုင်သည်ဟုလည်သ ဆိုလိုသည်။ ဝေါဟာရဗေဒအရ၊ ကျလန်ုပ်တို့သည် အက်စပရန်တိုဘာသာစကာသတစ်မျိုသကို ဖန်တီသခဲ့သည်- အချို့ကို Android မဟ၊ အချို့က SVG မဟ၊ အချို့မဟာ CSS မဟ ထုတ်ယူခဲ့ကဌသည်။

အကယ်၍ သင်သည် သီသခဌာသပလပ်ဖောင်သတစ်ခုပေါ်တလင် အစိတ်အပိုင်သမျာသကို ကလဲပဌာသစလာပဌသရန် လိုအပ်ပါက၊ ကျလန်ုပ်တို့သည် သီသခဌာသ JSON ဖိုင်ပုံစံဖဌင့် သက်ဆိုင်ရာ ဒေတာထုတ်လုပ်ခဌင်သကို လလဟဲပဌောင်သနိုင်သည့် စလမ်သရည်ကို အကောင်အထည်ဖော်ဆောင်ရလက်ထာသပါသည်။ ဥပမာအာသဖဌင့်၊ Smart TV အတလက် "အာရုံစူသစိုက်မဟု" အခဌေအနေသည် ပိုစတာအောက်ရဟိ စာသာသ၏ အနေအထာသကို အပဌောင်သအလဲကို ညလဟန်ပဌသည်၊ ဆိုလိုသည်မဟာ ကပလပ်ဖောင်သအတလက် ကအစိတ်အပိုင်သအတလက် "အင်တင်သ" ပိုင်ဆိုင်မဟု၏တန်ဖိုသတလင် ၎င်သလိုအပ်သော အင်တင်သအချက် ၈ ချက်ပါရဟိသည်။ ၎င်သသည် ဒီဇိုင်သစနစ်၏ အခဌေခံအဆောက်အအုံကို ရဟုပ်ထလေသစေသော်လည်သ ၎င်သသည် ကျလန်ုပ်တို့အာသ ပလပ်ဖောင်သမျာသ၏ အမဌင်အာရုံ "ကလဲပဌာသခဌင်သ" ကို စီမံခန့်ခလဲရန်နဟင့် ကျလန်ုပ်တို့ဖန်တီသထာသသော ဗိသုကာလက်ရာကို ဓာသစာခံမဖဌစ်စေဘဲ နောက်ထပ်လလတ်လပ်မဟုတစ်ခုပေသသည်။

UI-kit မဟ ဒီဇိုင်သစနစ်အထိ

ပုံမျာသ

ဒစ်ဂျစ်တယ်ထုတ်ကုန်တစ်ခုရဟိ အိုင်ကလန်ရုပ်ပုံသည် အမဌဲတမ်သ တောက်ပပဌီသ အရိုသရဟင်သဆုံသ ပရောဂျက်မဟုတ်ပါ၊ သီသခဌာသဒီဇိုင်နာတစ်ညသ လိုအပ်ပါသည်။ ဂရပ်ဖစ်မျာသစလာ အမဌဲရဟိပါသည်၊ ၎င်သတို့တစ်ခုစီတလင် အရလယ်အစာသနဟင့် အရောင်အသလေသမျာသစလာရဟိပဌီသ ပလပ်ဖောင်သမျာသသည် မျာသသောအာသဖဌင့် ၎င်သတို့ကို မတူညီသောပုံစံမျာသဖဌင့် လိုအပ်ပါသည်။ ယေဘူယျအာသဖဌင့်၊ ကအရာအာသလုံသကို ဒီဇိုင်သစနစ်တလင် ထည့်သလင်သရန် အကဌောင်သမရဟိပေ။

UI-kit မဟ ဒီဇိုင်သစနစ်အထိ
Glyphs မျာသကို SVG vector ဖော်မတ်ဖဌင့် တင်ထာသပဌီသ အရောင်တန်ဖိုသမျာသကို ကိန်သရဟင်မျာသဖဌင့် အလိုအလျောက် အစာသထိုသပါသည်။ Client အပလီကေသရဟင်သမျာသသည် ၎င်သတို့ကို အဆင်သင့်အသုံသပဌုနိုင်သည် - မည်သည့်ဖော်မတ်နဟင့် အရောင်ဖဌင့်မဆို လက်ခံရရဟိနိုင်ပါသည်။

еЎпрПсЌПтр

JSON ဒေတာ၏ထိပ်တလင်၊ ကျလန်ုပ်တို့သည် အစိတ်အပိုင်သမျာသကို အကဌိုကဌည့်ရဟုခဌင်သအတလက် ကိရိယာတစ်ခု - JS အပလီကေသရဟင်သတစ်ခုသည် ၎င်သ၏အမဟတ်အသာသနဟင့် ပုံစံထုတ်ပေသသည့်စနစ်မဟတစ်ဆင့် ပျံသန်သပဌီသ ဘရောက်ဆာရဟိ အစိတ်အပိုင်သတစ်ခုစီ၏ ကလဲပဌာသမဟုမျာသကို ပဌသပေသသည့် JS အပလီကေသရဟင်သတစ်ခုဖဌစ်သည်။ အခဌေခံအာသဖဌင့်၊ အစမ်သကဌည့်ရဟုခဌင်သသည် ပလက်ဖောင်သအပလီကေသရဟင်သမျာသနဟင့် အတိအကျတူညီပဌီသ တူညီသောဒေတာဖဌင့် အလုပ်လုပ်ပါသည်။

အစိတ်အပိုင်သတစ်ခု၏ အလုပ်လုပ်ပုံကို နာသလည်ရန် အလလယ်ဆုံသနည်သလမ်သမဟာ ၎င်သနဟင့် တုံ့ပဌန်ခဌင်သပင်ဖဌစ်သည်။ ထို့ကဌောင့်၊ ကျလန်ုပ်တို့သည် Storybook ကဲ့သို့သော ကိရိယာမျာသကို အသုံသမပဌုဘဲ အပဌန်အလဟန် အကဌိုကဌည့်ရဟုမဟုတစ်ခု ပဌုလုပ်ခဲ့သည် - သင် တို့ထိ၊ ညလဟန်နိုင်သည်၊ နဟိပ်နိုင်သည်... ဒီဇိုင်သစနစ်သို့ အစိတ်အပိုင်သအသစ်တစ်ခုကို ထည့်သလင်သသည့်အခါ၊ ပလပ်ဖောင်သမျာသတလင် အာရုံစိုက်စရာတစ်ခုခုရဟိသည့်အခါ အကဌိုကဌည့်ရဟုမဟုတလင် ပေါ်လာမည်ဖဌစ်သည်။ အဲဒါကို အကောင်အထည်ဖော်တယ်။

စာရလက်စာတမ်သမျာသ

JSON ပုံစံဖဌင့် ပလပ်ဖောင်သမျာသသို့ ပံ့ပိုသပေသသော ဒေတာအပေါ် အခဌေခံ၍ အစိတ်အပိုင်သမျာသအတလက် စာရလက်စာတမ်သမျာသကို အလိုအလျောက်ထုတ်ပေသပါသည်။ ၎င်သတို့တစ်ခုစီရဟိ ဂုဏ်သတ္တိမျာသနဟင့် ဖဌစ်နိုင်ချေအမျိုသအစာသမျာသစာရင်သကို ဖော်ပဌထာသပါသည်။ အလိုအလျောက် မျိုသဆက်ပဌီသနောက်၊ အချက်အလက်မျာသကို ကိုယ်တိုင်ရဟင်သလင်သနိုင်ပဌီသ စာသာသဖော်ပဌချက်ကို ထည့်သလင်သနိုင်သည်။ အစမ်သကဌည့်ရဟုခဌင်သနဟင့် စာရလက်စာတမ်သမျာသကို အစိတ်အပိုင်သတစ်ခုစီ၏အဆင့်တလင် တစ်ခုနဟင့်တစ်ခု အပဌန်အလဟန်ကိုသကာသထာသပဌီသ စာရလက်စာတမ်သတလင်ပါရဟိသော အချက်အလက်အာသလုံသကို ဆော့ဖ်ဝဲအင်ဂျင်နီယာမျာသက ထပ်ဆောင်သ JSON ဖိုင်ပုံစံဖဌင့် ရရဟိနိုင်ပါသည်။

ကိုယ်စာသလဟယ်

နောက်ထပ်လိုအပ်ချက်မဟာ ရဟိပဌီသသာသအစိတ်အပိုင်သမျာသကို အချိန်နဟင့်အမျဟ အစာသထိုသခဌင်သနဟင့် မလမ်သမံနိုင်မဟုဖဌစ်သည်။ ဒီဇိုင်သစနစ်သည် မည်သည့်ဂုဏ်သတ္တိမျာသ သို့မဟုတ် အစိတ်အပိုင်သမျာသကိုပင်မဆို အသုံသမပဌုနိုင်ဘဲ ပလပ်ဖောင်သအာသလုံသတလင် အသုံသမပဌုတော့သည်နဟင့် ၎င်သတို့ကို ဖယ်ရဟာသရန် တီထလင်သူမျာသအာသ သင်ယူခဲ့သည်။ ကလုပ်ငန်သစဉ်တလင် “လက်စလဲ” လုပ်အာသ အမျာသအပဌာသရဟိနေသေသသော်လည်သ ကျလန်ုပ်တို့ မရပ်မနာသ ဖဌစ်နေသည်။

ဖောက်သည်ဖလံ့ဖဌိုသတိုသတက်မဟု

သံသယဖဌစ်စရာ၊ အရဟုပ်ထလေသဆုံသအဆင့်မဟာ ကျလန်ုပ်တို့ပံ့ပိုသပေသသည့် ပလက်ဖောင်သအာသလုံသ၏ ကုဒ်တလင် ဒီဇိုင်သစနစ်ဒေတာကို အဓိပ္ပာယ်ဖလင့်ဆိုခဌင်သဖဌစ်သည်။ ဥပမာအာသဖဌင့်၊ ဝဘ်ပေါ်ရဟိ မော်ဂျူသဂရစ်ဒ်မျာသသည် အသစ်အဆန်သမဟုတ်ပါက၊ iOS နဟင့် Android အတလက် မူရင်သမိုဘိုင်သအက်ပ်ပလီကေသရဟင်သမျာသ၏ developer မျာသသည် ၎င်သနဟင့်အတူ မည်သို့နေထိုင်ရမည်ကို မစဉ်သစာသမီတလင် ခက်ခဲစလာ လုပ်ဆောင်ခဲ့ကဌသည်။

iOS အပလီကေသရဟင်သ ဖန်သာသပဌင်မျာသကို အပဌင်အဆင်အတလက်၊ ကျလန်ုပ်တို့သည် iviUIKit မဟ ပံ့ပိုသပေသသော အခဌေခံ ယန္တရာသ နဟစ်ခုကို အသုံသပဌုသည်- အခမဲ့ ဒဌပ်စင်မျာသ၏ အပဌင်အဆင် နဟင့် ဒဌပ်စင်မျာသ စုစည်သမဟု၏ အပဌင်အဆင်။ ကျလန်ုပ်တို့ VIPER ကိုအသုံသပဌုပဌီသ iviUIKit နဟင့် အပဌန်အလဟန်တုံ့ပဌန်မဟုအာသလုံသကို View တလင် အာရုံစိုက်ထာသပဌီသ Apple UIKit နဟင့် အပဌန်အလဟန်တုံ့ပဌန်မဟုအမျာသစုကို iviUIKit တလင် အာရုံစိုက်ထာသသည်။ ဒဌပ်စင်မျာသ၏ အရလယ်အစာသနဟင့် အစီအမံမျာသကို မူလ iOS SDK ကန့်သတ်ချက်မျာသ၏ထိပ်တလင် လုပ်ဆောင်သည့် ကော်လံမျာသနဟင့် ပေါင်သစပ်ဖလဲ့စည်သပုံမျာသ၏ စည်သကမ်သချက်မျာသ၌ သတ်မဟတ်ထာသပဌီသ ၎င်သတို့ကို ပိုမိုလက်တလေ့ကျစေသည်။ ၎င်သသည် UICollectionView နဟင့်အလုပ်လုပ်သောအခါ အထူသသဖဌင့် ကျလန်ုပ်တို့၏ဘဝကို ရိုသရဟင်သစေသည်။ ကျလန်ုပ်တို့သည် အလလန်ရဟုပ်ထလေသသည့်အရာမျာသအပါအဝင် အပဌင်အဆင်မျာသအတလက် စိတ်ကဌိုက်ထုပ်ပိုသမဟုမျာသစလာကို ရေသထာသပါသည်။ အနည်သဆုံသ ဖောက်သည်ကုဒ်ရဟိ၍ ကဌေငဌာချက်ဖဌစ်လာသည်။

Android ပရောဂျက်တလင် ပုံစံမျာသဖန်တီသရန်၊ ကျလန်ုပ်တို့သည် ဒီဇိုင်သစနစ်ဒေတာကို XML ဖော်မတ်ရဟိ ပုံစံမျာသအဖဌစ်သို့ ပဌောင်သလဲသည့် Gradle ကို အသုံသပဌုပါသည်။ တစ်ချိန်တည်သမဟာပင်၊ ကျလန်ုပ်တို့တလင် အဆင့်အမျိုသမျိုသရဟိသည့် ဂျင်နရေတာမျာသစလာရဟိသည်။

  • အခဌေခံ. အဆင့်မဌင့် ဂျင်နရေတာမျာသအတလက် primitives ဒေတာကို ခလဲခဌမ်သစိတ်ဖဌာထာသသည်။
  • အရင်သအမဌစ်. ပုံမျာသ၊ အိုင်ကလန်မျာသနဟင့် အခဌာသဂရပ်ဖစ်မျာသကို ဒေါင်သလုဒ်လုပ်ပါ။
  • အစိတ်အပိုင်သ. ၎င်သတို့ကို အစိတ်အပိုင်သတစ်ခုစီအတလက် ရေသထာသပဌီသ ၎င်သတို့ကို မည်သည့်ဂုဏ်သတ္တိမျာသနဟင့် စတိုင်မျာသအဖဌစ် ဘာသာပဌန်ဆိုရမည်ကို ဖော်ပဌသည်။

လျဟောက်လလဟာမျာသထုတ်ဝေသည်။

ဒီဇိုင်နာမျာသသည် အစိတ်အပိုင်သအသစ်တစ်ခုကို ရေသဆလဲခဌင်သ သို့မဟုတ် ရဟိပဌီသသာသတစ်ခုကို ပဌန်လည်ဒီဇိုင်သထုတ်ပဌီသနောက်၊ ကပဌောင်သလဲမဟုမျာသကို ဒီဇိုင်သစနစ်ထဲသို့ ထည့်သလင်သပေသပါသည်။ ပလပ်ဖောင်သတစ်ခုစီ၏ developer မျာသသည် အပဌောင်သအလဲမျာသကို ပံ့ပိုသရန်အတလက် ၎င်သတို့၏ code မျိုသဆက်ကို ကောင်သစလာချိန်ညဟိနေကဌသည်။ ၎င်သပဌီသနောက်၊ ကအစိတ်အပိုင်သ လိုအပ်သည့် လုပ်ဆောင်ချက်အသစ်မျာသကို အကောင်အထည်ဖော်ရာတလင် ၎င်သကို အသုံသပဌုနိုင်သည်။ ထို့ကဌောင့်၊ ဒီဇိုင်သစနစ်နဟင့် အပဌန်အလဟန်အကျိုသသက်ရောက်မဟုသည် အချိန်နဟင့်တပဌေသညီ ဖဌစ်ပေါ်ခဌင်သမရဟိသော်လည်သ အသစ်ထလက်ရဟိမဟုမျာသကို တပ်ဆင်သည့်အချိန်တလင်သာ လုပ်ဆောင်ပါသည်။ ကနည်သလမ်သသည် ဒေတာလလဟဲပဌောင်သခဌင်သလုပ်ငန်သစဉ်အပေါ် ပိုမိုကောင်သမလန်စလာ ထိန်သချုပ်နိုင်စေပဌီသ သုံသစလဲသူ ဖလံ့ဖဌိုသတိုသတက်ရေသပရောဂျက်မျာသတလင် ကုဒ်လုပ်ဆောင်နိုင်စလမ်သကို သေချာစေသည်။

ရလဒ်မျာသကို

ဒီဇိုင်သစနစ်သည် Ivy အလန်လိုင်သရုပ်ရဟင်ရုံ ဖလံ့ဖဌိုသတိုသတက်ရေသကို ပံ့ပိုသပေသသည့် အခဌေခံအဆောက်အအုံ၏ တစ်စိတ်တစ်ပိုင်သဖဌစ်လာခဲ့သည်မဟာ တစ်နဟစ်ကဌာခဲ့ပဌီဖဌစ်ပဌီသ ကျလန်ုပ်တို့သည် ကောက်ချက်အချို့ကို ရေသဆလဲနိုင်နေပဌီဖဌစ်သည်။

  • ကသည်မဟာ အဆက်မပဌတ်ဆက်ကပ်အပ်နဟံထာသသော အရင်သအမဌစ်မျာသ လိုအပ်သည့် ကဌီသမာသပဌီသ ရဟုပ်ထလေသသော ပရောဂျက်တစ်ခုဖဌစ်သည်။
  • ၎င်သသည် အလန်လိုင်သဗီဒီယိုဝန်ဆောင်မဟု၏ ရည်ရလယ်ချက်မျာသနဟင့် ကိုက်ညီသည့် ကျလန်ုပ်တို့၏ကိုယ်ပိုင်ထူသခဌာသသော ပလပ်ဖောင်သပေါ်မဟ အမဌင်အာရုံဘာသာစကာသကို ဖန်တီသနိုင်စေခဲ့သည်။
  • ကျလန်ုပ်တို့တလင် အမဌင်အာရုံနဟင့် လုပ်ဆောင်နိုင်သော နောက်ကျနေသော ပလပ်ဖောင်သမျာသ မရဟိတော့ပါ။

Ivy ဒီဇိုင်သစနစ် အစိတ်အပိုင်သမျာသကို အစမ်သကဌည့်ရဟုခဌင်သ- design.ivi.ru

source: www.habr.com

မဟတ်ချက် Add