Параўнанне паміж 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 заключаецца ў тым, што яна цалкам незалежная ад базавай базы (раней гэтае месца займала толькі вуглавая).

Паколькі кампаненты Ionic Framework, такія як , у цяперашні час інкапсулююцца ў якасці вэб-кампанентаў, больш не трэба прывязваць да базавай базы. Вэб-кампаненты працуюць з любой асновай, бо, калі вам больш падабаецца, вы не можаце выкарыстоўваць любы Framework.

Тое, што каманда Ionic Framework мае намер з гэтым змяненнем, заключаецца ў тым, што Ionic з'яўляецца UI Framework, які можа працаваць з любой тэхналогіяй, якую праграмісты выбіраюць. Гэта адкрывае дзверы для будучых прыкладанняў, якія можна стварыць у Vue ці ў React пры дапамозе вэб-кампанентаў Ionic.

Ionic CLI на Ionic 4The CLI 4.0 быў палепшаны як у асаблівасцях, якія ён прапануе, так і ў хуткасці і прастаце выкарыстання.

Для таго, каб выкарыстоўваць яго, мы павінны мець апошнюю версію CLI у нашым асяроддзі распрацоўкі. Мы можам усталяваць яго, выканаўшы наступную каманду:

npm ўсталяваць -g ionic @ апошняя
Каб выкарыстоўваць апошнюю версію CLI, мы павінны ўсталяваць вузел 8.9 або вышэй. Наведайце https://nodejs.org/, каб даведацца, як абнавіць Node.js.

Пасля таго, як новы CLI будзе ўсталяваны, мы можам стварыць першае прыкладанне з іённым 4. Запусціўшы наступную каманду, CLI створыць новае прыкладанне з асноўнай структурай Ionic 4:

пусты іённы запуск appName --type = angular

appName - назва вашага праекта

пусты - гэта шаблон, які мы выбіраем для стварэння шкілета прыкладання

type = angular - гэта тып праекта

Затым для праверкі прыкладання ў браўзэры можна выканаць тую ж каманду, якую мы выкарыстоўвалі раней у Ionic 3.

іённыя служыць

Гэта структура нашага новага прыкладання Ionic 4, згенераванага з CLI:

З дапамогай гэтага новага CLI мы маем магчымасць выкарыстоўваць каманды кансоляў для стварэння новых старонак, кампанентаў, дырэктыў і паслуг. Паглядзім некалькі прыкладаў:

Стварыць старонку:

Карыстальнік іённай г старонкі

Стварыце новую паслугу:

іённая г службовы пункт

Гэта толькі некаторыя новыя функцыянальныя магчымасці новых CLI, азнаёмцеся з новай дакументацыяй і асаблівасцямі Ionic для атрымання дэталяў.

Навігацыя на Ionic 4

У навігацыі і маршрутызатары адбываюцца вялікія змены, што, на мой погляд, робіць яго значна больш простым і зразумелым. Цяпер Ionic 4 выкарыстоўвае вуглавы маршрутызатар.

Ionic 3 выкарыстаў навігацыю, заснаваную на простым стэку, дзе новыя старонкі размяшчаліся на верхняй частцы стэка, выконваючы націск, і калі мы хацелі перамяшчацца назад, мы проста зрабілі вокладку апошняй старонкі.

Традыцыйныя вэб-сайты выкарыстоўваюць лінейную гісторыю, гэта азначае, што карыстальнік пераходзіць на старонку і можа націскаць кнопку Назад для навігацыі. У Ionic Framework прыкладанні могуць зрабіць гэты крок далей, дазваляючы паралельную навігацыю. Гэта азначае, што ў любы час можна мець некалькі навігацыйных батарэй і абменьвацца імі. Прыкладам гэтага можа служыць навігацыя з укладкамі на адной старонцы і на другой з бакавым меню.

Неабходна адзначыць тое, што NavController і ion-nav у Ionic 4 састарэлі. Вы ўсё яшчэ можаце выкарыстоўваць іх, але толькі калі ваша дадатак не выкарыстоўвае Lazy Loading.

