Сравнение между Ionic 4 срещу Ionic 3

йонни 3 срещу йонни 4

Относно Ionic 4

След повече от година работа екипът на Ionic Framework пусна версия 4. Новата версия ни предлага значителни промени в производителността, съвместимост с множество рамки (не само с Angular като предишни версии), нова документация и много други подобрения, които ние ще анализираме в тази статия.

Със сигурност ще имате много съмнения - и може би страх - относно тази промяна на версията. Но добрата новина е, че въпреки големите подобрения, предлагани от Ionic 4, мигрирането от Ionic 3 към Ionic 4 е супер просто!

В тази статия искам да обясня сравнението между Ionic 4 и Ionic 3, както и новостите и новите концепции на тази нова версия. Нека да видим практически примери как да използвате новия CLI Ionic и новия рутер. След това в края ще ви насоча как да мигрирате вашите приложения от Ionic 3 към Ionic 4.

Уеб компоненти

Ionic Framework 4 беше пренаписан изцяло за използване на уеб API и всеки компонент е пакетиран като уеб компонент. Това позволява рамката да се проектира в бъдеще. За да помогне за създаването на уеб компоненти, екипът създаде инструмент, наречен Stencil.

Какво представляват уеб компонентите?

Уеб компонентите са набор от уеб API, които ви позволяват да създавате HTML тагове, които могат да се използват повторно и капсулират.

Един от начините за обяснение на уеб компонентите е да ги представим като джаджи за потребителски интерфейс за многократна употреба, които са създадени с помощта на отворени уеб технологии. Те са част от браузъра и затова не се нуждаят от външни библиотеки.

С уеб компоненти можете да създадете почти всичко, което може да се направи с HTML, CSS и JavaScript. По този начин можете да създадете преносим компонент, който може лесно да се използва повторно.

Уеб компонентите правят браузъра този, който върши повече работа и по този начин те осигуряват важни подобрения в производителността и времето за зареждане на съвременните приложения.

Уеб компонентите се основават на следните спецификации:

  • Персонализирани елементи: дефинира основите и основите за проектиране и използване на нови видове DOM елементи.
  • Shadow DOM: определя как да използвате капсулирани стилове и код в уеб компонент.
  • HTML импортиране: основно определя начина за включване и повторно използване на HTML документа в друг HTML документ.
  • HTML шаблон: определя как да декларираме кодови фрагменти, които няма да бъдат използвани, докато страницата се зарежда, но може по-късно да бъде инстанцирана по време на изпълнение.

Съвместимост с други рамки

От създаването си Ionic Framework е изградена с помощта на Angular. Но сега с популярността и поддръжката на уеб компоненти това се промени.

Една от големите промени на тази нова версия на Ionic е, че тя е напълно независима от основната рамка (преди това място беше заето само от Angular).

Тъй като компонентите на Ionic Framework, като , вече са капсулирани като уеб компоненти, вече не е необходимо да се свързвате с базова рамка. Уеб компонентите работят с всякаква рамка, всъщност ако предпочитате, не можете да използвате която и да е Framework.

Това, което екипът на Ionic Framework възнамерява с тази промяна е, че Ionic е UI Framework, който може да работи с каквато и технология да изберат програмистите. Това отваря вратата за бъдещи приложения, които могат да бъдат създадени във Vue или в React с помощта на Ionic web компоненти.

Ionic CLI на Ionic 4The CLI 4.0 беше напълно подобрен както в предлаганите от него функции, така и в бързината и лекотата си на използване.

За да го използваме, трябва да имаме най-новата версия на CLI в нашата среда за разработка. Можем да го инсталираме, като изпълним следната команда:

npm инсталирайте -g ionic @ най-късно
За да използваме последната версия на CLI, трябва да имаме инсталиран възел 8.9 или по-нова. Посетете https://nodejs.org/, за да намерите инструкции как да актуализирате Node.js.

След като новият CLI е инсталиран, сега можем да създадем първото си приложение с йонна 4. Изпълнявайки следната команда, CLI ще създаде ново приложение с основната структура на Ionic 4:

йонно стартиране на приложениеName празно --type = ъгъл

appName е името на вашия проект

празен е шаблонът, който избираме да създадем скелета на приложението

type = ъглов е видът на проекта

След това, за да тествате приложението си в браузъра, можете да изпълните същата команда, която използвахме преди в Ionic 3.

йонна услуга

Това е структурата на новото ни приложение Ionic 4, генерирано с CLI:

С този нов CLI имаме възможност да използваме командите на конзолата за създаване на нови страници, компоненти, директиви и услуги. Нека да видим някои примери:

Създайте страница :

йонна g страница Потребител

Създайте нова услуга:

йонна g услуга Елемент

Това са само някои от новите функционалности, които новият CLI, проучете новата документация и функции на Ionic за подробности.

Навигация на Ionic 4

Има големи промени в навигацията и рутера, което според мен го прави много по-опростен и разбираем. Ionic 4 сега използва ъгловия рутер.

Ionic 3 използва навигация, базирана на обикновен стек, където новите страници бяха поставени на върха на стека, правейки натискане и когато искахме да се движим назад, просто направихме изскачане на последната страница.

Традиционните уебсайтове използват линейна история, което означава, че потребителят преминава към страница и може да натисне бутона Назад, за да се придвижва. В Ionic Framework приложенията могат да направят това крачка напред, като позволяват паралелна навигация. Което означава, че е възможно да имате няколко навигационни батерии и да ги обменяте по всяко време. Пример за това е да имате навигация с раздели на една страница и друга със странично меню.

