आयोनिक 4 बनाम आयोनिक 3 के बीच तुलना

आयनिक 3 बनाम आयनिक 4

आयनिक 4 के बारे में

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

निश्चित रूप से आपको कई संदेह होंगे - और शायद डर - इस संस्करण परिवर्तन के बारे में। लेकिन अच्छी खबर यह है कि ईओण 4 द्वारा पेश किए गए महान सुधारों के बावजूद, आयोनिक 3 से आयोनिक 4 तक पलायन सुपर सरल है!

इस लेख में मैं Ionic 4 और Ionic 3 के बीच की तुलना, साथ ही इस नए संस्करण की सस्ता माल और नई अवधारणाओं की व्याख्या करना चाहता हूं। आइए देखें कि नए Ionic CLI और नए राउटर का उपयोग करने के व्यावहारिक उदाहरण देखें। फिर अंत में मैं आपको Ionic 3 से Ionic 4 तक अपने अनुप्रयोगों को स्थानांतरित करने के तरीके के बारे में मार्गदर्शन करूंगा।

वेब घटक

Ionic फ्रेमवर्क 4 वेब एपीआई का उपयोग करने के लिए पूरी तरह से फिर से लिखा गया था और प्रत्येक घटक को वेब घटक के रूप में पैक किया गया है। यह फ्रेमवर्क को भविष्य में प्रोजेक्ट करने की अनुमति देता है। वेब कंपोनेंट्स बनाने में मदद करने के लिए, टीम ने स्टैंसिल नामक एक टूल बनाया।

वेब घटक क्या हैं?

वेब घटक वेब APIs का एक सेट है जो आपको HTML टैग बनाने की अनुमति देता है जो पुन: प्रयोज्य और एन्क्रिप्ट किए जाते हैं।

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

वेब घटकों के साथ, आप लगभग कुछ भी बना सकते हैं जो HTML, सीएसएस और जावास्क्रिप्ट के साथ किया जा सकता है। इस तरह आप एक पोर्टेबल कंपोनेंट बना सकते हैं जिसका आसानी से पुन: उपयोग किया जा सकता है।

वेब घटक ब्राउज़र को बनाते हैं जो अधिक काम करता है और इस तरह वे आधुनिक अनुप्रयोगों के प्रदर्शन और लोड समय में महत्वपूर्ण सुधार प्रदान करते हैं।

वेब घटक निम्नलिखित विशिष्टताओं पर आधारित हैं:

  • कस्टम तत्व: नए प्रकार के DOM तत्वों को डिज़ाइन और उपयोग करने के लिए आधार और मूल सिद्धांतों को परिभाषित करता है।
  • शैडो डोम: परिभाषित करता है कि किसी वेब कंपोनेंट के भीतर इनकैप्सुलेटेड स्टाइल और कोड का उपयोग कैसे करें।
  • HTML आयात: मूल रूप से HTML दस्तावेज़ को अन्य HTML दस्तावेज़ में शामिल करने और पुन: उपयोग करने के तरीके को परिभाषित करता है।
  • HTML टेम्प्लेट: यह निर्धारित करता है कि कोड के टुकड़े को कैसे घोषित किया जाए, जिसका उपयोग पृष्ठ लोड करते समय नहीं किया जाएगा, लेकिन बाद में रनटाइम पर तुरंत किया जा सकता है।

अन्य फ्रेमवर्क के साथ संगतता

अपनी स्थापना के बाद से आयोनिक फ्रेमवर्क कोणीय का उपयोग करके बनाया गया था। लेकिन अब वेब घटकों की लोकप्रियता और समर्थन के साथ यह बदल गया है।

आयोनिक के इस नए संस्करण का एक बड़ा बदलाव यह है कि यह आधार ढांचे से पूरी तरह स्वतंत्र है (पहले यह स्थान केवल कोणीय द्वारा कब्जा कर लिया गया था)।

