घोड़े ने सबसे अधिक प्रतिज्ञा की, लेकिन सामूहिक खेत के अध्यक्ष नहीं बने

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

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

एक विकसित अनुप्रयोग के रूप में, एक "स्पोर्ट्स टाइमर" बनाने का निर्णय लिया गया, जो अंतराल प्रशिक्षण का प्रदर्शन करते समय लोगों को खेल में शामिल करने में मदद करेगा।

आवेदन 3 स्क्रीन के होते हैं।


टाइमर ऑपरेशन स्क्रीन


वर्कआउट हिस्ट्री स्क्रीन


टाइमर सेटिंग्स स्क्रीन

यह एप्लिकेशन एक डेवलपर के रूप में मेरे लिए दिलचस्प है, क्योंकि निम्नलिखित घटक जो मेरी रुचि रखते हैं, इसके निर्माण से प्रभावित होंगे:
- लेआउट
- कस्टम दृश्य
- यूआई सूची के साथ काम करें
- मल्टीथ्रेडिंग
- डेटाबेस
- नेटवर्क
- की-वैल्यू स्टोरेज

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

विकास के साधनों का चयन

IOS के लिए एक मूल आवेदन के लिए - मैंने Xcode विकास पर्यावरण और स्विफ्ट प्रोग्रामिंग भाषा को चुना। देशी एंड्रॉइड के लिए - एंड्रॉइड स्टूडियो और कोटलिन। जेसी प्रोग्रामिंग भाषा, वेबस्टॉर्म में प्रतिक्रियाशील मूल विकसित हुई। स्पंदन - एंड्रॉइड स्टूडियो और डार्ट।

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

परियोजना की संरचना

देशी आईओएस और एंड्रॉइड प्रोजेक्ट की संरचनाएं बहुत समान हैं। यह एक्सटेंशन .storyboard (iOS) और .xml (Android), निर्भरता प्रबंधक Podfile (iOS) और ग्रैडल (Android), एक्सटेंशन के साथ स्रोत कोड फ़ाइलें .swift (iOS) और .kt (Android) के साथ एक लेआउट फ़ाइल है।


Android प्रोजेक्ट संरचना


IOS परियोजना संरचना

स्पंदन और रिएक्टिव नेटिव संरचनाओं में एंड्रॉइड और आईओएस फ़ोल्डर शामिल हैं, जिनमें एंड्रॉइड और आईओएस के लिए सामान्य मूल परियोजनाएं शामिल हैं। स्पंदन और प्रतिक्रिया मूल निवासी एक पुस्तकालय के रूप में देशी परियोजनाओं से जुड़ते हैं। वास्तव में, जब आप अपने iOS डिवाइस पर Flutter लॉन्च करते हैं, तो सामान्य मूल iOS एप्लिकेशन फ़्लटर लाइब्रेरी से जुड़ा होता है। रिएक्ट नेटिव के लिए और एंड्रॉइड के लिए, सब कुछ समान है।

फ़्लटर और रिएक्ट नेटिव में पैकेज .json (रिएक्ट नेटिव) और pubspec.yaml (फ़्लटर) निर्भरता प्रबंधक और .js (रिएक्ट नेटिव) और .dart (फ़्लटर) एक्सटेंशन के साथ स्रोत फ़ाइलें भी होती हैं, जिसमें लेआउट भी होते हैं।


स्पंदन परियोजना संरचना


रिएक्टिव नेटिव प्रोजेक्ट स्ट्रक्चर

मेकअप

देशी आईओएस और एंड्रॉइड के लिए, दृश्य संपादक हैं। यह स्क्रीन के निर्माण को बहुत सरल करता है।


देशी Android के लिए विजुअल एडिटर


देशी iOS के लिए विजुअल एडिटर

प्रतिक्रियाशील मूल और स्पंदन के लिए कोई दृश्य संपादक नहीं हैं, लेकिन हॉट रीलोड फ़ंक्शन के लिए समर्थन है, जो कम से कम किसी तरह यूआई के साथ काम करना सरल करता है।


स्पंदन में गर्म रिबूट


रिएक्ट नेटिव में हॉट रिबूट

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

एंड्रॉइड और आईओएस में, व्यू प्रॉपर्टी को बदलने के लिए, हम इसे कोड से एक लिंक का उपयोग करते हैं और उदाहरण के लिए, पृष्ठभूमि का रंग बदलने के लिए, हम सीधे ऑब्जेक्ट में परिवर्तन का कारण बनते हैं। प्रतिक्रियाशील मूल और स्पंदन के मामले में, एक और दर्शन है: हम सेटस्टैट कॉल के अंदर गुणों को बदलते हैं, और बदले हुए राज्य के आधार पर दृश्य स्वयं को फिर से परिभाषित किया जाता है।