Замест іён-наві і NavController, Ionic 4 зараз выкарыстоўвае @ angular / router.

Як мы ўжо казалі, пры стварэнні прыкладання кутняга тыпу Ionic 4 выкарыстоўвае навігацыю па Angular 6. Менавіта таму пры стварэнні нашага іённага 4 прыкладання вуглавога тыпу аўтаматычна ствараецца файл app-routing.module.ts, размешчаны ў src / app.

Давайце паглядзім, у чым гэты файл і ў чым адрозненні прыкладання ў Ionic 3.

У Ionic 4:

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

Для пераходу на галоўную старонку трэба зрабіць наступнае:

імпартаваць {Router} з '@ angular / router';
канструктар (прыватны маршрутызатар: маршрутызатар) {}
navigateToHome () {
  this.router.navigate (['/ дадому']);
}

У Ionic 3:

імпарт {NavController} з 'іёна-кутняга';
імпартаваць {HomePage} з './pages/home/home'
канструктар (грамадскі navCtrl: NavController) {}
navigateToHome () {
  this.navCtrl.push (HomePage);
}

Важна разумець, што ў Ionic 4, navController больш не выкарыстоўваецца для навігацыі па дадатку.

Прыклад навігацыі па Ionic 4

Зробім крок далей і паглядзім, як перадаваць інфармацыю паміж дзвюма старонкамі ў Ionic 4.

// Пункт - гэта аб'ект стылю: {title: "Some title", апісанне: "Some description"}
itemSelected (пункт) {
  this.router.navigate (["/ хатні", пункт]);
}

Затым, каб атрымаць аб'ект элемента ў нашай хатняй старонцы, мы выкарыстоўваем ActivateRoute.

імпарт {ActivateRoute} з '@ angular / router';
экспарт класа HomePage рэалізуе OnInit {
пункт: любы;
канструктар (прыватны маршрут: ActivateRoute) {}
 
ngOnInit () {
   this.route.params.subscribe (дадзеныя => {
     this.item = дадзеныя;
   })
}
}

Жыццёвыя цыклы навігацыі (LifeCycles)

Жыццёвыя цыклы (на англійскай мове называюцца lifecycles), якія выкарыстоўваліся ў Ionic 3, бо, напрыклад, ionWillLoad больш не будуць выкарыстоўвацца ў Ionic 4. Цяпер мы будзем выкарыстоўваць вуглавыя жыццёвыя цыклы, такія як ngOnInit і ngAfterViewInit.

Калі вы ўжо запраграмаваны на Angular, гэта будзе гучаць вам знаёма. Калі вы хочаце даведацца больш пра Angular, прапаную вам прачытаць гэты пост.

routerLink

У Ionic 3 падзея (націск) выкарыстоўваецца для навігацыі па старонках з HTML. У Ionic 4 мы будзем выкарыстоўваць routerLink, як ён выкарыстоўваецца ў кутнія прыкладаннях.

Прыкладам можа служыць:

 Перайсці да прадукту 123 

Модулі

Важна адзначыць, што больш не трэба імпартаваць старонкі і паслугі ў файл app.module.ts, што, на мой погляд, робіць праект значна больш простым і арганізаваным.

Для кожнай старонкі будзе прадстаўлены модуль гэтай старонкі. Напрыклад, калі мы хочам выкарыстоўваць Рэактыўныя формы на любой старонцы, мы імпартуем на старонку толькі Рэакцыйную форму альбо старонкі, якія будуць яе выкарыстоўваць.

Ніжэй прыведзены код src / app / pages / new-item / new-item.module.ts нашага прыкладу прыкладання ў Ionic 4, які вы можаце спампаваць бясплатна.

імпарт {NgModule} з '@ angular / core';
імпарт {CommonModule} з '@ angular / common';
імпарт {FormsModule, ReactiveFormsModule} з '@ angular / формы';
імпарт {Routes, RouterModule} з '@ angular / router';
імпарт {IonicModule} з '@ ionic / angular';
імпартаваць {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).

Першапачаткова загружана тут