Samanburður á milli Ionic 4 vs Ionic 3

jónísk 3 vs jónísk 4

Um Ionic 4

Eftir meira en árs starf hefur Ionic Framework liðið sent frá sér útgáfu 4. Nýja útgáfan býður okkur upp á verulegar breytingar á frammistöðu, eindrægni við mörg ramma (ekki aðeins með Angular sem fyrri útgáfur), ný skjöl og margar aðrar endurbætur sem við mun greina í þessari grein.

Vissulega muntu hafa margar efasemdir - og kannski ótta - varðandi þessa útgáfubreytingu. En góðu fréttirnar eru þær að þrátt fyrir miklar endurbætur sem Ionic 4 býður upp á, er að flytja frá Ionic 3 til Ionic 4 frábær einföld!

Í þessari grein vil ég skýra samanburðinn á Ionic 4 og Ionic 3, svo og nýjungunum og nýjum hugmyndum þessarar nýju útgáfu. Við skulum sjá hagnýt dæmi um hvernig á að nota nýja Ionic CLI og nýja leiðina. Í lokin mun ég leiðbeina þér um hvernig á að flytja umsóknir þínar frá Ionic 3 til Ionic 4.

Vefhlutar

Ionic Framework 4 var fullkomlega endurskrifað til að nota API forritin og hver hluti er pakkaður sem vefþáttur. Þetta gerir kleift að spá ramma inn í framtíðina. Til að hjálpa til við að búa til vefhlutana bjó liðið til tól sem kallast Stencil.

Hvað eru vefhlutar?

Vefhlutar eru mengi API forrita sem gera þér kleift að búa til HTML merki sem eru endurnýtanleg og umlukt.

Ein leið til að útskýra vefhlutana er að ímynda sér þá sem endurnýtanlega notendaviðmótsgræjur sem eru búnar til með opinni tækni á vefnum. Þeir eru hluti af vafranum og þurfa því ekki ytri bókasöfn.

Með vefhlutum geturðu búið til næstum allt sem hægt er að gera með HTML, CSS og JavaScript. Á þennan hátt er hægt að búa til færanlegan íhlut sem auðvelt er að endurnýta.

Vefhlutar gera vafrann að þeim sem vinnur meira og á þennan hátt veita þeir mikilvægar endurbætur á afköstum og hleðslutímum nútíma forrita.

Vefhlutarnir eru byggðir á eftirfarandi forskriftum:

  • Sérsniðin þættir: skilgreinir grunn og grunnatriði til að hanna og nota nýjar gerðir af DOM frumefni.
  • Skuggi DOM: skilgreinir hvernig nota á innbyggða stíl og kóða innan vefhluta.
  • HTML innflutningur: skilgreinir í grundvallaratriðum hvernig HTML skjalið á að innihalda og endurnýta það í öðru HTML skjali.
  • HTML sniðmát: skilgreinir hvernig eigi að lýsa yfir kóðabrotum sem ekki verða notuð meðan blaðsíða er hlaðin en hægt væri að koma þeim seinna fram þegar verið er að keyra.

Eindrægni við önnur umgjörð

Frá upphafi var Ionic Framework smíðað með því að nota Angular. En nú með vinsældum og stuðningi vefhluta hefur þetta breyst.

Ein af stóru breytingunum á þessari nýju útgáfu af Ionic er að hún er fullkomlega óháð grunngrindinni (áður var þessi staður eingöngu upptekinn af Angular).

Þar sem íhlutir Ionic Framework, svo sem , eru nú umluknir sem vefhlutar, er ekki lengur nauðsynlegt að binda við grunnramma. Vefhlutar virka með hvaða ramma sem er, í raun, ef þú vilt, geturðu ekki notað neina ramma.

Það sem Ionic Framework liðið ætlar sér með þessari breytingu er að Ionic er UI Framework sem getur unnið með hvaða tækni sem forritararnir velja. Þetta opnar dyrnar fyrir framtíðarforrit sem hægt er að búa til í Vue eða í React með Ionic vefhlutunum.

Ionic CLI á Ionic 4The CLI 4.0 hefur verið endurbætt bæði hvað varðar þá eiginleika sem það býður upp á og í hraða og notagildi.

Til þess að nota það verðum við að hafa nýjustu útgáfuna af CLI í þróunarumhverfi okkar. Við getum sett það upp með því að keyra eftirfarandi skipun:

npm setja upp -g jónískt @ nýjasta
Til að nota nýjustu útgáfuna af CLI verðum við að hafa sett upp hnút 8.9 eða hærri. Farðu á https://nodejs.org/ til að finna leiðbeiningar um hvernig eigi að uppfæra Node.js.

Þegar nýja CLI er sett upp getum við núna búið til fyrsta forritið okkar með jónísk 4. Þegar eftirfarandi skipun er keyrð mun CLI búa til nýtt forrit með grunnbyggingu Ionic 4:

jónískt byrjunarforrit Name blank --type = hoek

appName er nafn verkefnisins

auður er sniðmátið sem við veljum að búa til beinagrind forritsins

gerð = hyrnd er gerð verkefnisins

Síðan til að prófa forritið þitt í vafranum geturðu keyrt sömu skipun og við notuðum áður í Ionic 3.

jónísk þjóna

Þetta er uppbygging nýju Ionic 4 forritsins okkar sem er búin til með CLI:

Með þessum nýja CLI höfum við möguleika á að nota stjórnborðsskipanir til að búa til nýjar síður, íhluti, tilskipanir og þjónustu. Við skulum sjá nokkur dæmi:

Búa til síðu:

jónísk g síðu Notandi

Búðu til nýja þjónustu:

jónísk g þjónusta Liður

Þetta eru aðeins nokkrar af nýjum eiginleikum sem nýi CLI, kanna nýju Ionic skjölin og lögun til að fá frekari upplýsingar.

Leiðsögn um Ionic 4

Það eru miklar breytingar á flakk og router, sem að mínu mati gerir það miklu einfaldara og skiljanlegra. Ionic 4 notar nú hyrndur leið.

Ionic 3 notaði siglingar byggðar á einfaldri stafla þar sem nýju síðurnar voru settar ofan á staflainn með því að ýta og þegar við vildum sigla aftur á bak gerðum við einfaldlega sprett af síðustu blaðsíðu.

Hefðbundnar vefsíður nota línulega sögu, sem þýðir að notandinn vafrar á síðu og getur ýtt á hnappinn Til baka til að sigla. Í Ionic Framework geta forrit tekið þetta skrefinu lengra með því að leyfa samhliða flakk. Sem þýðir að það er mögulegt að hafa margar siglingar rafhlöður og skiptast á þeim hvenær sem er. Dæmi um þetta væri að hafa flakk með flipa á einni síðu og annarri með hliðarvalmynd.

Eitthvað mikilvægt að nefna er að NavController og ion-nav í Ionic 4 eru orðnir úreltir. Þú getur samt notað þau, en aðeins ef forritið þitt notar ekki Lazy Loading.

Í staðinn fyrir ion-nav og NavController notar Ionic 4 nú @ hyrndur / leið.

Eins og við höfum þegar sagt, þegar Ionic 4 er búið til forrit, notar Ionic 4 siglingu á Angular 6. Þess vegna erum við sjálfkrafa búin til app-routing.module.ts skjal sem er staðsett í src / app þegar við erum að búa til jóníska 4 forritið af hyrndri gerð.

Við skulum sjá hvað þessi skrá hefur og hver er munurinn á forritinu í Ionic 3.

Í Ionic 4:

flytja {NgModule} frá '@ hyrndur / kjarna';
flytja {Routes, RouterModule} frá '@ hyrndur / router';
const leiðir: Leiðir = [
  {slóð: '', beina til: 'heima', pathMatch: 'full'},
  {slóð: 'heima', loadChildren: './pages/home/home.module#HomePageModule'},
];
@NgModule ({
innflutningur: [RouterModule.forRoot (routes)],
útflutningur: [RouterModule]
})
flytja út flokk AppRoutingModule {}

Til að fara á heimasíðuna verðum við að gera eftirfarandi:

flytja {Router} frá '@ hyrndur / router';
framkvæmdaaðili (einka leið: Leið) {}
navigateToHome () {
  this.router.navigate (['/ home']);
}

Í Ionic 3:

flytja {NavController} frá 'jónísk-hyrndur';
flytja {Heimasíða} frá './pages/home/home'
framkvæmdaaðili (opinber navCtrl: NavController) {}
navigateToHome () {
  this.navCtrl.push (Heimasíða);
}

Það er mikilvægt að skilja að í Ionic 4 er navController ekki lengur notaður til að vafra um forritið.

Dæmi flakk um Ionic 4

Við skulum taka skrefinu lengra og sjá hvernig á að koma upplýsingum á milli tveggja blaðsíðna í Ionic 4.