चूंकि आयनिक फ्रेमवर्क के घटक, जैसे कि <आयन-बटन>, को अब वेब घटक के रूप में समझाया गया है, अब आधार ढांचे से बंधना आवश्यक नहीं है। वेब घटक किसी भी फ्रेमवर्क के साथ काम करते हैं, वास्तव में यदि आप चाहें तो आप किसी भी फ्रेमवर्क का उपयोग नहीं कर सकते हैं।

इस बदलाव के साथ Ionic फ्रेमवर्क टीम का इरादा है कि Ionic एक यूआई फ्रेमवर्क है जो प्रोग्रामर जो भी तकनीक चुनते हैं, उसके साथ काम कर सकते हैं। यह भविष्य के अनुप्रयोगों के लिए दरवाजा खोलता है जो ईओण वेब घटकों का उपयोग करके Vue या React में बनाए जा सकते हैं।

Ionic 4 पर Ionic CLI CLI 4.0 पूरी तरह से दोनों सुविधाओं में प्रदान करता है और इसकी गति और उपयोग में आसानी में सुधार हुआ है।

इसका उपयोग करने के लिए, हमारे पास हमारे विकास के माहौल में CLI का नवीनतम संस्करण होना चाहिए। हम निम्नलिखित कमांड चलाकर इसे स्थापित कर सकते हैं:

npm स्थापित -g आयनिक @ नवीनतम
सीएलआई के नवीनतम संस्करण का उपयोग करने के लिए हमने नोड 8.9 या उच्चतर स्थापित किया होगा। Node.js. को अपडेट करने के बारे में निर्देश खोजने के लिए https://nodejs.org/ पर जाएं।

एक बार नया सीएलआई स्थापित होने के बाद, हम अब आयनिक 4 के साथ अपना पहला एप्लिकेशन बना सकते हैं। निम्नलिखित कमांड को चलाकर, सीएलआई Ionic 4 की मूल संरचना के साथ एक नया एप्लिकेशन बनाएगा:

ईओण प्रारंभ appName रिक्त - टाइप = कोणीय

appName आपके प्रोजेक्ट का नाम है

रिक्त वह टेम्पलेट है जिसे हम एप्लिकेशन के कंकाल बनाने के लिए चुनते हैं

प्रकार = कोणीय परियोजना का प्रकार है

फिर ब्राउज़र में अपने एप्लिकेशन का परीक्षण करने के लिए आप वही कमांड चला सकते हैं जो हमने Ionic 3 में पहले इस्तेमाल किया था।

आयनिक सेवा

यह CLI के साथ उत्पन्न हमारे नए Ionic 4 अनुप्रयोग की संरचना है:

इस नए सीएलआई के साथ, हम नए पृष्ठों, घटकों, निर्देशों और सेवाओं को बनाने के लिए कंसोल कमांड का उपयोग करने की संभावना रखते हैं। आइए कुछ उदाहरण देखें:

पेज बनाएं :

आयनिक जी पृष्ठ उपयोगकर्ता

एक नई सेवा बनाएँ:

आयनिक जी सेवा

ये सिर्फ कुछ नई कार्यक्षमताएँ हैं जो नई CLI, विवरण के लिए नए Ionic प्रलेखन और सुविधाओं का पता लगाती हैं।

Ionic 4 पर नेविगेशन

नेविगेशन और राउटर में महान परिवर्तन हैं, जो मेरी राय में इसे बहुत सरल और अधिक समझने योग्य बनाता है। Ionic 4 अब कोणीय राउटर का उपयोग करता है।

आयोनिक 3 ने एक साधारण स्टैक पर आधारित एक नेविगेशन का उपयोग किया जहां स्टैक कर रहे पुश के ऊपर नए पृष्ठ रखे गए थे और जब हम पीछे की ओर नेविगेट करना चाहते थे तो हमने बस अंतिम पृष्ठ का एक पॉप बनाया।

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

