Porovnání mezi Ionic 4 vs Ionic 3

iontový 3 vs iontový 4

O uživateli Ionic 4

Po více než roce práce vydal tým Ionic Framework verzi 4. Nová verze nám nabízí významné změny ve výkonu, kompatibilitu s více rámci (nejen s Angular jako předchozí verze), novou dokumentaci a mnoho dalších vylepšení, která jsme bude analyzovat v tomto článku.

Určitě budete mít mnoho pochybností - a možná strach - o této změně verze. Dobrou zprávou je, že i přes velká vylepšení, která nabízí Ionic 4, je migrace z Ionic 3 na Ionic 4 velmi jednoduchá!

V tomto článku chci vysvětlit srovnání mezi Ionic 4 a Ionic 3, jakož i novinky a nové koncepty této nové verze. Podívejme se na praktické příklady použití nového iontového rozhraní CLI a nového směrovače. Nakonec vás seznámím s tím, jak migrovat aplikace z Ionic 3 do Ionic 4.

Webové komponenty

Ionic Framework 4 byl zcela přepsán pro použití webových API a každá komponenta je zabalena jako webová komponenta. To umožňuje, aby se rámec promítl do budoucnosti. Abychom pomohli vytvořit webové komponenty, tým vytvořil nástroj s názvem Stencil.

Co jsou webové komponenty?

Webové komponenty jsou sadou webových rozhraní API, která umožňují vytvářet značky HTML, které jsou opakovaně použitelné a zapouzdřené.

Jedním ze způsobů, jak vysvětlit webové komponenty, je představit si je jako opakovaně použitelné widgety uživatelského rozhraní vytvořené pomocí otevřených webových technologií. Jsou součástí prohlížeče, a proto nepotřebují externí knihovny.

Pomocí webových komponent můžete vytvořit téměř cokoli, co lze udělat pomocí HTML, CSS a JavaScript. Tímto způsobem můžete vytvořit přenosnou součást, kterou lze snadno znovu použít.

Webové komponenty z prohlížeče dělají více práce, a tak poskytují důležitá vylepšení výkonu a doby načítání moderních aplikací.

Webové komponenty jsou založeny na následujících specifikacích:

  • Vlastní prvky: definuje základy a základy pro navrhování a používání nových typů prvků DOM.
  • Shadow DOM: definuje způsob použití zapouzdřených stylů a kódu v rámci webové komponenty.
  • Import HTML: v podstatě definuje, jak zahrnout a znovu použít dokument HTML v jiném dokumentu HTML.
  • Šablona HTML: definuje, jak deklarovat fragmenty kódu, které nebudou použity během načítání stránky, ale mohou být později spuštěny za běhu.

Kompatibilita s jinými rámci

Od svého založení byla Ionic Framework postavena pomocí Angular. Nyní se však s popularitou a podporou webových komponentů to změnilo.

Jednou z velkých změn této nové verze Ionic je, že je zcela nezávislá na základním rámci (dříve toto místo bylo obsazeno pouze Angularem).

Protože komponenty Ionic Framework, jako je , jsou nyní zapouzdřeny jako webové komponenty, není již nutné se vázat k základnímu rámci. Webové komponenty pracují s jakýmkoli frameworkem, ve skutečnosti, pokud dáváte přednost, nemůžete použít žádný Framework.

To, co tým Ionic Framework zamýšlí s touto změnou, je to, že Ionic je UI Framework, který může pracovat s jakoukoli technologií, kterou si programátoři zvolí. Tím se otevírají dveře budoucím aplikacím, které lze vytvořit ve Vue nebo React pomocí webových komponent Ionic.

Ionic CLI na Ionic 4 CLI 4.0 byl zcela vylepšen jak ve vlastnostech, které nabízí, tak v rychlosti a snadnosti použití.

Abychom ji mohli používat, musíme mít v našem vývojovém prostředí nejnovější verzi rozhraní CLI. Můžeme jej nainstalovat spuštěním následujícího příkazu:

npm install -g ionic @ nejnovější
Abychom mohli používat nejnovější verzi rozhraní CLI, musíme mít nainstalovaný uzel 8.9 nebo vyšší.Visit https://nodejs.org/, kde najdete pokyny, jak aktualizovat Node.js.

Po instalaci nového CLI můžeme nyní vytvořit naši první aplikaci s iontovým 4. Spuštěním následujícího příkazu vytvoří CLI novou aplikaci se základní strukturou Ionic 4:

ionic start appName blank --type = angular

appName je název vašeho projektu

blank je šablona, ​​kterou jsme se rozhodli vytvořit kostru aplikace

type = angular je typ projektu

Poté, co vyzkoušíte svou aplikaci v prohlížeči, můžete spustit stejný příkaz, jaký jsme použili dříve v aplikaci Ionic 3.

ionické sloužit

Toto je struktura naší nové aplikace Ionic 4 generované pomocí CLI:

S tímto novým CLI máme možnost použít příkazy konzoly k vytvoření nových stránek, komponent, směrnic a služeb. Uvidíme několik příkladů:

Vytvořit stránku :

ionická stránka g Uživatel

Vytvořit novou službu:

ionická služba g. Položka

To jsou jen některé z nových funkcí, které nové CLI, prozkoumat nové Ionic dokumentace a funkce pro podrobnosti.

Navigace na Ionic 4

V navigaci a ve směrovači jsou velké změny, což podle mého názoru činí mnohem jednodušší a srozumitelnější. Ionic 4 nyní používá úhlový směrovač.

Ionic 3 použil navigaci založenou na jednoduchém zásobníku, kde byly nové stránky umístěny na horní část zásobníku a tlačily, a když jsme chtěli navigovat zpět, jednoduše jsme vytvořili pop poslední stránky.

Tradiční weby používají lineární historii, což znamená, že uživatel přejde na stránku a může se pohybovat stisknutím tlačítka Zpět. V aplikaci Ionic Framework mohou aplikace učinit tento krok dalším povolením paralelní navigace. Což znamená, že je možné mít více navigačních baterií a vyměnit je kdykoli. Příkladem by mohla být navigace s kartami na jedné stránce a druhá s postranní nabídkou.

Důležité je zmínit, že NavController a ion-nav v Ionic 4 jsou zastaralé. Stále je můžete používat, ale pouze pokud vaše aplikace nepoužívá Lazy Loading.

Místo ion-nav a NavController nyní Ionic 4 používá @ angular / router.

Jak jsme již řekli, při vytváření aplikace úhlového typu používá Ionic 4 navigaci Angular 6. Proto jsme při vytváření naší iontové aplikace 4 úhlového typu automaticky vytvářeli soubor app-routing.module.ts umístěný v src / app.

Podívejme se, co tento soubor má a jaké jsou rozdíly s aplikací v Ionic 3.

V Ionic 4:

importovat {NgModule} z '@ úhlové / jádro';
importovat {Routes, RouterModule} z '@ úhlové / router';
const trasy: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', loadDěti: './pages/home/home.module#HomePageModule'},
];
@NgModule ({
import: [RouterModule.forRoot (trasy)],
export: [RouterModule]
})
exportovat třídu AppRoutingModule {}

Chcete-li přejít na domovskou stránku, musíme provést následující:

importovat {Router} z '@ úhlové / router';
konstruktor (soukromý směrovač: směrovač) {}
navigateToHome () {
  this.router.navigate (['/ home']);
}

V Ionic 3:

importovat {NavController} z 'ionic-angular';
importovat {HomePage} z './pages/home/home'
konstruktor (veřejné navCtrl: NavController) {}
navigateToHome () {
  this.navCtrl.push (HomePage);
}

Je důležité pochopit, že v Ionic 4 se navController již nepoužívá k navigaci v aplikaci.

Příklad navigace na Ionic 4

Udělejme krok dále a uvidíme, jak předávat informace mezi dvěma stránkami v Ionic 4.

