Ionic nebo Ionic Framework je sada grafického rozhraní pro tvorbu UI na mobilní platformy iOS a Android. Technologie, kterou Ionic využívá je Web - konkrétně Webové hybridní aplikace.

Webové hybridní aplikace je aplikace, které je psána pomocí webových technologií (HTML, CSS a JS) a běží na nativním operačním systému jako “nativní aplikace” pro tento operační systém. Tedy se tváří jako aplikace psaná v nativním kódu ale není. Alternativkou k tomuto řešení jsou Webové nativní aplikace nebo Hybridní nativní aplikace, které jsou psány buď pomocí webových technologií, avšak využívají přímo nativní kód nebo jsou psány jinými technologiemi/jazyky ale v obou případech se aplikace spouští jako nativní, nejedné se tedy o něco jako nativní jako je v případě Ionic Frameworku

Jelikož se jedná o webové technologie je možné využít tuto platformu na libovolném operačním systému, nezáleží jestli vaše aplikace pojede v operačím systímu iOS, Android, Windows, Linux, Mac nebo prohlížeči. Je spustitelná všude, kde jde spustit webová stránka!

<aside> ☝ ZAPAMTOVAT!

Čtení dokumentace vám zjednoduší práci, většina věci je v dokumentaci popsaná, proto nezapomínejte první číst dokumentaci!

Jak funguje Ionic?

Ionic je pouze grafické UI s trochou JavaScriptu pro animace a akce. Zjednodušeně lze říci že jde o něco jako Bootstrap, ale pro mobilní vývoj.

Na obrázku níže lze vidět porovnání Nativní Apliakce (Native) a Webové Aplikace - třeba s Ionic (Web). Jednotlivé části znázorňují co vykonává jaká část aplikace, tedy i hybridní aplikace využívá nativní části.

webview-architecture-bee351034ebbd5238a77b1a254d2dcbd.png

https://ionicframework.com/docs/core-concepts/webview

S čím se Ionic kombinuje?

Nejčastěji se kombinuje s frameworkem Angular, ale lze jej použít kdekoliv co podporuje CSS, HTML a JS, tedy libovolný webový frontendový framework nebo knihovnu (třeba 🚧 React , 🚧 Vue , Stencil, Svelte, …). Pokud chcete můžete psát i v klasickém JavaScriptu, ale to je spíše na škodu.

Proč je v Ionic zmíněná knihovna Capacitor nebo Cordova?

Capacitor nebo Cordova (dnes již zastaralé řešení), jsou nativní wrappery - také někdy nazývány jako bridge (viz obrázek výše). Tyto technologie nejsou nic jiného než jakási “spojka” mezi nativní částí aplikace a webovou částí. Capacitor je dnes nástupce již zastaralé Cordovy a je vyvíjen pod záštitou Ionicu, neznamená to, že je nutné pro aplikace využívat Ionic!

Pomocí tohoto wrapperu nepotřebuje vývojář znát nativní programovací jazyky jako jsou C, C++, C#, Objective-C, Swift, Kotlin, Java a další. Neznamená to však, že by webový kód s nativní částí aplikace nikdy do styku nepřišel! Ne vše totiž vytvořit webově!

<aside> ☝ Pro tvorbu aplikace si můžete zvolit libovolnou UI knihovnu nebo si psát vše ručně v index.html, ten “zabalím” pomocí Capacitor a mám mobilní aplikaci. Mohu to tedy psát v tom, co se mi zrovna líbí nebo co chci.

Začátky s Ionic

Ionic má jako jeden z mála moderních frameworků velmi kvalitní dokumentaci, nezapomínejte proto ji číst! Vše lze nalézt na https://ionicframework.com/

Instalace a základní nastavení

Ionic je možné nainstalovat různými způsoby. Oficiálním způsobem skrze Ionic CLI (obdoba Angular CLI) nebo jej přidat jako “knihovnu” do jiného FE projektu skrze NPM.

Instalace Ionic