🍃 🔏 🌬️ IOS एप्लिकेशन में घटक UI आर्किटेक्चर 👨🏽‍🎤 👩🏾‍🎤 🎵

नमस्कार, हेब्र!

मेरा नाम वलेरा है, और अब दो साल से मैं एक iOS एप्लिकेशन को विकसित कर रहा हूं, जो कि टीम का हिस्सा है। हमारी प्राथमिकताओं में से एक कोड को बनाए रखना आसान है। साप्ताहिक रूप से हमारे हाथों में आने वाली नई सुविधाओं की बड़ी संख्या के कारण, हमें पहले आवेदन की वास्तुकला के बारे में सोचना होगा, अन्यथा मौजूदा विशेषताओं को तोड़े बिना उत्पाद में एक नई सुविधा जोड़ना बेहद मुश्किल होगा। जाहिर है, यह उपयोगकर्ता इंटरफ़ेस (UI) के कार्यान्वयन पर भी लागू होता है, भले ही यह कोड, Xcode (XIB) या मिश्रित दृष्टिकोण का उपयोग करके किया गया हो। इस लेख में मैं कुछ यूआई कार्यान्वयन तकनीकों का वर्णन करूंगा जो हमें उपयोगकर्ता इंटरफ़ेस के विकास को सरल बनाने की अनुमति देते हैं, जिससे यह परीक्षण के लिए लचीला और सुविधाजनक हो जाता है। इस लेख का एक अंग्रेजी संस्करण भी है।

शुरू करने से पहले ...

मैं स्विफ्ट में लिखे गए एक उदाहरण एप्लिकेशन का उपयोग करके उपयोगकर्ता इंटरफ़ेस कार्यान्वयन तकनीकों पर विचार करूंगा। एक बटन पर क्लिक करने पर आवेदन दोस्तों की एक सूची दिखाता है।

इसमें तीन भाग होते हैं:

घटक कस्टम UI घटक हैं, अर्थात्, कोड केवल उपयोगकर्ता इंटरफ़ेस से संबंधित है।
डेमो एप्लिकेशन - डेमो व्यू मॉडल और अन्य उपयोगकर्ता इंटरफ़ेस इकाइयां जिनके पास केवल यूआई निर्भरताएं हैं।
वास्तविक अनुप्रयोग दृश्य मॉडल और अन्य इकाइयाँ हैं जिनमें विशिष्ट निर्भरता और तर्क हो सकते हैं।

ऐसा अलगाव क्यों है? मैं नीचे इस प्रश्न का उत्तर दूंगा, लेकिन अभी के लिए, हमारे एप्लिकेशन के उपयोगकर्ता इंटरफ़ेस को देखें:

यह एक पूर्ण-स्क्रीन दृश्य के शीर्ष पर सामग्री के साथ एक पॉप-अप दृश्य है। सब कुछ सरल है।

परियोजना का पूर्ण स्रोत कोड GitHub पर उपलब्ध है ।

यूआई कोड में देरी करने से पहले, मैं आपको यहां उपयोग किए जाने वाले सहायक वर्ग के लिए परिचय देना चाहता हूं। इसका इंटरफ़ेस इस तरह दिखता है:

var value: T func observe(_ closure: @escaping (_ old: T, _ new: T) -> Void) -> ObserverProtocol func observeNewAndCall(_ closure: @escaping (_ new: T) -> Void) -> ObserverProtocol

यह केवल परिवर्तनों के सभी पहले से हस्ताक्षर किए गए पर्यवेक्षकों को सूचित करता है, इसलिए यह केवीओ (कुंजी-मूल्य का अवलोकन) का एक प्रकार है या, यदि आप चाहें, तो प्रतिक्रियाशील प्रोग्रामिंग। यहाँ एक उपयोग उदाहरण है:

 self.observers.append(self.viewModel.items.observe { [weak self] (_, newItems) in   self?.state = newItems.isEmpty ? .zeroCase(type: .empty) : .normal   self?.collectionView.reloadSections(IndexSet(integer: 0)) })

नियंत्रक self.viewModel.items गुण में परिवर्तन की सदस्यता लेता है, और जब परिवर्तन होता है, तो हैंडलर व्यावसायिक तर्क को निष्पादित करता है। उदाहरण के लिए, यह दृश्य स्थिति को अपडेट करता है और नए आइटम के साथ संग्रह दृश्य को फिर से लोड करता है।