// položka je objekt stylu: {title: "Some title", description: "Some description"}
itemSelected (item) {
  this.router.navigate (["/ home", item]);
}

Poté, abychom získali objekt položky na naší domovské stránce, použijeme ActivatedRoute.

importovat {ActivatedRoute} z '@ úhlové / router';
exportní třída HomePage implementuje OnInit {
položka: libovolná;
konstruktor (soukromá trasa: ActivatedRoute) {}
 
ngOnInit () {
   this.route.params.subscribe (data => {
     this.item = data;
   })
}
}

Životní cykly navigace (LifeCycles)

Životní cykly (známé v angličtině jako životní cykly), které byly použity v Ionic 3, jako například ionWillLoad, se již nebudou používat v Ionic 4. Nyní budeme používat cykly úhlového života, jako jsou ngOnInit a ngAfterViewInit.

Pokud jste již programovali v Angular, zní vám to povědomě. Pokud se chcete dozvědět více o Angular, doporučujeme si přečíst tento příspěvek.

routerLink

V Ionic 3 se událost (click) používá k navigaci mezi stránkami z html. V Ionic 4 budeme používat routerLink, jak je používán v Angular aplikacích.

Příkladem může být:

 Přejít na produkt 123 

Moduly

Je důležité zmínit, že již není nutné importovat stránky a služby do souboru app.module.ts, což podle mého názoru činí projekt mnohem jednodušším a organizovanějším.

Pro každou stránku bude existovat modul této stránky. Pokud například chceme použít Reactive Forms na jakékoli stránce, importujeme ReactiveFormsModule pouze na stránku nebo stránky, které ji budou používat.

Níže uvedený kód pochází z aplikace src / app / pages / new-item / new-item.module.ts naší vzorové aplikace v Ionic 4, kterou si můžete zdarma stáhnout.

importovat {NgModule} z '@ úhlové / jádro';
importovat {CommonModule} z '@ angular / common';
importovat {FormsModule, ReactiveFormsModule} z '@ úhlové / formy';
importovat {Routes, RouterModule} z '@ úhlové / router';
importovat {IonicModule} z '@ ionic / angular';
importovat {NewItemPage} z './new-item.page';
const trasy: Routes = [
  {
    cesta: '',
    komponenta: NewItemPage
  }
];
@NgModule ({
  import: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild (trasy)
  ],
  deklarace: [NewItemPage]
})
exportovat třídu NewItemPageModule {}

Jak migrovat aplikaci z Ionic 3 na Ionic 4?

Pravděpodobně přemýšlíte, jak migrovat existující aplikaci z Ionic 3 na jednu z Ionic 4. Tým Ionic Framework napsal velmi podrobnou dokumentaci s kroky pro migraci.

Pravda je, že migrační proces je poměrně jednoduchý a osobně nezpůsobil žádné problémy.

Můžete také použít ukazatel migrace, což je nástroj, který automaticky kontroluje váš kód a sdělí vám, jaké změny byste měli provést.

Závěr o iontovém 3 vs. iontovém 4

V tomto článku hovoříme o hlavních rozdílech mezi Ionic 4 a Ionic 3, stejně jako o nových koncepcích navržených Ionic Framework 4.0. Má vestavěné zvýšení výkonu, je snadnější s ním pracovat a nejdůležitější je „budoucí důkaz“. Obnovením všech našich komponent uživatelského rozhraní na webových komponentách a vaší kodexové databázi bude stabilnější, protože jsou postaveny na otevřených webových technologiích.

Pokud je vaše aplikace Ionic 3 téměř kompletní a / nebo se staví pro společnost / firmu, pak možná není ten pravý čas na aktualizaci.

Doufám, že vám to pomohlo pochopit více o nové verzi Ionic Framework a především uklidnit obavy z migrace. Jak je uvedeno výše, migrace z Ionic 3 na Ionic 4 neznamená přepsání vaší aplikace (jako tomu bylo v případě migrace z Ionic 1 na Ionic 2).

Původně nahráno zde