„Ionic 4“ palyginimas su „Ionic 3“

joninis 3 vs joninis 4

Apie „Ionic 4“

Po daugiau nei metų darbo „Ionic Framework“ komanda išleido 4 versiją. Nauja versija siūlo mums reikšmingus veikimo pokyčius, suderinamumą su keliais pagrindais (ne tik su kampinėmis, kaip ir ankstesnėmis versijomis), naują dokumentaciją ir daugybę kitų patobulinimų, kuriuos mes analizuosime šiame straipsnyje.

Žinoma, turėsite daug abejonių ir galbūt baimės dėl šios versijos pakeitimo. Tačiau gera žinia ta, kad nepaisant didelių „Ionic 4“ patobulinimų, pereiti iš „Ionic 3“ į „Ionic 4“ yra nepaprastai paprasta!

Šiame straipsnyje noriu paaiškinti „Ionic 4“ ir „Ionic 3“ palyginimą, taip pat šios naujos versijos naujoves ir naujas koncepcijas. Pažiūrėkime praktinius pavyzdžius, kaip naudoti naująjį „Ionic CLI“ ir naująjį maršrutizatorių. Tada pabaigoje pateiksiu nurodymus, kaip perkelti programas iš „Ionic 3“ į „Ionic 4“.

Žiniatinklio komponentai

„Ionic Framework 4“ buvo visiškai perrašytas, kad būtų naudojamos žiniatinklio API, ir kiekvienas komponentas yra supakuotas kaip žiniatinklio komponentas. Tai leidžia numatyti sistemą ateityje. Norėdami padėti sukurti interneto komponentus, komanda sukūrė įrankį, pavadintą „Trafaretas“.

Kas yra interneto komponentai?

Žiniatinklio komponentai yra žiniatinklio API rinkinys, leidžiantis jums sukurti pakartotinai naudojamas ir įdėtas HTML žymas.

Vienas iš būdų paaiškinti interneto komponentus yra įsivaizduoti juos kaip daugkartinio naudojimo vartotojo sąsajos valdiklius, sukurtus naudojant atvirosios interneto technologijas. Jie yra naršyklės dalis, todėl jiems nereikia išorinių bibliotekų.

Naudodami žiniatinklio komponentus galite sukurti beveik viską, ką galima padaryti naudojant HTML, CSS ir „JavaScript“. Tokiu būdu galite sukurti nešiojamą komponentą, kurį galima lengvai naudoti dar kartą.

Žiniatinklio komponentai padaro naršyklę tuo, kas dirba daugiau, ir tokiu būdu jie žymiai pagerina šiuolaikinių programų našumą ir įkėlimo laiką.

Žiniatinklio komponentai yra pagrįsti šiomis specifikacijomis:

  • Pasirinktiniai elementai: apibrėžia pagrindus ir pagrindus projektuojant ir naudoti naujo tipo DOM elementus.
  • „Shadow DOM“: nusako, kaip naudoti kapsuliuotus stilius ir kodą žiniatinklio komponente.
  • HTML importavimas: iš esmės apibrėžia, kaip įtraukti ir pakartotinai naudoti HTML dokumentą į kitą HTML dokumentą.
  • HTML šablonas: nusako, kaip deklaruoti kodo fragmentus, kurie nebus naudojami įkeliant puslapį, bet kuriuos vėliau bus galima panaudoti vykdant.

Suderinamumas su kitomis sistemomis

Nuo pat įkūrimo „Ionic Framework“ buvo pastatytas naudojant kampinį. Tačiau dabar, populiarėjant ir palaikant interneto komponentus, tai pasikeitė.

Vienas didžiausių šios naujos „Ionic“ versijos pokyčių yra tas, kad jis visiškai nepriklauso nuo bazinio karkaso (anksčiau šią vietą užėmė tik kampinis).

Kadangi joninės struktūros komponentai, tokie kaip , dabar yra kapsuliuoti kaip interneto komponentai, nebereikia jungtis prie bazinės struktūros. Žiniatinklio komponentai veikia su bet kokia sistema, iš tikrųjų, jei norite, negalite naudoti jokios sistemos.

„Ionic Framework“ komanda ketina atlikti šį pakeitimą, kad „Ionic“ yra UI sąsaja, galinti dirbti su bet kuria technologija, kurią pasirenka programuotojai. Tai atveria duris būsimoms programoms, kurias galima sukurti „Vue“ arba „React“, naudojant „Ionic“ žiniatinklio komponentus.

„Ionic CLI“ „Ionic 4“ „CLI 4.0“ buvo visiškai patobulintas tiek siūlomų funkcijų, tiek greičio ir patogumo dėka.

Norėdami jį naudoti, savo kūrimo aplinkoje turime turėti naujausią CLI versiją. Galime įdiegti vykdydami šią komandą:

npm įdiegti -g ionic @ naujausią
Norėdami naudoti naujausią CLI versiją, turime įdiegti 8.9 ar naujesnį mazgą. Apsilankykite https://nodejs.org/, norėdami rasti instrukcijas, kaip atnaujinti „Node.js“.

Įdiegę naują CLI, dabar galime sukurti savo pirmąją programą su „ionic 4“. Vykdydami šią komandą, CLI sukurs naują programą su pagrindine „Ionic 4“ struktūra:

joninė paleidimo programaName tuščias --type = kampinis

„appName“ yra jūsų projekto pavadinimas

tuščias yra šablonas, kurį mes pasirenkame kurdami programos skeletą

tipas = kampinis yra projekto tipas

Tada norėdami išbandyti savo programą naršyklėje, galite paleisti tą pačią komandą, kurią anksčiau naudojome „Ionic 3“.

jonų tarnauti

Tai yra mūsų naujos „Ionic 4“ programos, sugeneruotos naudojant CLI, struktūra:

Naudodami šią naują CLI, mes turime galimybę naudoti pulto komandas naujiems puslapiams, komponentams, direktyvoms ir paslaugoms kurti. Pažiūrėkime keletą pavyzdžių:

Sukurti puslapį:

joninis g puslapis vartotojas

Sukurkite naują paslaugą:

joninių g paslaugų punktas

Tai tik keletas naujųjų funkcijų, kurias įgyvendina naujoji CLI, išsamios informacijos apie naująją „Ionic“ dokumentaciją ir funkcijas.

Naršymas „Ionic 4“

Vyksta dideli navigacijos ir maršrutizatoriaus pokyčiai, kurie, mano manymu, daro jį daug paprastesnį ir suprantamesnį. „Ionic 4“ dabar naudoja kampinį maršrutizatorių.

„Ionic 3“ naudojo navigaciją, pagrįstą paprastu rietuve, kur nauji puslapiai buvo dedami ant rietuvės atliekant stūmimą, o kai norėjome naršyti atgal, mes paprasčiausiai pasidarėme paskutinio puslapio pop.

Tradicinėse svetainėse naudojama linijinė istorija, o tai reiškia, kad vartotojas eina į puslapį ir gali paspausti mygtuką Atgal, jei norite naršyti. „Ionic Framework“ programos gali žengti tai dar daugiau, leisdamos paralelinę navigaciją. O tai reiškia, kad bet kada galite turėti kelias navigacijos baterijas ir jas pakeisti. To pavyzdys galėtų būti naršymas su skirtukais viename puslapyje, o kitame - su šoniniu meniu.

Svarbu paminėti tai, kad „NavController“ ir „ion-nav“ „Ionic 4“ paseno. Galite vis tiek juos naudoti, tačiau tik tuo atveju, jei jūsų programa nenaudoja „Lazy Loading“.

Vietoj jon-nav ir „NavController“ „Ionic 4“ dabar naudoja @ kampinį / maršrutizatorių.

Kaip jau minėjome, kurdamas kampinio tipo programą, „Ionic 4“ naudoja „6 kampo“ naršymą. Štai kodėl, kurdami savo „ionic 4“ kampinio tipo taikymą, mes automatiškai sukuriame „app-routing.module.ts“ failą, esantį „src“ / „app“.

Pažiūrėkime, ką šis failas turi ir kuo skiriasi programa „Ionic 3“.

„Ionic 4“:

importuoti {NgModule} iš '@ kampinis / branduolys';
importuoti {Routes, RouterModule} iš '@ kampinis / maršrutizatorius';
const maršrutai: Maršrutai = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {kelias: „namai“, „loadChildren“: „./pages/home/home.module#HomePageModule“},
];
@NgModule ({
importas: [RouterModule.forRoot (maršrutai)],
eksportas: [RouterModule]
})
eksportuoti „AppRoutingModule“ klasę {}

Norėdami pereiti į „Pagrindinis puslapis“, turime atlikti šiuos veiksmus:

importuoti {Router} iš '@ kampinis / maršrutizatorius';
konstruktorius (privatus maršrutizatorius: maršrutizatorius) {}
navigateToHome () {
  this.router.navigate (['/ namai']);
}

„Ionic 3“:

importuoti {NavController} iš 'joninių-kampinių';
importuoti „HomePage“ iš „./pages/home/home“
konstruktorius (viešas „NavCtrl“: „NavController“) {}
navigateToHome () {
  this.navCtrl.push („HomePage“);
}

Svarbu suprasti, kad „Ionic 4“ programoje „navController“ daugiau nenaudojamas.

„Ionic 4“ naršymo pavyzdys

Pažvelkime į žingsnį toliau ir pažiūrėkime, kaip perduoti informaciją iš dviejų „Ionic 4“ puslapių.

// elementas yra stiliaus objektas: {title: "Some title", description: "Some description"}
itemSelected (prekė) {
  this.router.navigate ([„/ namai“, elementas]);
}