// hlutur er hlutur stílsins: {title: "Einhver titill", lýsing: "Einhver lýsing"}
hlutur valinn (hlutur) {
  this.router.navigate (["/ home", hlutur]);
}

Til að fá hlutinn á heimasíðuna okkar notum við ActivatedRoute.

flytja {ActivatedRoute} frá '@ horn / router';
útflutningsflokkur HomePage útfærir OnInit {
hlutur: allir;
framkvæmdaaðila (einkaleið: ActivatedRoute) {}
 
ngOnInit () {
   this.route.params.subscribe (data => {
     this.item = gögn;
   })
}
}

Lífsferill siglinga (LifeCycle)

Lífsferlin (þekkt sem lífshringrás á ensku) sem voru notuð í Ionic 3 eins og til dæmis ionWillLoad verða ekki lengur notuð í Ionic 4. Nú notum við hringlífshringrásina eins og ngOnInit og ngAfterViewInit.

Ef þú hefur þegar forritað á Angular hljómar þetta þér kunnugt. Ef þú vilt læra meira um Angular, þá legg ég til að þú lesir þessa færslu.

routerLink

Í Ionic 3 er atburðurinn (smellur) notaður til að fletta á milli síðna úr HTML skjali. Í Ionic 4 munum við nota routerLink, eins og það er notað í Angular forritunum.

Dæmi væri:

 Fara í vöru 123 

Einingar

Það er mikilvægt að nefna að það er ekki lengur nauðsynlegt að flytja inn síður og þjónustu í app.module.ts skránni sem að mínu mati gerir verkefnið mun einfaldara og skipulagðara.

Fyrir hverja síðu verður eining af þeirri síðu. Til dæmis, ef við viljum nota Reactive Forms á einhverri síðu, flytjum við aðeins ReactiveFormsModule inn á síðuna eða síðurnar sem munu nota það.

Kóðinn hér að neðan er frá src / app / síður / new-item / new-item.module.ts td forritsins okkar í Ionic 4 sem þú getur halað niður ókeypis.

flytja {NgModule} frá '@ hyrndur / kjarna';
flytja {CommonModule} frá '@ hyrndur / algengur';
flytja {FormsModule, ReactiveFormsModule} frá '@ hyrndur / form';
flytja {Routes, RouterModule} frá '@ hyrndur / router';
flytja {IonicModule} frá '@ jónísk / hyrndur';
flytja {NewItemPage} frá './new-item.page';
const leiðir: Leiðir = [
  {
    leið: '',
    hluti: NewItemPage
  }
];
@NgModule ({
  innflutningur: [
    CommonModule,
    Eyðublöð,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild (leiðir)
  ],
  yfirlýsingar: [NewItemPage]
})
útflutningsflokkur NewItemPageModule {}

Hvernig á að flytja umsókn þína frá Ionic 3 til Ionic 4?

Þú ert líklega að spá í að flytja núverandi forrit frá Ionic 3 yfir í eitt frá Ionic 4. Ionic Framework liðið hefur skrifað frábær nákvæm skjöl með skrefunum fyrir flutning.

Sannleikurinn er sá að flutningsferlið er nokkuð einfalt og hefur persónulega ekki skapað nein vandamál.

Þú getur líka notað flutningalinsuna sem er tæki sem sjálfkrafa skoðar kóðann þinn og segir þér hvaða breytingar þú ættir að gera.

Ályktun um Ionic 3 vs jónísk 4

Í þessari grein erum við að tala um helstu muninn á Ionic 4 og Ionic 3 sem og nýju hugtökunum sem Ionic Framework 4.0 hefur lagt til. Það hefur innbyggða frammistöðu eykur, er auðveldara að vinna með og mikilvægast er „framtíðarvörn.“ Með því að endurbyggja alla hluti HÍ okkar á vefhlutum og codebase þinn verður stöðugri þar sem þeir eru byggðir á opnum veftækni.

Nú, ef Ionic 3 forritið þitt er næstum lokið og / eða er verið að smíða fyrir fyrirtæki / fyrirtæki, þá er það kannski ekki besti tíminn til að uppfæra.

Ég vona að það hafi hjálpað þér að skilja meira um nýju útgáfuna af Ionic Framework og umfram allt að róa ótta við búferlaflutninga. Eins og getið er hér að ofan þýðir að flytja frá Ionic 3 til Ionic 4 þýðir ekki að endurskrifa umsókn þína (eins og það gerði í flutningi frá Ionic 1 til Ionic 2).

Upphaflega hlaðið hingað