आपको नीचे उपयोग के और अधिक उदाहरण दिखाई देंगे।

तकनीक

इस खंड में मैं चार यूआई विकास तकनीकों के बारे में बात करूंगा जो कि बटी में उपयोग की जाती हैं

1. कोड में उपयोगकर्ता इंटरफ़ेस का कार्यान्वयन।

2. लेआउट एंकर का उपयोग करना।

3. घटक - विभाजित और जीतना।

4. यूजर इंटरफेस और लॉजिक का अलग होना।

# 1: कोड में उपयोगकर्ता इंटरफ़ेस को लागू करना

Badoo में, अधिकांश उपयोगकर्ता हित कोड में कार्यान्वित किए जाते हैं। हम XIB या स्टोरीबोर्ड का उपयोग क्यों नहीं करते हैं? निष्पक्ष प्रश्न। मुख्य कारण मध्यम आकार की टीम के लिए कोड बनाए रखने की सुविधा है, अर्थात्:

कोड में परिवर्तन स्पष्ट रूप से दिखाई देते हैं, जिसका अर्थ है कि किसी सहयोगी द्वारा किए गए परिवर्तनों को खोजने के लिए XML स्टोरीबोर्ड / XIB फ़ाइल को पार्स करने की कोई आवश्यकता नहीं है;
संस्करण नियंत्रण प्रणाली (उदाहरण के लिए, गिट) "भारी" XLM- फाइलों की तुलना में कोड के साथ काम करना बहुत आसान है, खासकर मध्यम संघर्ष के दौरान; यह भी ध्यान में रखा जाता है कि XIB / स्टोरीबोर्ड फ़ाइलों की सामग्री हर बार सहेजे जाने के बाद भी बदल जाती है, भले ही इंटरफ़ेस नहीं बदला हो (हालाँकि मैंने सुना है कि Xcode 9 में यह समस्या पहले से ही तय हो गई है);
इंटरफ़ेस बिल्डर (आईबी) में कुछ गुणों को बदलना और बनाए रखना मुश्किल हो सकता है, उदाहरण के लिए, बच्चे के विचारों (लेआउट उप साक्षात्कार) की रिलेआउट प्रक्रिया के दौरान कायर गुण, जो दृश्य स्थिति के लिए सच्चाई के कई स्रोतों को जन्म दे सकता है;
इंटरफ़ेस बिल्डर सबसे तेज़ उपकरण नहीं है, और कभी-कभी कोड के साथ सीधे काम करना बहुत तेज़ होता है।