Нещо важно да се спомене е, че NavController и ion-nav в Ionic 4 са остарели. Все още можете да ги използвате, но само ако приложението ви не използва Lazy Loading.

Вместо ion-nav и NavController, Ionic 4 вече използва @ angular / router.

Както вече казахме, когато създава приложение за ъглов тип, Ionic 4 използва навигацията на Angular 6. Ето защо при създаването на нашето йонно приложение 4 от ъглов тип автоматично се създава app-routing.module.ts файл, разположен в src / app.

Нека да видим какво има този файл и какви са разликите с приложение в Ionic 3.

В Йоний 4:

import {NgModule} от „@ angular / core“;
import {Routes, RouterModule} от „@ angular / router“;
const маршрути: Маршрути = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', loadChildren: './pages/home/home.module#HomePageModule'},
];
@NgModule ({
внос: [RouterModule.forRoot (маршрути)],
износ: [RouterModule]
})
експорт клас AppRoutingModule {}

За да преминете към Началната страница трябва да направим следното:

import {Router} от '@ angular / router';
конструктор (частен рутер: рутер) {}
navigateToHome () {
  this.router.navigate (['/ начало']);
}

В Йоний 3:

import {NavController} от 'йонно-ъглов';
import {HomePage} от „./pages/home/home“
конструктор (обществен navCtrl: NavController) {}
navigateToHome () {
  this.navCtrl.push (HomePage);
}

Важно е да се разбере, че в Ionic 4, navController вече не се използва за навигация в приложението.

Примерна навигация на Ionic 4

Нека направим крачка напред и вижте как да предавате информация между две страници в Ionic 4.

// елементът е обект на стила: {title: "Some title", description: "Some description"}
item Избрано (елемент) {
  this.router.navigate (["/ начало", елемент]);
}

След това, за да получим обекта на артикула в нашата HomePage, използваме ActivateRoute.

импортира {ActivateRoute} от „@ angular / router“;
експорт клас HomePage реализира OnInit {
артикул: всеки;
конструктор (частен маршрут: ActivateRoute) {}
 
ngOnInit () {
   this.route.params.subscribe (data => {
     this.item = данни;
   })
}
}

Жизнени цикли на навигацията (LifeCycles)

Жизнените цикли (известни като lifecycles на английски), които са били използвани в Ionic 3, като например ionWillLoad вече няма да се използват в Ionic 4. Сега ще използваме ъглови жизнени цикли като ngOnInit и ngAfterViewInit.

Ако вече сте програмирали в Angular, това ще ви звучи познато. Ако искате да научите повече за Angular, предлагам ви да прочетете този пост.

routerLink

В Ionic 3 събитието (щракване) се използва за навигация между страниците от html. В Ionic 4 ще използваме routerLink, тъй като се използва в Angular приложенията.

Пример за това може да бъде:

 Отидете на продукт 123 

модули

Важно е да споменем, че вече не е необходимо да импортирате страниците и услугите във файла app.module.ts, което според мен прави проекта много по-опростен и организиран.

За всяка страница ще има модул на тази страница. Например, ако искаме да използваме Reactive Forms на която и да е страница, ние импортираме ReactiveFormsModule на страницата или страниците, които ще я използват.

Кодът по-долу е от src / app / страници / new-item / new-item.module.ts от нашето примерно приложение в Ionic 4, което можете да изтеглите безплатно.

import {NgModule} от „@ angular / core“;
импортира {CommonModule} от „@ angular / common“;
import {FormsModule, ReactiveFormsModule} от „@ angular / форми“;
import {Routes, RouterModule} от „@ angular / router“;
import {IonicModule} от '@ ionic / angular';
import {NewItemPage} от './new-item.page';
const маршрути: Маршрути = [
  {
    път: '',
    компонент: NewItemPage
  }
];
@NgModule ({
  внос: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild (маршрути)
  ],
  декларации: [NewItemPage]
})
експорт клас NewItemPageModule {}

Как да мигрирате приложението си от Ionic 3 към Ionic 4?

Вероятно се чудите как да мигрирате съществуващо приложение от Ionic 3 към едно от Ionic 4. Екипът на Ionic Framework е написал супер подробна документация със стъпките за миграция.

Истината е, че процесът на миграция е доста прост и лично не е създал никакви проблеми.

Можете също така да използвате линията за миграция, която е инструмент, който автоматично проверява вашия код и ви казва какви промени трябва да направите.

Заключение за Ionic 3 срещу йонно 4

В тази статия говорим за основните разлики между Ionic 4 и Ionic 3, както и новите концепции, предложени от Ionic Framework 4.0.Той има вградени повишения на производителността, с тях е по-лесно да се работи и най-важното е „бъдещо доказателство“. С възстановяването на всички наши компоненти на потребителския интерфейс на уеб компоненти и вашата кодова база ще бъде по-стабилна, тъй като те са изградени върху отворени уеб технологии.

Сега, ако приложението ви Ionic 3 е почти пълно и / или се изгражда за компания / бизнес, тогава може би не е най-подходящото време за актуализация.

Надявам се да ви е помогнал да разберете повече за новата версия на Ionic Framework и преди всичко да успокоите страховете от миграцията. Както бе споменато по-горе, миграцията от Ionic 3 към Ionic 4 не означава пренаписване на приложението ви (както стана при миграцията от Ionic 1 към Ionic 2).

Първоначално качен тук