Tada norėdami gauti prekės objektą mūsų pagrindiniame puslapyje, mes naudojame „ActivatedRoute“.

importuoti {ActivatedRoute} iš '@ kampinis / maršrutizatorius';
eksporto klasės pagrindinis puslapis įgyvendina „OnInit“ {
prekė: bet kokia;
konstruktorius (privatus maršrutas: „ActivatedRoute“) {}
 
ngOnInit () {
   this.route.params.subscribe (duomenys => {
     this.item = duomenys;
   })
}
}

Navigacijos gyvavimo ciklai (LifeCycles)

Gyvenimo ciklai (angliškai žinomi kaip „gyvenimo ciklai“), kurie buvo naudojami „Ionic 3“, pavyzdžiui, „ionWillLoad“, nebebus naudojami „Ionic 4“. Dabar mes naudosime kampinius gyvenimo ciklus, tokius kaip „ngOnInit“ ir „ngAfterViewInit“.

Jei jau programavote „Angular“, tai jums skambės pažįstamai. Jei norite sužinoti daugiau apie kampinį, siūlau perskaityti šį įrašą.

maršrutizatorius

„Ionic 3“ metu įvykis (paspaudimas) naudojamas naršymui tarp html puslapių. „Ionic 4“ mes naudosime „routerLink“, kaip jis naudojamas kampinėse programose.

Pavyzdys galėtų būti:

 Eiti į 123 gaminį 

Moduliai

Svarbu paminėti, kad nebereikia importuoti failų app.module.ts puslapių ir paslaugų, o tai, mano manymu, daro projektą daug paprastesnį ir labiau organizuotą.

Kiekviename puslapyje bus to puslapio modulis. Pvz., Jei norime naudoti „Reactive Forms“ bet kuriame puslapyje, mes „ReactiveFormsModule“ importuojame tik tame puslapyje arba puslapiuose, kuriuose jis bus naudojamas.

Žemiau pateiktas kodas yra iš „Ionic 4“ mūsų programos pavyzdžio src / app / puslapiai / new-item / new-item.module.ts, kurį galite atsisiųsti nemokamai.

importuoti {NgModule} iš '@ kampinis / branduolys';
importuoti {CommonModule} iš '@ kampinis / bendras';
importuoti {FormsModule, ReactiveFormsModule} iš '@ kampinis / formos';
importuoti {Routes, RouterModule} iš '@ kampinis / maršrutizatorius';
importuoti {IonicModule} iš '@ joninių / kampinių';
importuoti {NewItemPage} iš './new-item.page';
const maršrutai: Maršrutai = [
  {
    kelias: '',
    komponentas: „NewItemPage“
  }
];
@NgModule ({
  importas: [
    „CommonModule“,
    „FormsModule“,
    „ReactiveFormsModule“,
    „IonicModule“,
    „RouterModule.forChild“ (maršrutai)
  ],
  deklaracijos: [NewItemPage]
})
eksporto klasė „NewItemPageModule“ {}

Kaip perkelti programą iš „Ionic 3“ į „Ionic 4“?

Jums tikriausiai įdomu, kaip perkelti esamą programą iš „Ionic 3“ į vieną iš „Ionic 4“. „Ionic Framework“ komanda parašė labai išsamią dokumentaciją ir perkėlimo veiksmus.

Tiesa ta, kad migracijos procesas yra gana paprastas ir asmeniškai nesukėlė jokių problemų.

Taip pat galite naudoti perkėlimo sąsają, kuri yra įrankis, kuris automatiškai patikrina jūsų kodą ir nurodo, kokius pakeitimus turėtumėte atlikti.

Išvada apie joninę 3 ir joninę 4

Šiame straipsnyje mes kalbame apie pagrindinius skirtumus tarp „Ionic 4“ ir „Ionic 3“, taip pat apie naujas „Ionic Framework 4.0“ pasiūlytas koncepcijas. Jis turi įmontuotą našumo padidėjimą, su juo lengviau dirbti ir, svarbiausia, yra „ateities įrodymas“. Atnaujinę visus mūsų vartotojo sąsajos komponentus žiniatinklio komponentuose, jūsų kodo bazė bus stabilesnė, nes jos yra sukurtos naudojant atvirą interneto technologiją.

Jei jūsų „Ionic 3“ programa yra beveik baigta ir (arba) yra sukurta įmonei / verslui, galbūt nėra pats geriausias laikas atnaujinti.

Tikiuosi, kad tai padėjo jums daugiau suprasti apie naująją „Ionic Framework“ versiją ir, svarbiausia, nuraminti baimę dėl migracijos. Kaip minėta aukščiau, perkėlimas iš „Ionic 3“ į „Ionic 4“ nereiškia jūsų programos perrašymo (kaip tai buvo daroma perkeliant iš „Ionic 1“ į „Ionic 2“).

Iš pradžių įkelta čia