स्पंदन अनुप्रयोग वास्तुकला मूल बातें: वेनिला, स्कूप्ड मॉडल, बीएलओसी

(मूल लेख अंग्रेजी में माध्यम पर प्रकाशित)

स्पंदन एक आधुनिक उत्तरदायी रूपरेखा प्रदान करता है, विगेट्स और उपकरणों का एक बड़ा सेट। लेकिन, दुर्भाग्य से, प्रलेखन Android आवेदन की सिफारिश की वास्तुकला के लिए एक गाइड की तरह कुछ भी नहीं है।

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

1. अनुरोध और डेटा डाउनलोड करें।
2. परिवर्तन और उपयोगकर्ता के लिए डेटा की तैयारी।
3. डेटाबेस या फ़ाइल सिस्टम से डेटा लिखना और पढ़ना।

यह सब देखते हुए, मैंने एक डेमो एप्लिकेशन बनाया जो आर्किटेक्चर के विभिन्न तरीकों का उपयोग करके एक ही समस्या को हल करता है।

प्रारंभ में, उपयोगकर्ता को केंद्र में स्थित "लोड उपयोगकर्ता डेटा" बटन के साथ एक स्क्रीन दिखाई जाती है। जब उपयोगकर्ता बटन पर क्लिक करता है, तो डेटा एसिंक्रोनस रूप से लोड किया जाता है, और बटन को एक लोडिंग संकेतक द्वारा बदल दिया जाता है। जब डेटा डाउनलोड पूरा हो जाता है, तो डाउनलोड संकेतक को डेटा द्वारा बदल दिया जाता है।

तो चलिए शुरू करते हैं।

डेटा

कार्य को सरल बनाने के लिए, मैंने Repository वर्ग बनाया, जिसमें getUser() विधि शामिल है। यह विधि नेटवर्क से डेटा के अतुल्यकालिक लोडिंग का अनुकरण करती है और Future<User> लौटाती है।

यदि आप डार्ट में फ्यूचर्स और अतुल्यकालिक प्रोग्रामिंग से परिचित नहीं हैं, तो हम यहां इसके बारे में अधिक पढ़ सकते हैं और फ्यूचर क्लास के प्रलेखन को पढ़ सकते हैं।

 class Repository { Future<User> getUser() async { await Future.delayed(Duration(seconds: 2)); return User(name: 'John', surname: 'Smith'); } } 

 class User { User({ @required this.name, @required this.surname, }); final String name; final String surname; } 

वैनीला

चलो एक डेवलपर के रूप में आवेदन को विकसित करते हैं, अगर वह आधिकारिक वेबसाइट पर फ़्लटर प्रलेखन को पढ़ता है।

Navigator का उपयोग करके VanillaScreen स्क्रीन खोलें

 Navigator.push( context, MaterialPageRoute( builder: (context) => VanillaScreen(_repository), ), ); 

