Comparació entre Ionic 4 i Ionic 3

iònic 3 vs iònic 4

Sobre Jònic 4

Després de més d'un any de treball, l'equip ionic Framework ha llançat la versió 4. La nova versió ens ofereix canvis significatius en el rendiment, la compatibilitat amb múltiples frameworks (no només amb Angular com versions anteriors), una nova documentació i moltes altres millores que oferim. analitzarem en aquest article.

Segur que tindreu molts dubtes -i potser por- sobre aquest canvi de versió. Però la bona notícia és que, malgrat les grans millores que ofereix Ionic 4, migrar de Jònic 3 a Jònic 4 és molt senzill!

En aquest article vull explicar la comparació entre jònic 4 i jònic 3, així com les novetats i nous conceptes d'aquesta nova versió. Anem a veure exemples pràctics de com utilitzar el nou CLI jònic i el nou encaminador. Al final, us guiaré sobre com migrar les vostres aplicacions des de Ionic 3 a Ionic 4.

Components web

Ionic Framework 4 es va reescriure completament per utilitzar les API web i cada component es troba empaquetat com a component web. Això permet projectar el marc cap al futur. Per ajudar a crear els components web, l'equip va crear una eina anomenada Stencil.

Què són els components web?

Els components web són un conjunt d’API web que permeten crear etiquetes HTML reutilitzables i encapsulades.

Una forma d’explicar els components web és imaginar-los com a ginys d’interfície d’usuari reutilitzables que es creen mitjançant tecnologies web obertes. Formen part del navegador i, per tant, no necessiten biblioteques externes.

Amb els components web, podeu crear gairebé qualsevol cosa que es pugui fer amb HTML, CSS i JavaScript. D’aquesta manera es pot crear un component portàtil que es pugui reutilitzar fàcilment.

Els components web fan que el navegador sigui el que faci més feina i d'aquesta manera proporcionen millores importants en els temps de rendiment i càrrega de les aplicacions modernes.

Els components web es basen en les especificacions següents:

  • Elements personalitzats: defineix les bases i els fonaments per dissenyar i utilitzar nous tipus d’elements DOM.
  • Shadow DOM: defineix com utilitzar estils i codis encapsulats dins d’un component web.
  • Importacions HTML: defineix bàsicament com incloure i reutilitzar el document HTML en un altre document HTML.
  • Plantilla HTML: defineix com es poden declarar fragments de codi que no s’utilitzaran mentre es carrega la pàgina, però que es podran iniciar més tard en temps d’execució.

Compatibilitat amb altres marcs

Des de la seva creació, el framework jònic es va crear amb Angular. Però ara amb la popularitat i el suport dels components web això ha canviat.

Un dels grans canvis d'aquesta nova versió de Ionic és que és completament independent del marc base (anteriorment aquest lloc era ocupat només per Angular).

Com que els components del framework jònic, com ara , ara estan encapsulats com a components web, ja no és necessari unir-se a un marc base. Els components web funcionen amb qualsevol marc, de fet si ho preferiu no podeu fer servir cap Framework.

El que pretén l’equip de Framework Ionic amb aquest canvi és que Ionic és un Framework d’interès d’interès que pot funcionar amb qualsevol tecnologia que triïn els programadors. Això obre la porta a futures aplicacions que es poden crear a Vue o a React mitjançant els components web iònics.

Ionic CLI a Ionic 4La CLI 4.0 s’ha millorat totalment tant per les característiques que ofereix com per la seva rapidesa i facilitat d’ús.

Per poder utilitzar-lo, hem de tenir la versió més recent del CLI al nostre entorn de desenvolupament. Podem instal·lar-la executant la següent comanda:

npm instal·leu -g iònic @ més recent
Per utilitzar la versió més recent de la CLI, haurem d’haver instal·lat el node 8.9 o superior. Visiteu https://nodejs.org/ per trobar instruccions sobre com actualitzar Node.js.

Un cop instal·lat el nou CLI, ja podrem crear la nostra primera aplicació amb iònica 4. Executant la següent comanda, el CLI crearà una nova aplicació amb l’estructura bàsica d’Ionic 4:

iònic inicial appName en blanc - tipus = angular

appName és el nom del vostre projecte

en blanc és la plantilla que triem per crear l’esquelet de l’aplicació

type = angular és el tipus de projecte

Aleshores, per provar la vostra aplicació al navegador, podeu executar la mateixa comanda que abans en Ionic 3.

servei iònic

Aquesta és l'estructura de la nostra nova aplicació Ionic 4 generada amb el CLI:

Amb aquesta nova CLI, tenim la possibilitat d’utilitzar ordres de consola per crear pàgines, components, directives i serveis nous. Anem a veure alguns exemples:

Crea pàgina:

ioniques de la pàgina de l'usuari

Creeu un servei nou:

ítem de servei g iònic

Aquestes són algunes de les noves funcionalitats que ofereix el nou CLI, que explora la nova documentació i funcions jòniques per obtenir més detalls.

Navegació per la jònica 4

Hi ha grans canvis en la navegació i l’encaminador, cosa que en la meva opinió fa que sigui molt més senzill i entenedor. Ionic 4 utilitza ara l'encaminador angular.

Ionic 3 va utilitzar una navegació basada en una simple pila on es col·locaven les pàgines noves a la part superior de la pila fent pressions i quan volíem navegar cap enrere simplement vam fer un pop de la darrera pàgina.

Els llocs web tradicionals utilitzen un historial lineal, el que significa que l’usuari navega a una pàgina i pot prémer el botó Enrere per navegar. A Ionic Framework, les aplicacions poden fer un pas més en permetre la navegació paral·lela. El que significa que és possible tenir diverses bateries de navegació i canviar-les en qualsevol moment. Un exemple d’això seria tenir una navegació amb pestanyes d’una pàgina i una altra amb un menú lateral.

