विषय
- PWA बनाम नेटिव ऐप्स: क्या अंतर है?
- प्रगतिशील वेब ऐप्स: वेब के लिए निर्माण
- पीडब्ल्यूए की ताकत
- पीडब्ल्यूए की कमजोरियां
- प्रतिक्रिया मूल निवासी
- प्रतिक्रियाशील मूल निवासी की ताकत
- प्रतिक्रियाशील मूल निवासी की कमजोरियां
- नेटिवस्क्रिप्ट
- नेटिवस्क्रिप्ट की ताकत
- नेटिवस्क्रिप्ट की कमजोरियां
ऐप बनाते समय आपको कौन सा तरीका अपनाना चाहिए? क्या आपको पीडब्लूए/वेब प्रौद्योगिकी मार्ग अपनाना चाहिए या आपको विशिष्ट प्लेटफॉर्म के लिए देशी और डिजाइन करना चाहिए? दोनों विकल्पों के अपने फायदे और नुकसान हैं, और इस लेख में हम वेब और देशी ऐप्स बनाने के लिए उपयोग किए जाने वाले कुछ लोकप्रिय विकल्पों पर ध्यान केंद्रित करते हैं।
PWA (प्रगतिशील वेब ऐप्स) उर्फ वेब ऐप्स, लोकप्रिय वेब तकनीकों HTML, CSS और जावास्क्रिप्ट के साथ बनाए गए हैं और एक वेब ब्राउज़र में काम करते हैं। (अपने निर्माण में सहायता के लिए कुछ आवश्यक HTML टैग देखें।) PWA प्रभावी रूप से एक ऐप की तरह दिखने के लिए डिज़ाइन की गई मोबाइल वेबसाइटें हैं, और वेब API का उपयोग उन्हें मूल ऐप के समान कार्यक्षमता प्रदान करता है।
ऐप निर्माण के बारे में अधिक सलाह के लिए, ऐप बनाने के तरीके पर हमारी पोस्ट देखें, या यदि यह एक साइट है जिसे आप बनाना चाहते हैं तो इन शीर्ष वेबसाइट बिल्डरों और वेब होस्टिंग सेवाओं को देखें।
PWA बनाम नेटिव ऐप्स: क्या अंतर है?
प्रोग्रेसिव वेब ऐप्स को ऐप स्टोर की आवश्यकता के बिना डिवाइस पर इंस्टॉल करने योग्य और लाइव होने का लाभ मिलता है। और, प्रक्रिया का एक हिस्सा वेब ऐप मेनिफेस्ट है जो डेवलपर्स को यह नियंत्रित करने की अनुमति देता है कि कोई ऐप कैसे दिखाई देता है और इसे कैसे लॉन्च किया जाता है। साथ ही, वेब डिज़ाइनर/फ्रंट एंड डेवलपर्स के पास पहले से ही निर्माण शुरू करने के लिए आवश्यक कौशल होगा। देशी ऐप्स के विपरीत, नई भाषा सीखने की कोई आवश्यकता नहीं है।
नेटिव ऐप्स को एक विशिष्ट OS को ध्यान में रखकर बनाया गया है - अर्थात। आईओएस और एंड्रॉइड - और उस उद्देश्य को पूरा करने के लिए ढांचे या भाषा का उपयोग करें। आईओएस एप्लिकेशन आमतौर पर एक्सकोड या स्विफ्ट, और एंड्रॉइड ऐप, जावास्क्रिप्ट का उपयोग करते हैं। लेकिन, इस लेख के लिए हम कुछ जावास्क्रिप्ट-आधारित ओपन सोर्स फ्रेमवर्क पर ध्यान केंद्रित करते हैं - रिएक्ट नेटिव और नेटिवस्क्रिप्ट - जो दोनों प्लेटफार्मों के लिए काम करते हैं।
देशी ऐप्स के फायदे यह है कि वे आम तौर पर बेहतर कार्यक्षमता लाते हैं क्योंकि वे डिवाइस हार्डवेयर और सॉफ़्टवेयर का बेहतर उपयोग करते हैं, तेज़ और अधिक प्रतिक्रियाशील होते हैं और ऐप स्टोर में रेटिंग के बावजूद आपको गुणवत्ता आश्वासन मिलता है। लेकिन, इसका मतलब यह होगा कि किसी विशिष्ट ढांचे या पुस्तकालय का उपयोग करना सीखना होगा।
यहां हम तीन अलग-अलग विकल्पों को देखते हैं - एक वेब के लिए (पीडब्ल्यूए) और दो नेटिव (रिएक्ट नेटिव, नेटिवस्क्रिप्ट) के लिए - एक ऐप बनाने के लिए। हम देखते हैं कि वे कैसे काम करते हैं, वे क्या कर सकते हैं और उनकी ताकत और कमजोरियों को देखते हुए आपको यह तय करने में मदद मिलेगी कि आपको अपना ऐप बनाने के लिए कौन सा विकल्प चुनना चाहिए।
प्रगतिशील वेब ऐप्स: वेब के लिए निर्माण
पीडब्ल्यूए की ताकत
- ऐप्स ब्राउज़र में भी काम करते हैं
- वितरण: ब्राउज़र, उद्यम और ऐप स्टोर
- प्रतिक्रिया, कोणीय, Vue, वेनिला या अन्य ढांचे का उपयोग कर सकते हैं
पीडब्ल्यूए की कमजोरियां
- प्रत्येक देशी एपीआई तक पहुंच नहीं
- IOS और iPadOS पर क्षमताएं और स्टोर वितरण सीमित हैं
- यह निरंतर विकास में है
PWA केवल वेब स्टैक का उपयोग करके उच्च-प्रदर्शन, ऑफ़लाइन, इंस्टॉल करने योग्य ऐप्स बनाने के लिए वर्तमान डिज़ाइन पैटर्न हैं: HTML, CSS, जावास्क्रिप्ट और ब्राउज़र एपीआई। सर्विस वर्कर और वेब ऐप मेनिफेस्ट स्पेक्स के लिए धन्यवाद, अब हम Android, iOS, iPadOS, Windows, macOS, Chrome OS और Linux के लिए इंस्टॉल करने के बाद एक प्रथम श्रेणी का ऐप अनुभव बना सकते हैं।
PWA बनाने के लिए, आप किसी भी आर्किटेक्चर का उपयोग कर सकते हैं: सर्वर-साइड, वेनिला जावास्क्रिप्ट, रिएक्ट, Vue, कोणीय या अन्य क्लाइंट-साइड फ्रेमवर्क से। यह एकल-पृष्ठ एप्लिकेशन या बहु-पृष्ठ वेब एप्लिकेशन हो सकता है और हम परिभाषित करते हैं कि ऑफ़लाइन रहते हुए हम उपयोगकर्ताओं का समर्थन कैसे करेंगे।
इस दृष्टिकोण में, हमें अपने ऐप के संसाधनों को पैकेज और हस्ताक्षर करने की आवश्यकता नहीं है: हम केवल वेब सर्वर में फाइलों को होस्ट करते हैं और सेवा कार्यकर्ता क्लाइंट में फाइलों को कैशिंग करने के लिए जिम्मेदार होगा और स्थापना के बाद उनकी सेवा करेगा। इसका मतलब यह भी है कि अगर किसी ऐप को अपडेट करने की जरूरत है, तो आप सर्वर पर फाइलों को बदल दें और सर्विस वर्कर का तर्क उपयोगकर्ता या ऐप स्टोर के हस्तक्षेप के बिना उपयोगकर्ताओं के उपकरणों पर उन्हें अपडेट करने के लिए जिम्मेदार होगा।
वितरण के संदर्भ में, सबसे आम तरीका ब्राउज़र है। उपयोगकर्ता ब्राउज़र से ऐप को होम स्क्रीन में जोड़ें या मेनू आइटम इंस्टॉल करें, इंस्टॉल करने के लिए आमंत्रण स्वीकार करके या संगत प्लेटफॉर्म पर कस्टम वेब ऐप यूजर इंटरफेस का उपयोग करके इंस्टॉल करते हैं। यह ध्यान देने योग्य है कि ऐप्पल ऐप स्टोर में प्रकाशित शुद्ध पीडब्लूए को अस्वीकार कर देता है और वेब डेवलपर्स को इसे सफारी के माध्यम से वितरित करने के लिए प्रोत्साहित करता है।
उपयोगकर्ता इंटरफ़ेस पूरी तरह से वेब रनटाइम द्वारा प्रबंधित किया जाता है, जिसका अर्थ है कि वेब डिज़ाइनर स्क्रीन पर प्रत्येक नियंत्रण को प्रस्तुत करने के लिए ज़िम्मेदार है। यदि आप यूआई फ्रेमवर्क का उपयोग करते हैं, जैसे कि आयोनिक, या मटीरियल डिज़ाइन लाइब्रेरी, एचटीएमएल और सीएसएस एंड्रॉइड या आईओएस पर देशी इंटरफेस की नकल करेंगे, लेकिन यह अनिवार्य नहीं है।PWA करते समय, एक अच्छा उपयोगकर्ता अनुभव रखने के लिए वेब प्रदर्शन तकनीकों को लागू करना अनिवार्य है।
क्षमताओं के संदर्भ में, एक PWA के पास केवल उस प्लेटफ़ॉर्म पर ब्राउज़र इंजन में उपलब्ध API तक पहुंच होगी और इसे मूल कोड के साथ विस्तारित नहीं किया जा सकता है - ऐप स्टोर PWA वितरण के अपवाद के साथ। इस मामले में, आईओएस और आईपैडओएस पीडब्ल्यूए के लिए अधिक सीमित प्लेटफॉर्म हैं, जबकि क्रोम (एंड्रॉइड और डेस्कटॉप ओएस के लिए) में अधिक उपलब्धता है और फुगु प्रोजेक्ट के साथ जावास्क्रिप्ट में हर संभव एपीआई को जोड़ने के लिए कड़ी मेहनत कर रहा है।
- सर्वश्रेष्ठ क्लाउड स्टोरेज: अपने लिए सही विकल्प चुनें।
प्रतिक्रिया मूल निवासी
प्रतिक्रियाशील मूल निवासी की ताकत
- React.js के समान पैटर्न
- कुछ वेब एपीआई सामने आ रहे हैं
- वेब और डेस्कटॉप समर्थन
प्रतिक्रियाशील मूल निवासी की कमजोरियां
- वेब UI घटकों का पुन: उपयोग नहीं किया जा सकता
- देशी पुल को कुछ काम की जरूरत है
- प्रतिक्रिया अनुभव की जरूरत है
रिएक्ट नेटिव एक ओपन-सोर्स जावास्क्रिप्ट-आधारित घटक ढांचा है, जो फेसबुक द्वारा प्रायोजित है, जो एक स्रोत कोड से आईओएस, आईपैडओएस और एंड्रॉइड के लिए देशी ऐप को संकलित करने के लिए रिएक्ट डिज़ाइन पैटर्न के साथ-साथ जावास्क्रिप्ट भाषा का उपयोग करता है।
लेकिन प्रतिपादन के लिए कोई HTML तत्व स्वीकार नहीं किया जाता है; केवल अन्य मूल घटक मान्य हैं। इसलिए, प्रस्तुत करने के बजाय a डिव> के साथ पी> और एक इनपुट> JSX के साथ तत्व, आप प्रस्तुत करेंगे a देखें> के साथ पाठ> और एक टेक्स्ट इनपुट>. स्टाइलिंग घटकों के लिए, आप अभी भी सीएसएस का उपयोग करते हैं और लेआउट फ्लेक्सबॉक्स के माध्यम से परिभाषित किया गया है।
उपयोगकर्ता इंटरफ़ेस ब्राउज़र के DOM में नहीं बल्कि Android और iOS पर मूल उपयोगकर्ता इंटरफ़ेस लाइब्रेरी का उपयोग करके रेंडर किया जाएगा। इसलिए, ए बटन> ReactNative में iOS पर UIButton का एक उदाहरण बन जाएगा और become android.widget.Button एंड्रॉइड पर क्लास; रिएक्ट नेटिव में कोई वेब रनटाइम शामिल नहीं है।
हालांकि, सभी जावास्क्रिप्ट कोड को एक जावास्क्रिप्ट वर्चुअल मशीन ऑन-डिवाइस में निष्पादित किया जाएगा, इसलिए ऐप को संकलित करते समय वास्तविक मूल कोड रूपांतरण के लिए कोई जावास्क्रिप्ट नहीं है। वेब डेवलपर्स के लिए प्रसिद्ध API का एक सेट है, जैसे Fetch API, WebSockets और ब्राउज़र के टाइमर: setInterval और requestAnimationFrame। अन्य क्षमताओं को मंच में कस्टम एपीआई के माध्यम से तैनात किया जाता है, जैसे एनिमेशन।
आप दो मुफ़्त सीएलआई के साथ एक त्वरित रिएक्ट नेटिव प्रोजेक्ट शुरू कर सकते हैं: एक्सपो या अधिक उन्नत और आधिकारिक रिएक्टनेटिव सीएलआई। यदि आप आधिकारिक सीएलआई का उपयोग करते हैं, तो आपको आईओएस और आईपैडओएस पर एंड्रॉइड ऐप और एक्सकोड को संकलित और परीक्षण करने के लिए एंड्रॉइड स्टूडियो की भी आवश्यकता है, इसलिए आपको उस प्लेटफॉर्म के लिए मैकोज़ कंप्यूटर की आवश्यकता होगी।
रिएक्ट नेटिव आईओएस और एंड्रॉइड के लिए देशी ऐप्स को संकलित करता है, जिसका अर्थ है कि आपके ऐप का वितरण अन्य मूल ऐप्स के समान नियमों का पालन करेगा: सार्वजनिक ऐप्स के लिए ऐप स्टोर, एंटरप्राइज़ वितरण और अल्फा/बीटा परीक्षण। आमतौर पर, आप एक ब्राउज़र के माध्यम से एक ऐप वितरित नहीं कर सकते हैं, हालांकि वेब के लिए रिएक्ट नेटिव और विंडोज प्लेटफॉर्म के लिए माइक्रोसॉफ्ट के रिएक्ट नेटिव मदद कर सकते हैं।
नेटिवस्क्रिप्ट
नेटिवस्क्रिप्ट की ताकत
- कोडिंग और परीक्षण के लिए अच्छे उपकरण
- साथ खेलने के लिए तैयार ऐप्स की विस्तृत गैलरी
- सभी Android और iOS API JS में प्रदर्शित होते हैं
नेटिवस्क्रिप्ट की कमजोरियां
- छोटा समुदाय
- वेब UI घटकों का पुन: उपयोग नहीं किया जा सकता
- कोई वेब, डेस्कटॉप या प्रतिक्रिया समर्थन नहीं
नेटिवस्क्रिप्ट रिएक्ट नेटिव के रूप में प्रसिद्ध नहीं है, लेकिन यह उसी क्षेत्र में प्रतिस्पर्धा करता है: जावास्क्रिप्ट और वेब फ्रेमवर्क से देशी आईओएस और एंड्रॉइड ऐप। यह आपको देशी ऐप्स बनाने के लिए जावास्क्रिप्ट या टाइपस्क्रिप्ट और एक एक्सएमएल यूजर इंटरफेस फ़ाइल का उपयोग करने देता है। यह एंगुलर और वीयू को बिल्कुल सही सपोर्ट करता है, इसलिए यह इन फ्रेमवर्क के लिए उपयोग किए जाने वाले डेवलपर्स के लिए एक बढ़िया समाधान है।
जब आप Angular या Vue का उपयोग करते हैं तो नेटिवस्क्रिप्ट के फायदे स्पष्ट होते हैं। कोणीय के लिए, आप वही घटक बनाते हैं जिनका आप उपयोग करते हैं लेकिन सभी डेटा बाइंडिंग सहित टेम्पलेट के लिए HTML के बजाय XML का उपयोग करते हैं। XML में, a . के बजाय डिव> के साथ पी> और एक आईएमजी>, आप एक जगह देंगे स्टैकलेआउट> के साथ लेबल> और एक छवि> घटक।
CSS और Sass ब्राउज़र में CSS के समान शैलियों के साथ समर्थित हैं। रूटिंग और नेटवर्क प्रबंधन मानक कोणीय सेवाओं के कार्यान्वयन के माध्यम से किया जाता है। Vue के लिए, यह कुछ ऐसा ही है; आप उसी में HTML का उपयोग करने के बजाय XML में टेम्प्लेट लिखते हैं टेम्पलेट> आपकी .vue फ़ाइल में तत्व।
नेटिवस्क्रिप्ट में घटकों का एक संग्रह शामिल होता है जिसे बाद में एंड्रॉइड या आईओएस देशी नियंत्रण में मैप किया जाता है, इसलिए जब आप एक सूची या पिकर प्रस्तुत करते हैं, तो यह मूल ऐप होगा, उसी विचार का उपयोग करके रिएक्ट नेटिव में।
आपका जावास्क्रिप्ट या टाइपस्क्रिप्ट कोड (ट्रांसपिल्ड) एक ऑन-डिवाइस जावास्क्रिप्ट वर्चुअल मशीन में एक सेतु के साथ/मूल वातावरण से निष्पादित किया जाता है। उस ब्रिज में, एंड्रॉइड या आईओएस/आईपैडओएस से संपूर्ण देशी एपीआई उजागर होते हैं, इसलिए क्रॉस-प्लेटफ़ॉर्म एपीआई तक पहुंच होने के बावजूद, हम जावास्क्रिप्ट/टाइपस्क्रिप्ट से किसी भी जावा या ऑब्जेक्टिव-सी कोड को इंस्टेंट या कॉल कर सकते हैं और नेटिवस्क्रिप्ट डेटा प्रकारों को मार्शल करेगा।
वीएस कोड प्लगइन्स, सीएलआई, एक हॉट-रीलोड टेस्टिंग सिस्टम और एक नेटिवस्क्रिप्ट प्लेग्राउंड ऐप सहित टूलिंग के लिए नेटिवस्क्रिप्ट में बहुत अच्छा समर्थन है, इसलिए आपको परीक्षण के दौरान सभी निर्भरताएं स्थापित करने की आवश्यकता नहीं है, साथ ही कई अतिरिक्त सेवाएं जैसे ऑनलाइन खेल का मैदान।
अंत में, नेटिवस्क्रिप्ट केवल एंड्रॉइड और आईओएस के लिए एक ऐप संकलित करता है जिसे आधिकारिक वितरण चैनलों और ऐप स्टोर से इंस्टॉल किया जा सकता है यदि आप उनके नियमों, उद्यम वितरण और अल्फा / बीटा परीक्षण का पालन करते हैं। आमतौर पर ब्राउज़र से ऐप्स वितरित करने का कोई तरीका नहीं होगा और इस प्लेटफ़ॉर्म के लिए डेस्कटॉप ऐप्स के लिए कोई समाधान नहीं है।
यह लेख मूल रूप से . में प्रकाशित हुआ था अंक 325 वेब डिजाइनरों और डेवलपर्स के लिए दुनिया की सबसे ज्यादा बिकने वाली पत्रिका नेट की। खरीद अंक 325 या सदस्यता लेने के नेट के लिए।
जेनरेटजेएस में जावास्क्रिप्ट सुपरस्टार्स के हमारे लाइनअप के साथ अप्रैल 2020 में हमसे जुड़ें - बेहतर जावास्क्रिप्ट बनाने में आपकी मदद करने वाला सम्मेलन। अभी बुक करेंGenerateconf.com