प्रत्येक चयनित समाधान के लिए एक टाइमर स्क्रीन बनाने के उदाहरण:


एंड्रॉइड पर टाइमर स्क्रीन का लेआउट


IOS पर टाइमर स्क्रीन का लेआउट

स्पंदन टाइमर स्क्रीन का लेआउट

@override Widget build(BuildContext context) { return Scaffold( body: Stack( children: <Widget>[ new Container( color: color, child: new Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text( " ${getTextByType(trainingModel.type)}", style: new TextStyle( fontWeight: FontWeight.bold, fontSize: 24.0), ), new Text( "${trainingModel.timeSec}", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 56.0), ), new Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text( " ${trainingModel.setCount}", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 24.0), ), Text( " ${trainingModel.cycleCount}", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 24.0), ), ], ), ], ), padding: const EdgeInsets.all(20.0), ), new Center( child: CustomPaint( painter: MyCustomPainter( //0.0 trainingModel.getPercent()), size: Size.infinite, ), ) ], )); } 

रिएक्टिव नेटिव टाइमर स्क्रीन लेआउट

  render() { return ( <View style={{ flex: 20, flexDirection: 'column', justifyContent: 'space-between', alignItems: 'stretch', }}> <View style={{height: 100}}> <Text style={{textAlign: 'center', fontSize: 24}}> {this.state.value.type} </Text> </View> <View style={styles.container}> <CanvasTest data={this.state.value} style={styles.center}/> </View> <View style={{height: 120}}> <View style={{flex: 1}}> <View style={{flex: 1, padding: 20,}}> <Text style={{fontSize: 24}}>  {this.state.value.setCount} </Text> </View> <View style={{flex: 1, padding: 20,}}> <Text style={{textAlign: 'right', fontSize: 24}}>  {this.state.value.cycleCount} </Text> </View> </View> </View> </View> ); } 

कस्टम दृश्य

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



देशी आईओएस के लिए कोई समस्या नहीं थी, क्योंकि लेयर तक पहुंच है, जिस पर आप अपनी इच्छानुसार कुछ भी आकर्षित कर सकते हैं।

  let shapeLayer = CAShapeLayer() var angle = (-Double.pi / 2 - 0.000001 + (Double.pi * 2) * percent) let circlePath = UIBezierPath(arcCenter: CGPoint(x: 100, y: 100), radius: CGFloat(95), startAngle: CGFloat(-Double.pi / 2), endAngle: CGFloat(angle), clockwise: true) shapeLayer.path = circlePath.cgPa 

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

  @Override protected void onDraw(Canvas canvas) { pathCircleOne = new Path(); pathCircleOne.addArc(rectForCircle, -90, value * 3.6F); canvas.drawPath(pathCircleBackground, paintCircleBackground); } 

स्पंदन के लिए, आप एक वर्ग बना सकते हैं जो CustomPainter से विरासत में मिला है। और पेंट (कैनवस कैनवास, आकार आकार) विधि को ओवरराइड करते हैं, जो पैरामीटर में कैनवस ऑब्जेक्ट को पास करता है - अर्थात, एंड्रॉइड के समान एक समान कार्यान्वयन।

  @override void paint(Canvas canvas, Size size) { Path path = Path() ..addArc( Rect.fromCircle( radius: size.width / 3.0, center: Offset(size.width / 2, size.height / 2), ), -pi * 2 / 4, pi * 2 * _percent / 100); canvas.drawPath(path, paint); } 

रिएक्ट नेटिव के लिए, बॉक्स से बाहर एक समाधान नहीं मिला। मुझे लगता है कि यह इस तथ्य से समझाया गया है कि दृश्य केवल js पर वर्णित है, और यह देशी ui तत्वों द्वारा बनाया गया है। लेकिन आप प्रतिक्रिया-मूल-कैनवास लाइब्रेरी का उपयोग कर सकते हैं, जो कैनवास तक पहुंच प्रदान करता है।

  handleCanvas = (canvas) => { if (canvas) { var modelTimer = this.state.value; const context = canvas.getContext('2d'); context.arc(75, 75, 70, -Math.PI / 2, -Math.PI / 2 - 0.000001 - (Math.PI * 2) * (modelTimer.timeSec / modelTimer.maxValue), false); } } 

UI सूचियों के साथ कार्य करना

एंड्रॉइड, आईओएस, स्पंदन के लिए एल्गोरिदम - समाधान बहुत समान हैं। हमें यह इंगित करने की आवश्यकता है कि सूची में कितने तत्व हैं। और जिस सेल को आप ड्रॉ करना चाहते हैं उस तत्व की संख्या के अनुसार दें।
IOS सूचियों को आकर्षित करने के लिए UITableView का उपयोग करता है, जिसमें आपको डेटा स्रोत विधियों को लागू करने की आवश्यकता होती है।

  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return countCell } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { return cell } 

एंड्रॉइड के लिए, वे RecyclerView का उपयोग करते हैं, जिसमें हम उसी तरह के iOS तरीकों को लागू करते हैं।

 class MyAdapter(private val myDataset: Array<String>) : RecyclerView.Adapter<MyAdapter.MyViewHolder>() { override fun onBindViewHolder(holder: MyViewHolder, position: Int) { holder.textView.text = myDataset[position] } override fun getItemCount() = myDataset.size } 

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

 new ListView.builder( itemCount: getCount() * 2, itemBuilder: (BuildContext context, int i) { return new HistoryWidget( Key("a ${models[index].workTime}"), models[index]); }, ) 

React Native एक ListView का उपयोग करता है। कार्यान्वयन पिछले समाधानों के समान है। लेकिन सूची में तत्वों की संख्या और संख्या का कोई संदर्भ नहीं है, डेटा स्रोत में हम तत्वों की सूची निर्धारित करते हैं। और रेंडररो में, हम एक सेल के निर्माण को लागू करते हैं जिसके आधार पर यह तत्व आया है।

 <ListView dataSource={this.state.dataSource} renderRow={(data) => <HistoryItem data={data}/>} /> 

मल्टीथ्रेडिंग, अतुल्यकालिक

जब मैंने मल्टीथ्रेडिंग, एसिंक्रोनसी से निपटना शुरू किया, तो मुझे समाधानों की विविधता से भयभीत किया गया। IOS में - यह जीसीडी, ऑपरेशन है, एंड्रॉइड में - AsyncTask, Loader, Coroutine, React Native - Promise, Async / Await में, Flutter-Future, Stream में। कुछ समाधानों के सिद्धांत समान हैं, लेकिन कार्यान्वयन अभी भी अलग है।
प्रिय Rx बचाव के लिए आया था। यदि आप पहले से ही उसके प्यार में नहीं हैं, तो मैं आपको अध्ययन करने की सलाह देता हूं। यह उन सभी समाधानों में है जिन्हें मैं फॉर्म में मानता हूं: आरएक्सडार्ट, आरएक्सजाव, आरएक्सजे, आरएक्सस्विफ्ट।

RxJava

  Observable.interval(1, TimeUnit.SECONDS) .subscribe(object : Subscriber<Long>() { fun onCompleted() { println("onCompleted") } fun onError(e: Throwable) { println("onError -> " + e.message) } fun onNext(l: Long?) { println("onNext -> " + l!!) } }) 

RxSwift

 Observable<Int>.interval(1.0, scheduler: MainScheduler.instance) .subscribe(onNext: { print($0) }) 

RxDart

  Stream.fromIterable([1, 2, 3]) .transform(new IntervalStreamTransformer(seconds: 1)) .listen((i) => print("$i sec"); 

RxJS

 Rx.Observable .interval(500 /* ms */) .timeInterval() .take(3) .subscribe( function (x) { console.log('Next: ' + x); }, function (err) { console.log('Error: ' + err); }, function () { console.log('Completed'); }) 

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

डेटाबेस

मोबाइल एप्लिकेशन में, मानक SQLite डेटाबेस है। प्रत्येक माना समाधान में, इसके साथ काम करने के लिए एक आवरण लिखा जाता है। Android आमतौर पर ORM कक्ष का उपयोग करता है।

IOS पर, Core Data। स्पंदन स्क्फ़लाइट संवेग का उपयोग कर सकता है।

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

रियलम डेटा स्टोरेज लाइब्रेरी की ओर देखना शायद बेहतर है, जो डेटा स्टोरेज के लिए अपने कर्नेल का उपयोग करता है। यह iOS, Android, और React Native पर समर्थित है। स्पंदन में वर्तमान में समर्थन नहीं है, लेकिन दायरे इंजीनियर उस दिशा में काम करते हैं।

Android पर दायरे

 RealmResults<Item> item = realm.where(Item.class) .lessThan("id", 2) .findAll(); 

IOS पर दायरे

 let item = realm.objects(Item.self).filter("id < 2") 

रिएक्ट नेटिव में दायरे

 let item = realm.objects('Item').filtered('id < 2'); 

की-वैल्यू स्टोरेज

Native iOS यूजरडिफॉल्ट्स का उपयोग करता है। देशी Android में, प्राथमिकताएँ। रिएक्ट नेटिव और स्पंदन में, आप उन पुस्तकालयों का उपयोग कर सकते हैं जो मूल कुंजी-मूल्य स्टोर (शेयर्डप्रिफरेंस (एंड्रॉइड) और यूजरडिफॉल्ट्स (आईओएस)) के रैपर हैं।

एंड्रॉयड

 SharedPreferences sPref = getPreferences(MODE_PRIVATE); Editor ed = sPref.edit(); ed.putString("my key'", myValue); ed.commit(); 

आईओएस

 let defaults = UserDefaults.standard defaults.integer(forKey: "my key'") defaults.set(myValue, forKey: "my key") 

स्पंदन

 SharedPreferences prefs = await SharedPreferences.getInstance(); prefs.getInt(my key') prefs.setInt(my key', myValue) 

मूल निवासी

 DefaultPreference.get('my key').then(function(value) {console.log(value)}); DefaultPreference.set('my key', myValue).then(function() {console.log('done')}); 

नेटवर्क

देशी आईओएस और एंड्रॉइड में नेटवर्क के साथ काम करने के लिए बड़ी संख्या में समाधान हैं। सबसे लोकप्रिय Alamofire (iOS) और Retrofit (Android) हैं। प्रतिक्रियाशील मूल और स्पंदन ऑनलाइन जाने के लिए अपने स्वयं के प्लेटफ़ॉर्म-स्वतंत्र ग्राहक हैं। सभी ग्राहकों को बहुत समान रूप से डिज़ाइन किया गया है।

एंड्रॉयड

 Retrofit.Builder() .baseUrl("https://timerble-8665b.firebaseio.com") .build() @GET("/messages.json") fun getData(): Observable<Map<String,RealtimeModel>> 

आईओएस

 let url = URL(string: "https://timerble-8665b.firebaseio.com/messages.json") Alamofire.request(url, method: .get) .responseJSON { response in … 

स्पंदन

 http.Response response = await http.get('https://timerble-8665b.firebaseio.com/messages.json') 

मूल निवासी

 fetch('https://timerble-8665b.firebaseio.com/messages.json') .then((response) => response.json()) 

विकास का समय

मेरे विकास के समय के आधार पर कोई निष्कर्ष निकालना शायद गलत है, क्योंकि मैं एक Android डेवलपर हूं। लेकिन मुझे लगता है कि iOS डेवलपर के लिए, Flutter और Android तकनीक में प्रवेश करना React Native की तुलना में आसान प्रतीत होगा।

निष्कर्ष

एक लेख लिखना शुरू करना, मुझे पता था कि मैं निष्कर्ष में क्या लिखूंगा। मैं आपको बताऊंगा कि कौन सा समाधान मुझे अधिक पसंद आया, किस समाधान का उपयोग नहीं किया जाना चाहिए। लेकिन फिर, उत्पादन में इन समाधानों का उपयोग करने वाले लोगों के साथ बात करने के बाद, मुझे एहसास हुआ कि मेरे निष्कर्ष गलत हैं, क्योंकि मैं अपने अनुभव के पक्ष से सब कुछ देखता हूं। मुख्य बात, मुझे एहसास हुआ कि विचार किए गए प्रत्येक समाधान के लिए, ऐसी परियोजनाएं हैं जिनके लिए यह आदर्श रूप से अनुकूल है। और कभी-कभी व्यवसाय के लिए क्रॉस-प्लेटफ़ॉर्म एप्लिकेशन बनाने के लिए यह अधिक लाभदायक होता है, बजाय दो मूल लोगों के विकास के लिए। और अगर कुछ समाधान आपकी परियोजना के लिए उपयुक्त नहीं है, तो यह मत सोचो कि यह सिद्धांत रूप में खराब है। आशा है कि यह लेख सहायक है। अंत तक पहुंचने के लिए धन्यवाद।

लेख संपादन के बारे में, कृपया एक व्यक्तिगत ईमेल में लिखें, मैं सब कुछ खुशी के साथ ठीक कर दूंगा।