उल्लेख के लिए कुछ महत्वपूर्ण यह है कि आयनिक 4 में नवकंट्रोलर और आयन-नौसेना अप्रचलित हो गए हैं। आप अभी भी उनका उपयोग कर सकते हैं, लेकिन केवल तभी जब आपका एप्लिकेशन आलसी लोडिंग का उपयोग नहीं करता है।

आयन-नेवी और नवकंट्रोलर के बजाय, आयोनिक 4 अब @ कोणीय / राउटर का उपयोग करता है।

जैसा कि हमने पहले ही कहा था, कोणीय प्रकार का अनुप्रयोग बनाते समय, आयोनिक 4, कोणीय 6 के नेविगेशन का उपयोग करता है। इसीलिए कोणीय प्रकार के हमारे आयनिक 4 अनुप्रयोग बनाते समय हम स्वचालित रूप से src / app में स्थित एक ऐप-रूटिंग.module.ts फ़ाइल बनाते हैं।

आइए देखें कि इस फ़ाइल में क्या है और Ionic 3 में एक आवेदन के साथ क्या अंतर हैं।

आयनिक 4 में:

'@ कोणीय / कोर' से {NgModule} आयात करें;
'@ कोणीय / राउटर' से {Routes, RouterModule} आयात करें;
कास्ट रूट: रूट = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {पथ: 'घर', लोडशिल्ड्रन: './ages/home/home.module#HomePageModule'},
];
@NgModule ({
आयात: [RouterModule.forRoot (मार्ग)],
निर्यात: [RouterModule]
})
निर्यात वर्ग AppRoutModule {}

होमपेज पर नेविगेट करने के लिए हमें निम्नलिखित कार्य करने चाहिए:

'@ कोणीय / रूटर' से {Router} आयात करें;
कंस्ट्रक्टर (निजी राउटर: राउटर) {}
नेविगेटटहोम () {
  this.router.navigate (['/ घर']);
}

आयनिक 3 में:

'आयनिक-कोणीय' से {NavController} आयात;
'{./ages/home/home' से {HomePage} आयात करें
कंस्ट्रक्टर (सार्वजनिक नौसैनिक: NavController) {}
नेविगेटटहोम () {
  this.navCtrl.push (होमपेज);
}

यह समझना महत्वपूर्ण है कि Ionic 4 में, navController का उपयोग अब एप्लिकेशन को नेविगेट करने के लिए नहीं किया जाता है।

उदाहरण Ionic 4 पर नेविगेशन

आइए एक कदम आगे बढ़ाएँ और देखें कि Ionic 4 में दो पृष्ठों के बीच जानकारी कैसे दी जाए।

// आइटम शैली का एक उद्देश्य है: {शीर्षक: "कुछ शीर्षक", विवरण: "कुछ विवरण"}
आइटम सेलेक्ट किया गया (आइटम) {
  this.router.navigate (["/ होम", आइटम]);
}

फिर, हमारे होमपेज में आइटम ऑब्जेक्ट को प्राप्त करने के लिए, हम ActivatedRoute का उपयोग करते हैं।

'@ कोणीय / राउटर' से {ActivatedRoute} आयात करें;
निर्यात वर्ग HomePage लागू करता है {
आइटम: किसी भी;
कंस्ट्रक्टर (निजी मार्ग: सक्रियकृत) {}
 
ngOnInit () {
   this.route.params.subscribe (डेटा => {
     this.item = data;
   })
}
}

नेविगेशन के जीवन चक्र (LifeCycles)

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

यदि आप पहले से ही कोणीय में प्रोग्राम कर चुके हैं, तो यह आपको परिचित होगा। यदि आप कोणीय के बारे में अधिक जानना चाहते हैं, तो मेरा सुझाव है कि आप इस पोस्ट को पढ़ें।

routerLink

Ionic 3 में ईवेंट (क्लिक) का उपयोग html से पृष्ठों के बीच नेविगेट करने के लिए किया जाता है। Ionic 4 में हम राउटरलिंक का उपयोग करेंगे, क्योंकि इसका उपयोग कोणीय अनुप्रयोगों में किया जाता है।

एक उदाहरण होगा:

<आयन-बटन [राऊटरलिंक] = "['/ उत्पाद / 123']"> उत्पाद 123 पर जाएं 

मॉड्यूल

यह उल्लेख करना महत्वपूर्ण है कि app.module.ts फ़ाइल में पृष्ठों और सेवाओं को आयात करना आवश्यक नहीं है, जो कि मेरी राय में परियोजना को बहुत सरल और अधिक संगठित बनाता है।

प्रत्येक पृष्ठ के लिए उस पृष्ठ का एक मॉड्यूल होगा। उदाहरण के लिए, यदि हम किसी पृष्ठ पर प्रतिक्रियाशील प्रपत्रों का उपयोग करना चाहते हैं, तो हम केवल उस पृष्ठ या पृष्ठों पर ReactiveFormsModule का आयात करते हैं जो इसका उपयोग करेंगे।

नीचे दिए गए कोड Ionic 4 में हमारे उदाहरण एप्लिकेशन के src / app / Pages / new-item / new-item.module.ts से है जिसे आप मुफ्त में डाउनलोड कर सकते हैं।

'@ कोणीय / कोर' से {NgModule} आयात करें;
'@ कोणीय / आम' से {CommonModule} आयात करें;
आयात {FormsModule, ReactiveFormsModule} Form @ कोणीय / रूपों ’से;
'@ कोणीय / राउटर' से {Routes, RouterModule} आयात करें;
'@ आयनिक / कोणीय' से {IonicModule} आयात करें;
आयात {NewItemPage} से './new-item.page';
कास्ट रूट: रूट = [
  {
    पथ: '',
    घटक: NewItemPage
  }
];
@NgModule ({
  आयात: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild (मार्ग)
  ],
  घोषणाएँ: [NewItemPage]
})
निर्यात वर्ग NewItemPageModule {}

Ionic 3 से Ionic 4 तक अपने आवेदन को कैसे स्थानांतरित करें?

आप शायद सोच रहे हैं कि Ionic 3 से एक तक के मौजूदा एप्लिकेशन को Ionic 4 से कैसे माइग्रेट किया जाए। Ionic फ्रेमवर्क टीम ने माइग्रेशन के चरणों के साथ एक सुपर विस्तृत दस्तावेज लिखा है।

सच्चाई यह है कि प्रवासन प्रक्रिया काफी सरल है और व्यक्तिगत रूप से कोई समस्या उत्पन्न नहीं हुई है।

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

आयनिक 3 बनाम आयनिक 4 पर निष्कर्ष

इस लेख में हम Ionic 4 और Ionic 3 के बीच मुख्य अंतर के साथ-साथ Ionic फ्रेमवर्क 4.0 द्वारा प्रस्तावित नई अवधारणाओं के बारे में बात करते हैं। इसमें अंतर्निहित प्रदर्शन बूस्ट हैं, साथ काम करना आसान है, और सबसे महत्वपूर्ण बात यह है कि "भविष्य का प्रमाण।" वेब घटकों पर हमारे सभी UI घटकों का पुनर्निर्माण करने से और आपके कोडबेस के स्थिर होने के बाद से वे खुले वेब तकनीक पर बनाए जाएंगे।

अब, यदि आपका Ionic 3 ऐप लगभग पूर्ण है और / या कंपनी / व्यवसाय के लिए बनाया जा रहा है, तो शायद यह अपडेट करने का सबसे अच्छा समय नहीं है।

मुझे उम्मीद है कि इसने आपको आयोनिक फ्रेमवर्क के नए संस्करण के बारे में और अधिक समझने और प्रवासन के बारे में आशंकाओं को शांत करने में मदद की है। जैसा कि ऊपर उल्लेख किया गया है, Ionic 3 से Ionic 4 में माइग्रेट करने का मतलब आपके आवेदन को फिर से लिखना नहीं है (जैसा कि Ionic 1 से Ionic 2 के माइग्रेशन में हुआ था)।

मूल रूप से यहां अपलोड किया गया है