Uvod u Ionic 4

Nakon Ionic 1, Ionic 2 i Ionic 3 vrijeme je za uvod u Ionic 4. Biti će dosta poznatih detalja od ranijih verzija, ali isto tako biti će i novih detalja kojih ranije nije bilo.

Manje više, sve o čemu ću u nastavku pisati može se pronaći u službenoj dokumentaciji na poveznici https://beta.ionicframework.com/docs

Postavljanje razvojne okoline

Za uspješno kreiranje Ionic 4 projekta potrebno je zadovoljiti nekoliko preduvjeta.

Potrebno je instalirati:

  • Node.js LTS
  • Ionic CLI pomoću naredbe: $ npm install -g ionic
  • TypeScript pomoću naredbe: $ npm install -g typescript

Gore navedeno potrebno je za razvoj iOS i Android hibridnih mobilnih aplikacija. Jedina razlika s kojom se moguće susresti je način instalacije jer na Windows baziranom računalu mogu se razvijati samo Android i Windows Phone aplikacije, dok je za iOS aplikacije potreban Mac.

Prije nastavka potrebno je provjeriti da je sve uspješno instalirano:

  • $ node -v
  • $ npm v
  • $ ionic v

Pokretanje Ionic 4 projekta

Ako je sve ranije navedeno uspješno instalirano već sada moguće je kreirati novi Ionic 4 projekt.

Ionic 4 beta zahtjeva oznaku --type=angular i verziju CLI-a 4.0.0 ili veću.

Osim sidemenu teme mogao sam birati još između blank i tabs.

Ionic 4 - starter tema

Ubrzo na ekranu vidim sljedeću poruku:

Uvod u Ionic 4 - Cordova

Da je u pitanju Ionic 3 ovdje bi dodao Cordovu, ali kako Ionic 4 podržava i koristi Capacitor u ovom slučaju neću dodati podršku za Cordovu.

Uvod u Ionic 4 - Cordova

Nakon toga imam mogućnost instalacije Ionic Pro SDK-a što mi u ovom slučaju nije potrebno niti ga inače koristim pa ću i tu opciju preskočiti tj. odbiti.

Ionic Pro SDK

Na kraju dobijem sljedeću strukturu projekta:

Uvod u Ionic 4

Od važnijih dijelova aplikacije mogu izdvojiti dio koji počinje sa “app”. U pitanju je root komponenta koja je u istom obliku postojala i u dvije prijašnje verzije Ionica.

Jedina novost ovdje je app-routing.module.ts koji sadržava:

Naravno, u pitanju je Angular Routing o čemu se više može saznati na poveznici https://angular.io/guide/router

U web pregledniku projekt izgleda ovako:

Uvod u Ionic 4

Zaključak

Ovo je kratak pregled kreiranja Ionic 4 projekta koristeći Angular. U sljedećim blog postovima pokazati ću kako aplikaciji dodati nativne funkcionalnosti koristeći Capacitor jednako kao što sam to prije radio koristeći Ionic Native.

Stigao je Ionic 4!

Prošlo je manje od godinu i pol kako sam objavio članak pod naslovom Stigao je Ionic 3!, a sada je već stigao Ionic 4. Iako je u pitanju beta verzija to ne mijenja činjenicu da nema povratka na staro i da će uskoro Ionic 4 iz bete doći u finalnu fazu svojeg životnog ciklusa.

Ionic 4 donosi značajna poboljšanja performansi, podršku za korištenja bilo kojeg frameworka (a ne samo Angulara kao što je bilo do sada), potpuno novu dokumentaciju i još mnogo toga o čemu ću više reći u nastavku.

Ovako na prvu sve to djeluje vrlo obećavajuće.

Web komponente

Web komponente su skup standarda ili tehnologija koji omogućavaju kreiranje cjelovitih HTML elemenata (Custom Elements, Shadow DOM, HTML imports, HTML Template).

U praksi to znači da se jednom kreirana komponenta može koristiti, neovisno o odabranom frameworku, unutar određene mobilne ili web aplikacije.

Iako se o web komponentama može čitati još od 2011. Ionic tim smatra da su sada postale dovoljno zrele za širu upotrebu. Za neke developere bi ovo mogla biti poprilična promjena, ali za nas koji radimo s Angularom ta bi tranzicija mogla proći skoro neprimjetno.

Kompatibilnost

Od samog početka Ionic je kreiran u kombinaciji s Angularom, iako je želja bila da Ionic bude UI Framework koji će moći raditi s bilo kojom tehnologijom, ali s popularizacijom web komponenti to više ne mora biti slučaj.

U praksi to znači da je od sada moguće koristiti bilo koji framework, bio to Angular, Vue ili React, s Ionicom.

Naravno, za nas koji radimo s Angularom i ovdje će se malo toga promijeniti.

For those using Angular, this means very little will change. Most of the APIs and tags continue to work as an Angular developer would expect, and Ionic’s core Angular services work just like they used to. We’ve worked hard to keep the experience for Angular developers largely the same. – Announcing the Ionic 4 Beta

Posebno zanimljiva je činjenica da nadogradnje koje redovno stižu za Ionic više ne ovise o verziji korištenog frameworka. To bi u praksi značilo – ako npr. u verziji 4.2 dođe nova funkcionalnost da mi njeno korištenje neće uvjetovati obavezna nadogradnja novije verzije frameworka kao što je do sada bio slučaj.

Ionic & Angular CLI

Ionic tim je odlučio, umjesto da samostalno razvijaju sve CLI funkcionalnosti, iskoristiti snagu Angular CLI-a.

Ionic 4 donosi novi Ionic tj. Angular CLI i pripadajući Router. Ovo opet znači da developeri koji inače koriste Angular mogu bez problema koristiti Angular CLI unutar Ionica kao što to rade i u web projektima.

Developere koji su Angular koristili isključivo prilikom razvoja Ionica aplikacija očekuje mini learning curve, ali dugoročno gledano mislim da je ovo dobar korak prema naprijed.

Ionic 3 -> Ionic 4

Iako migracija zahtjeva određene preinake to neće biti ništa strašno. Opet kažem, za nas koji inače koristimo Angular promjene ne donose ništa novo i jedino što je potrebno napraviti je prilagoditi određene dijelove Ionic 3 aplikacije da rade na Ionic 4 način. U prvom redu tu se radi o promjeni navigacije unutar aplikacije. Svi servisi, komponente i direktive radit će kao i do sada.

Kako bi se proces migracije maksimalno olakšao dostupan je Migration Tool.

Zaključak

Ionic 4 je još uvijek u beta verziji i zato treba oprezno pristupiti migraciji sa verzije 3 unatoč tome što je proces migracije jednostavan.

Na ovom ću blogu svakako i dalje obrađivati Ionic teme tako da će i Ionic 4 biti detaljno pokriven. Ako ih imate, prijedloge tema možete ostaviti u komentarima.