चूंकि एक विजेट की स्थिति अपने जीवन चक्र के दौरान कई बार बदल सकती है, इसलिए हमें StatefulWidget से इनहेरिट करने की आवश्यकता है। अपने स्टेटफुल विजेट को लागू करने के लिए, आपको State क्लास की भी आवश्यकता है। _VanillaScreenState वर्ग में bool _isLoading और User _user फ़ील्ड विजेट की स्थिति का प्रतिनिधित्व करते हैं। build(BuildContext context) विधि से पहले दोनों फ़ील्ड्स को पहली बार प्रारंभ किया जाता है।

 class VanillaScreen extends StatefulWidget { VanillaScreen(this._repository); final Repository _repository; @override State<StatefulWidget> createState() => _VanillaScreenState(); } class _VanillaScreenState extends State<VanillaScreen> { bool _isLoading = false; User _user; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Vanilla'), ), body: SafeArea( child: _isLoading ? _buildLoading() : _buildBody(), ), ); } Widget _buildBody() { if (_user != null) { return _buildContent(); } else { return _buildInit(); } } Widget _buildInit() { return Center( child: RaisedButton( child: const Text('Load user data'), onPressed: () { setState(() { _isLoading = true; }); widget._repository.getUser().then((user) { setState(() { _user = user; _isLoading = false; }); }); }, ), ); } Widget _buildContent() { return Center( child: Text('Hello ${_user.name} ${_user.surname}'), ); } Widget _buildLoading() { return const Center( child: CircularProgressIndicator(), ); } } 

विजेट की राज्य वस्तु बनने के बाद, UI build(BuildContext context) लिए build(BuildContext context) विधि को कहा जाता है। यूआई घोषणा कोड में स्क्रीन पर विजेट के बारे में सभी निर्णय सही दिखाए जाने चाहिए।

 body: SafeArea( child: _isLoading ? _buildLoading() : _buildBody(), ) 

प्रगति संकेतक प्रदर्शित करने के लिए, जब उपयोगकर्ता "लोड उपयोगकर्ता विवरण" बटन पर क्लिक करता है, तो हम निम्नलिखित करते हैं।

 setState(() { _isLoading = true; }); 

प्रलेखन से (अनुवाद):

SetState () विधि के लिए एक कॉल उस रूपरेखा को सूचित करता है कि इस ऑब्जेक्ट की आंतरिक स्थिति बदल गई है, और उपप्रकार में उपयोगकर्ता इंटरफ़ेस को प्रभावित कर सकता है। यही कारण है कि फ्रेमवर्क इस राज्य ऑब्जेक्ट पर बिल्ड विधि को कॉल करता है।

इसका मतलब यह है कि setState() विधि को कॉल करने के बाद, फ्रेम build(BuildContext context) विधि को फिर से कॉल करेगा, जो पूरे विजेट ट्री को फिर से बनाएगा। चूंकि _buildBody() विधि के बजाय _isLoading फ़ील्ड _isLoading मान बदल गया true , इसलिए _buildLoading() विधि को कॉल किया जाएगा, और स्क्रीन पर एक प्रगति संकेतक प्रदर्शित किया जाएगा।
वास्तव में एक ही बात तब होगी जब हम getUser() से कॉलबैक प्राप्त getUser() और विधि को कॉल करेंगे
setState() _isLoading और _user फ़ील्ड में नए मान निर्दिष्ट करने के लिए।

 widget._repository.getUser().then((user) { setState(() { _user = user; _isLoading = false; }); }); 

आकर्षण आते हैं

1. कम प्रवेश दहलीज।
2. किसी तीसरे पक्ष के पुस्तकालयों की आवश्यकता नहीं।

विपक्ष

1. जब विजेट की स्थिति बदल जाती है, तो विजेट ट्री को हर बार पूरी तरह से फिर से बनाया जाता है।
2. एकमात्र जिम्मेदारी के सिद्धांत का उल्लंघन करता है। विजेट न केवल UI बनाने के लिए, बल्कि डेटा, व्यवसाय तर्क और राज्य प्रबंधन लोड करने के लिए भी जिम्मेदार है।
3. वर्तमान स्थिति को कैसे प्रदर्शित किया जाए इस पर निर्णय सीधे यूआई कोड में किए जाते हैं। यदि राज्य अधिक जटिल हो जाता है, तो कोड की पठनीयता बहुत कम हो जाएगी।

स्कोप्ड मॉडल

स्कोप्ड मॉडल एक तृतीय-पक्ष पुस्तकालय है । यहां बताया गया है कि डेवलपर्स इसका वर्णन कैसे करते हैं:

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

चलो पिछले उदाहरण के समान स्क्रीन बनाते हैं, लेकिन स्कोप्ड मॉडल का उपयोग करते हुए। सबसे पहले, हमें प्रोजेक्ट में स्कोप्ड मॉडल लाइब्रेरी को जोड़ना होगा। dependencies अनुभाग में scoped_model फ़ाइल में scoped_model निर्भरता जोड़ें।

 scoped_model: ^1.0.1 

आइए UserModelScreen कोड को देखें और पिछले उदाहरण से तुलना करें, जिसमें हमने स्कोप्ड मॉडल का उपयोग नहीं किया है। हमारे मॉडल को विजेट के वंशजों के लिए सुलभ बनाने के लिए, हमें ScopedModel में विजेट और मॉडल को लपेटने की आवश्यकता है।

 class UserModelScreen extends StatefulWidget { UserModelScreen(this._repository); final Repository _repository; @override State<StatefulWidget> createState() => _UserModelScreenState(); } class _UserModelScreenState extends State<UserModelScreen> { UserModel _userModel; @override void initState() { _userModel = UserModel(widget._repository); super.initState(); } @override Widget build(BuildContext context) { return ScopedModel( model: _userModel, child: Scaffold( appBar: AppBar( title: const Text('Scoped model'), ), body: SafeArea( child: ScopedModelDescendant<UserModel>( builder: (context, child, model) { if (model.isLoading) { return _buildLoading(); } else { if (model.user != null) { return _buildContent(model); } else { return _buildInit(model); } } }, ), ), ), ); } Widget _buildInit(UserModel userModel) { return Center( child: RaisedButton( child: const Text('Load user data'), onPressed: () { userModel.loadUserData(); }, ), ); } Widget _buildContent(UserModel userModel) { return Center( child: Text('Hello ${userModel.user.name} ${userModel.user.surname}'), ); } Widget _buildLoading() { return const Center( child: CircularProgressIndicator(), ); } } 

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

ScopedModelDescendant<UserModel> विजेट का उपयोग विजेट विजेट में UserModel को खोजने के लिए किया जाता है। हर बार जब UserModel सूचित करता है कि बदलाव हुआ है तो यह स्वतः ही फिर से आ जाएगा।

एक और सुधार यह है कि UserModelScreen अब राज्य प्रबंधन, व्यावसायिक तर्क और डेटा लोडिंग के लिए जिम्मेदार नहीं है।

उपयोगकर्ता कोड के लिए कोड को देखते हैं।

 class UserModel extends Model { UserModel(this._repository); final Repository _repository; bool _isLoading = false; User _user; User get user => _user; bool get isLoading => _isLoading; void loadUserData() { _isLoading = true; notifyListeners(); _repository.getUser().then((user) { _user = user; _isLoading = false; notifyListeners(); }); } static UserModel of(BuildContext context) => ScopedModel.of<UserModel>(context); } 

UserModel अब शामिल है और राज्य का प्रबंधन करता है। श्रोताओं को सूचित करने के लिए (और वंशजों को फिर से notifyListeners() करने के लिए) कि एक बदलाव हुआ है, notifyListeners() विधि को बुलाया जाना चाहिए।

आकर्षण आते हैं

1. स्टेट मैनेजमेंट, बिजनेस लॉजिक और डेटा लोडिंग यूआई कोड से अलग होते हैं।
2. कम प्रवेश दहलीज।

विपक्ष

1. तृतीय-पक्ष पुस्तकालय निर्भरता।
2. यदि मॉडल पर्याप्त रूप से जटिल हो जाता है, तो अनावश्यक मनोरंजन से बचने के लिए notifyListeners() विधि को कॉल करना वास्तव में आवश्यक होने पर नज़र रखना मुश्किल होगा।

ब्लॉक

BLoC ( B usiness Logic C ओमपर्स) Google से डेवलपर्स द्वारा अनुशंसित एक पैटर्न है। राज्य का प्रबंधन करने और राज्य परिवर्तन की सूचना देने के लिए धाराओं का उपयोग किया जाता है।

एंड्रॉइड डेवलपर्स के लिए: आप कल्पना कर सकते हैं कि Bloc एक LiveData है, और LiveData एक LiveData । यह निम्नलिखित कोड को समझने में आसान बना देगा, क्योंकि आप पहले से ही मूल सिद्धांतों से परिचित हैं।

 class UserBloc { UserBloc(this._repository); final Repository _repository; final _userStreamController = StreamController<UserState>(); Stream<UserState> get user => _userStreamController.stream; void loadUserData() { _userStreamController.sink.add(UserState._userLoading()); _repository.getUser().then((user) { _userStreamController.sink.add(UserState._userData(user)); }); } void dispose() { _userStreamController.close(); } } class UserState { UserState(); factory UserState._userData(User user) = UserDataState; factory UserState._userLoading() = UserLoadingState; } class UserInitState extends UserState {} class UserLoadingState extends UserState {} class UserDataState extends UserState { UserDataState(this.user); final User user; } 

कोड दिखाता है कि राज्य परिवर्तनों के बारे में सूचित करने के लिए अतिरिक्त तरीकों को कॉल करने की आवश्यकता नहीं है।

मैंने संभावित राज्यों का प्रतिनिधित्व करने के लिए 3 कक्षाएं बनाईं:

उपयोगकर्ता केंद्र में एक बटन के साथ एक स्क्रीन खोलता है, जब उपयोगकर्ता के लिए UserInitState ।

जब डेटा लोड हो रहा है तो लोडिंग इंडिकेटर प्रदर्शित होने पर राज्य के लिए UserLoadingState ।

जब डेटा पहले से लोड हो और स्क्रीन पर प्रदर्शित हो, तब स्टेट के लिए UserDataState ।

इस तरह से पासिंग स्टेट हमें यूआई कोड में तर्क से पूरी तरह से छुटकारा पाने की अनुमति देता है। स्कोपेड मॉडल उदाहरण में, हमने अभी भी जाँच की है कि _isLoading फ़ील्ड _isLoading मान true या false है कि कौन सा विजेट बनाना है। BLoC के मामले में, हम नई स्थिति को स्ट्रीम में पास करते हैं, और UserBlocScreen विजेट UserBlocScreen एकमात्र कार्य वर्तमान स्थिति के लिए UI बनाना है।

 class UserBlocScreen extends StatefulWidget { UserBlocScreen(this._repository); final Repository _repository; @override State<StatefulWidget> createState() => _UserBlocScreenState(); } class _UserBlocScreenState extends State<UserBlocScreen> { UserBloc _userBloc; @override void initState() { _userBloc = UserBloc(widget._repository); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Bloc'), ), body: SafeArea( child: StreamBuilder<UserState>( stream: _userBloc.user, initialData: UserInitState(), builder: (context, snapshot) { if (snapshot.data is UserInitState) { return _buildInit(); } if (snapshot.data is UserDataState) { UserDataState state = snapshot.data; return _buildContent(state.user); } if (snapshot.data is UserLoadingState) { return _buildLoading(); } }, ), ), ); } Widget _buildInit() { return Center( child: RaisedButton( child: const Text('Load user data'), onPressed: () { _userBloc.loadUserData(); }, ), ); } Widget _buildContent(User user) { return Center( child: Text('Hello ${user.name} ${user.surname}'), ); } Widget _buildLoading() { return const Center( child: CircularProgressIndicator(), ); } @override void dispose() { _userBloc.dispose(); super.dispose(); } } 

पिछले उदाहरणों की तुलना में UserBlocScreen विजेट के लिए कोड और भी सरल है। राज्य परिवर्तनों को सुनने के लिए, StreamBuilder का उपयोग किया जाता है। StreamBuilder एक StatefulWidget जो स्ट्रीम ( स्ट्रीम ) के अंतिम मान (स्नैपशॉट) के अनुसार खुद को बनाता है।

आकर्षण आते हैं

1. किसी तीसरे पक्ष के पुस्तकालयों की आवश्यकता नहीं।
2. व्यावसायिक तर्क, राज्य प्रबंधन और डेटा लोडिंग UI कोड से अलग होते हैं।
3. Reactivity। अतिरिक्त तरीकों को कॉल करने की आवश्यकता नहीं है, उदाहरण के लिए notifyListeners() मॉडल notifyListeners() ।

विपक्ष

1. प्रवेश सीमा थोड़ी अधिक है। धाराओं या rxdart के साथ अनुभव की आवश्यकता है।

लिंक

आप मेरे जीथब रिपॉजिटरी से डाउनलोड करके पूरा कोड पढ़ सकते हैं।

माध्यम पर प्रकाशित मूल लेख