निम्नलिखित नियंत्रक (FriendsListViewController) पर एक नज़र डालें:

 final class FriendsListViewController: UIViewController { struct ViewConfig { let backgroundColor: UIColor let cornerRadius: CGFloat } private var infoView: FriendsListView! private let viewModel: FriendsListViewModelProtocol private let viewConfig: ViewConfig init(viewModel: FriendsListViewModelProtocol, viewConfig: ViewConfig) { self.viewModel = viewModel self.viewConfig = viewConfig super.init(nibName: nil, bundle: nil) } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func viewDidLoad() { super.viewDidLoad() self.setupContainerView() } private func setupContainerView() { self.view.backgroundColor = self.viewConfig.backgroundColor let infoView = FriendsListView( frame: .zero, viewModel: self.viewModel, viewConfig: .defaultConfig) infoView.backgroundColor = self.viewConfig.backgroundColor self.view.addSubview(infoView) self.infoView = infoView infoView.translatesAutoresizingMaskIntoConstraints = false infoView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true infoView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true infoView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true infoView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true } // …. }

यह उदाहरण दिखाता है कि आप केवल दृश्य मॉडल और दृश्य कॉन्फ़िगरेशन प्रदान करके एक दृश्य नियंत्रक बना सकते हैं। आप प्रस्तुति मॉडल के बारे में अधिक पढ़ सकते हैं, अर्थात्, एमवीवीएम डिज़ाइन मॉडल (मॉडल-व्यू-व्यूमॉडल) यहाँ । चूँकि दृश्य विन्यास एक साधारण संरचनात्मक इकाई (संरचना इकाई) है जो दृश्य, लेआउट और शैली, जैसे इंडेंट, आकार, रंग, फ़ॉन्ट आदि को परिभाषित करता है, मैं इस तरह एक मानक विन्यास प्रदान करना उचित समझता हूं:

 extension FriendsListViewController.ViewConfig {   static var defaultConfig: FriendsListViewController.ViewConfig {       return FriendsListViewController.ViewConfig(backgroundColor: .white,                                                   cornerRadius: 16)   } }

सभी दृश्य आरंभीकरण setupContainerView विधि में होता है, जिसे setupContainerView से केवल एक बार कहा जाता है जब दृश्य पहले से ही बनाया और लोड किया जाता है, लेकिन अभी तक स्क्रीन पर नहीं खींचा जाता है, अर्थात, सभी आवश्यक तत्व (साक्षात्कार) केवल दृश्य पदानुक्रम में जोड़े जाते हैं, और फिर मार्कअप लागू किया जाता है (लेआउट) और शैलियों।

अब देखने वाला कंट्रोलर कैसा दिखता है:

 final class FriendsListPresenter: FriendsListPresenterProtocol {   // …   func presentFriendsList(from presentingViewController: UIViewController) {       let controller = Class.createFriendsListViewController( presentingViewController: presentingViewController,           headerViewModel: self.headerViewModel,           contentViewModel: self.contentViewModel)       controller.modalPresentationStyle = .overCurrentContext       controller.modalTransitionStyle = .crossDissolve       presentingViewController.present(controller, animated: true, completion: nil)   }   private class func createFriendsListViewController( presentingViewController: UIViewController, headerViewModel: FriendsListHeaderViewModelProtocol,       contentViewModel: FriendsListContentViewModelProtocol) -> FriendsListContainerViewController {      let dismissViewControllerBlock: VoidBlock = { [weak presentingViewController] in           presentingViewController?.dismiss(animated: true, completion: nil)       }       let infoViewModel = FriendsListViewModel( headerViewModel: headerViewModel,           contentViewModel: contentViewModel)       let containerViewModel = FriendsListContainerViewModel(onOutsideContentTapAction: dismissViewControllerBlock)       let friendsListViewController = FriendsListViewController( viewModel: infoViewModel, viewConfig: .defaultConfig)       let controller = FriendsListContainerViewController( contentViewController: friendsListViewController,           viewModel: containerViewModel,           viewConfig: .defaultConfig)       return controller   } }

आप जिम्मेदारियों का स्पष्ट पृथक्करण देख सकते हैं, और यह अवधारणा स्टोरीबोर्ड पर सेगिंग की तुलना में बहुत अधिक जटिल नहीं है।

एक दृश्य नियंत्रक बनाना काफी सरल है, यह देखते हुए कि हमारे पास इसका मॉडल है और आप बस मानक दृश्य विन्यास का उपयोग कर सकते हैं:

 let friendsListViewController = FriendsListViewController( viewModel: infoViewModel, viewConfig: .defaultConfig)

# 2: लेआउट एंकर का उपयोग करना

यहाँ लेआउट कोड है:

 self.view.addSubview(infoView) self.infoView = infoView infoView.translatesAutoresizingMaskIntoConstraints = false infoView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true infoView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true infoView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true infoView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true

सीधे शब्दों में कहें, तो यह कोड मूल दृश्य ( infoView अंदर infoView , निर्देशांक के मूल आकार के सापेक्ष निर्देशांक (0, 0) के अंदर रखता है।

हम लेआउट एंकर का उपयोग क्यों करते हैं? यह त्वरित और आसान है। बेशक, आप मैन्युअल रूप से UIView.frame सेट कर सकते हैं और मक्खी पर सभी पदों और आकारों की गणना कर सकते हैं, लेकिन कभी-कभी यह बहुत भ्रामक और / या भारी कोड हो सकता है।

आप मार्कअप के लिए एक पाठ प्रारूप का उपयोग भी कर सकते हैं, जैसा कि यहां वर्णित है , लेकिन अक्सर यह त्रुटियों की ओर जाता है, क्योंकि आपको प्रारूप का कड़ाई से पालन करने की आवश्यकता है, और कोड लिखने / संकलित करने के चरण में Xcode मार्कअप विवरण पाठ की जांच नहीं करता है, और आप सुरक्षित क्षेत्र लेआउट गाइड का उपयोग नहीं कर सकते हैं:

 NSLayoutConstraint.constraints( withVisualFormat: "V:|-(\(topSpace))-[headerView(headerHeight@200)]-[collectionView(collectionViewHeight@990)]|",   options: [],   metrics: metrics,   views: views)

मार्कअप को सही करने वाले टेक्स्ट स्ट्रिंग में गलती या टाइपो बनाना बहुत आसान है?

# 3: घटक - फूट डालो और जीतो

हमारा उदाहरण उपयोगकर्ता इंटरफ़ेस घटकों में विभाजित है, जिनमें से प्रत्येक एक विशिष्ट कार्य करता है, और नहीं।

उदाहरण के लिए:

FriendsListHeaderView - दोस्तों और बंद बटन के बारे में जानकारी प्रदर्शित करता है।
FriendsListContentView - क्लिक करने योग्य कोशिकाओं के साथ दोस्तों की एक सूची प्रदर्शित करता है, सूची के अंत तक पहुंचने पर सामग्री गतिशील रूप से भरी हुई है।
FriendsListView - दो पिछले विचारों के लिए एक कंटेनर।

जैसा कि पहले उल्लेख किया गया है, हम प्रत्येक घटक के अलग-अलग कार्य के लिए जिम्मेदार होने पर , एकमात्र जिम्मेदारी के सिद्धांत को पसंद करते हैं। यह न केवल बग फिक्सिंग की प्रक्रिया में मदद करता है (जो, शायद, आईओएस डेवलपर के काम का सबसे दिलचस्प हिस्सा नहीं है), बल्कि नई कार्यक्षमता के विकास के दौरान भी, क्योंकि यह दृष्टिकोण भविष्य में कोड के पुन: उपयोग की संभावनाओं को काफी बढ़ाता है।

# 4: यूजर इंटरफेस और लॉजिक को अलग करना

और अंतिम, लेकिन कोई कम महत्वपूर्ण बिंदु उपयोगकर्ता इंटरफ़ेस और तर्क का अलगाव नहीं है। एक ऐसी तकनीक जो आपकी टीम के लिए समय और नसों को बचा सकती है। शाब्दिक अर्थ में: उपयोगकर्ता इंटरफ़ेस के लिए एक अलग परियोजना और व्यावसायिक तर्क के लिए एक अलग।

आइए हम अपने उदाहरण पर लौटते हैं। जैसा कि आप याद करते हैं, प्रस्तुति का सार (प्रस्तुतकर्ता) इस तरह दिखता है:

 func presentFriendsList(from presentingViewController: UIViewController) {   let controller = Class.createFriendsListViewController( presentingViewController: presentingViewController,       headerViewModel: self.headerViewModel,       contentViewModel: self.contentViewModel)   controller.modalPresentationStyle = .overCurrentContext   controller.modalTransitionStyle = .crossDissolve   presentingViewController.present(controller, animated: true, completion: nil) }

आपको केवल शीर्षक और सामग्री के लिए दृश्य मॉडल प्रदान करने की आवश्यकता है। बाकी यूआई घटकों के उपरोक्त कार्यान्वयन के अंदर छिपा हुआ है।

शीर्ष लेख दृश्य मॉडल प्रोटोकॉल इस तरह दिखता है:

 protocol FriendsListHeaderViewModelProtocol {   var friendsCountIcon: UIImage? { get }   var closeButtonIcon: UIImage? { get }   var friendsCount: Observable<String> { get }   var onCloseAction: VoidBlock? { get set } }

अब कल्पना करें कि आप UI के लिए दृश्य परीक्षण जोड़ रहे हैं - यह यूआई घटकों के लिए स्टब मॉडल पास करने के समान सरल है।

 final class FriendsListHeaderDemoViewModel: FriendsListHeaderViewModelProtocol {   var friendsCountIcon: UIImage? = UIImage(named: "ic_friends_count")   var closeButtonIcon: UIImage? = UIImage(named: "ic_close_cross")   var friendsCount: Observable<String>   var onCloseAction: VoidBlock?   init() {       let friendsCountString = "\(Int.random(min: 1, max: 5000))"       self.friendsCount = Observable(friendsCountString)   } }

यह सरल लगता है, है ना? अब हम अपने एप्लिकेशन के घटकों में व्यावसायिक तर्क जोड़ना चाहते हैं, जिसके लिए डेटा प्रदाता, डेटा मॉडल आदि की आवश्यकता हो सकती है।

 final class FriendsListHeaderViewModel: FriendsListHeaderViewModelProtocol {   let friendsCountIcon: UIImage?   let closeButtonIcon: UIImage?   let friendsCount: Observable<String> = Observable("0")   var onCloseAction: VoidBlock?   private let dataProvider: FriendsListDataProviderProtocol   private var observers: [ObserverProtocol] = []   init(dataProvider: FriendsListDataProviderProtocol,        friendsCountIcon: UIImage?,        closeButtonIcon: UIImage?) {       self.dataProvider = dataProvider       self.friendsCountIcon = friendsCountIcon       self.closeButtonIcon = closeButtonIcon       self.setupDataObservers()   }   private func setupDataObservers() {       self.observers.append(self.dataProvider.totalItemsCount.observeNewAndCall { [weak self] (newCount) in           self?.friendsCount.value = "\(newCount)"       })   } }

क्या आसान हो सकता है? बस डेटा प्रदाता को लागू करें - और जाओ!

सामग्री मॉडल का कार्यान्वयन थोड़ा अधिक जटिल दिखता है, लेकिन जिम्मेदारियों का अलग होना अभी भी जीवन को सरल बनाता है। एक बटन के क्लिक पर मित्रों की सूची को तुरंत कैसे प्रदर्शित और प्रदर्शित किया जाए, इसका एक उदाहरण इस प्रकार है:

 private func presentRealFriendsList(sender: Any) {   let avatarPlaceholderImage = UIImage(named: "avatar-placeholder")   let itemFactory = FriendsListItemFactory(avatarPlaceholderImage: avatarPlaceholderImage)   let dataProvider = FriendsListDataProvider(itemFactory: itemFactory)   let viewModelFactory = FriendsListViewModelFactory(dataProvider: dataProvider)   var headerViewModel = viewModelFactory.makeHeaderViewModel()   headerViewModel.onCloseAction = { [weak self] in       self?.dismiss(animated: true, completion: nil)   }   let contentViewModel = viewModelFactory.makeContentViewModel()   let presenter = FriendsListPresenter( headerViewModel: headerViewModel,       contentViewModel: contentViewModel)   presenter.presentFriendsList(from: self) }

यह तकनीक उपयोगकर्ता इंटरफ़ेस को व्यावसायिक तर्क से अलग करने में मदद करती है। इसके अलावा, यह आपको संपूर्ण यूआई को दृश्य परीक्षणों के साथ कवर करने की अनुमति देता है, घटकों को परीक्षण डेटा पास कर रहा है! इसलिए, उपयोगकर्ता इंटरफ़ेस और संबंधित व्यावसायिक तर्क का पृथक्करण परियोजना की सफलता के लिए महत्वपूर्ण है, चाहे वह एक स्टार्टअप हो या पहले से तैयार उत्पाद।

निष्कर्ष

बेशक, ये बस कुछ तकनीकों का इस्तेमाल किया गया है, और वे सभी संभावित मामलों के लिए एक सार्वभौमिक समाधान नहीं हैं। इसलिए, उनका मूल्यांकन करने के बाद उनका उपयोग करें कि क्या वे आपके और आपकी परियोजनाओं के लिए उपयुक्त हैं।

अन्य विधियां हैं, उदाहरण के लिए, इंटरफ़ेस बिल्डर (वे हमारे अन्य लेख में वर्णित हैं) का उपयोग करते हुए एक्सआईबी-विन्यास योग्य यूआई-घटक, लेकिन विभिन्न कारणों से उनका उपयोग नहीं किया जाता है। याद रखें कि सभी की अपनी राय और बड़ी तस्वीर की दृष्टि है, इसलिए, एक सफल परियोजना को विकसित करने के लिए, आपको टीम में एक आम सहमति पर आना चाहिए और अधिकांश परिदृश्यों के लिए सबसे उपयुक्त दृष्टिकोण का चयन करना चाहिए।

आपके साथ हो सकता है स्विफ्ट!

सूत्रों का कहना है

IOS एप्लिकेशन में घटक UI आर्किटेक्चर