Alguna cosa important a mencionar és que NavController i ion-nav al jònic 4 han quedat obsolets. Encara podeu utilitzar-les, però només si la vostra aplicació no utilitza Càrrega ràpida.

En lloc de ion-nav i NavController, Ionic 4 utilitza ara @ angular / router.

Com ja hem dit, a l’hora de crear una aplicació de tipus angular, Ionic 4 utilitza la navegació d’Angular 6. És per això que quan creem la nostra aplicació iònica 4 de tipus angular se'ns crea automàticament un fitxer app-routing.module.ts situat a src / app.

Anem a veure què té aquest fitxer i quines diferències hi ha amb una aplicació a Ionic 3.

En jònic 4:

importar {NgModule} de "@ angular / core";
importar {Routes, RouterModule} de "@ angular / router";
rutes const: rutes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', loadChildren: './pages/home/home.module#HomePageModule'},
];
@NgModule ({
importacions: [RouterModule.forRoot (rutes)],
exportacions: [RouterModule]
})
exporta la classe AppRoutingModule {}

Per anar a la pàgina principal, hem de fer el següent:

importar {Router} de "@ angular / router";
constructor (encaminador privat: encaminador) {}
navigateToHome () {
  this.router.navigate (['/ home']);
}

En jònic 3:

importar {NavController} de "ionic-angular";
importa {HomePage} de "./pages/home/home"
constructor (public navCtrl: NavController) {}
navigateToHome () {
  this.navCtrl.push (HomePage);
}

És important comprendre que a l’Ionic 4, navController ja no s’utilitza per navegar per l’aplicació.

Exemple de navegació a Jònic 4

Fem un pas més i veiem com es passa la informació entre dues pàgines a l’Ionic 4.

// item és un objecte de l'estil: {title: "Some title", description: "Alguna descripció"}
itemSelected (element) {
  this.router.navigate (["/ home", ítem]);
}

Aleshores, per obtenir l'objecte de l'article a la nostra pàgina d'inici, utilitzem ActivatedRoute.

importar {ActivatedRoute} de "@ angular / router";
La classe d'exportació HomePage implementa OnInit {
ítem: qualsevol;
constructor (ruta privada: ActivatedRoute) {}
 
ngOnInit () {
   this.route.params.subscribe (data => {
     this.item = dades;
   })
}
}

Cicles de vida de la navegació (LifeCycles)

Els cicles de vida (coneguts com a cicles de vida en anglès) que s’utilitzaven a Jònic 3 com per exemple ionWillLoad ja no s’utilitzaran a Jònic 4. Ara utilitzarem els cicles de vida angulars com ngOnInit i ngAfterViewInit.

Si ja heu programat a Angular, us resultarà familiar. Si voleu obtenir més informació sobre Angular, us recomano que llegiu aquesta publicació.

routerLink

A Jònic 3, l'esdeveniment (clic) s'utilitza per navegar entre pàgines des de html. A Ionic 4 utilitzarem el routerLink, ja que s’utilitza a les aplicacions Angular.

Un exemple seria:

 Vés al producte 123 

Mòduls

És important esmentar que ja no cal importar les pàgines i serveis del fitxer app.module.ts, que segons la meva opinió fa que el projecte sigui molt més senzill i organitzat.

Per a cada pàgina hi haurà un mòdul d'aquesta pàgina. Per exemple, si volem utilitzar els formularis reactius en qualsevol pàgina, només importem ReactiveFormsModule a la pàgina o a les pàgines que l’utilitzaran.

El codi següent és de la versió src / app / pages / new-item / new-item.module.ts de la nostra aplicació d'exemple de Ionic 4 que podeu descarregar gratuïtament.

importar {NgModule} de "@ angular / core";
importar {CommonModule} de "@ angular / common";
importar {FormsModule, ReactiveFormsModule} de "@ angular / formes";
importar {Routes, RouterModule} de "@ angular / router";
importar {IonicModule} de "@ ionic / angular";
importar {NewItemPage} de "./new-item.page";
rutes const: rutes = [
  {
    Camí: '',
    component: NewItemPage
  }
];
@NgModule ({
  importacions: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild (rutes)
  ],
  declaracions: [NewItemPage]
})
classe d'exportació NewItemPageModule {}

Com migrar la vostra aplicació de Ionic 3 a Ionic 4?

Probablement us estareu preguntant com migrar una aplicació existent d’Ionic 3 a una d’Ionic 4. L’equip de Framework Ionic ha escrit una documentació super detallada amb els passos per a la migració.

La veritat és que el procés de migració és bastant simple i personalment no ha generat cap problema.

També podeu utilitzar la línia de migració que és una eina que comprova automàticament el codi i us indica quins canvis heu de fer.

Conclusió sobre Jònic 3 vs iònic 4

En aquest article parlem de les principals diferències entre jònic 4 i jònic 3, així com els nous conceptes proposats per Ionic Framework 4.0. Té uns increments de rendiment integrats, és més fàcil treballar, i el més important és “la prova futura”. Al tornar a construir tots els nostres components d’interès d’interès en components web i el vostre codi de codi serà més estable ja que es basen en tecnologia web oberta.

Ara, si l'aplicació Ionic 3 està gairebé completa i / o s'està creant per a una empresa / empresa, potser no és el millor moment per actualitzar-la.

Espero que us hagi ajudat a comprendre més coses sobre la nova versió de Ionic Framework i, sobretot, a calmar els temors sobre la migració. Com s'ha esmentat anteriorment, migrar de Jònic 3 a Jònic 4 no vol dir tornar a reescriure la vostra aplicació (com es va fer en la migració de Jònic 1 a Jònic 2).

S'ha penjat originalment aquí