Wikipedista:FilipSterba/Pískoviště

Ionic je sada vývojových nástrojů pro hybridní vývoj mobilních aplikací. Ionic se řadí mezi otevřené software, tj. je vývojářům volně k dispozici. V roce 2013 jej vytvořili vývojáři Max Lynch, Ben Sperry, a Adam Bradley z Drifty Co.

Původní verze byla vytvořena pro framework AngularJS a využívala technologii Cordova. V polsedních letech však Inoic prošel změnami a nyní je jeho základem technologie WebComponents, představující sadu funkcionalit přímo v prohlížečí. Díky tomu vývojáři využívající Ionic mají možnost zvolit si pro tvorbu hybridních aplikací framework pro tvorbu uživatelských rozhraní, jako například React, Angular nebo Vue, případně tvořit uživatelská mobilní rozhraní bez využití frameworků - pomocí CSS, HTML a JavaScriptu.

Ve výsledku to znamená, že vývojář může tvořit plnohodnotné mobilní aplikace pomocí webových technologií a následně tyto aplikace nahrát do obchodů s ntaivními aplikacemi jako Google store and App Store. Následně si je uživatel může stáhnout a nainstalovat jako každou jinou aplikaci.

Ionic lze stáhnout jako NPM modul a vyžaduje nainstalovaný Node.js.

npm install -g ionic

Části frameworku Ionic

editovat

Ionic nabízí několik hlavních celků, díky kterým má vývojář v rukou kompletní nástroj pro tvrobu mobilních aplikací s využitím webových technologií.

Knihovna komponent

editovat

Součástí celého frameworku Ionic je také knihovna komponent pro uživatelské rozhraní. Tyto takzvané komponenty může vývojář využívat a urychlit tím tak vývoj celé aplikace. Ionic nabízí sadu základních interaktivních prvků, jako je například seznam, tlačítko, nebo karty. Tyto komponeny Ionic také poskytuje s vlastní logikou. Například komponenta “Virtual scroll” umožňuje vývojáři vytvořit seznam s velkým množstvím položek a možností mezi nimi listovat bez dopadů na výkon.[1]

Zároveň jsou všechny komponenty připravený ve dvou variantách, pro iOS a Android, přizpůsobují vzhled jednotlivých interaktivních podle návodů na uživatelské rozhraní daného operačního systému. Uživatel, který si nainstaluje aplikaci napsanou v Ionicu tak velmi často nepozná, že využívá webový prohlížeč.[2]

Přístup k rozhraní

editovat

Ionic využívá k přístupu k periferiím mobilních zařízení a využívání výhod nativních aplikací jako notifikace, geolokace a další, které nejsou pro webové aplikace možné, knihovny Cordova nebo Capacitor.

Každý z těchto pluginů, které zpřístupňují programátorovi periferie telefonu, mají dvě části. Jedna je napsána v nativním kódu (Cordova, Capacitor) vždy pro danou platformu (iOS, Android), druhá pak napsaná v programovacím jazyce TypeScript.

Vývojář má možnost vybrat si mězi dvěma verzemi knihoven. První je zdarma a je vyvíjená komunitou vývojářů, druhá je placená a tým spracující Ionic zajišťuje její vývoj.[3]

Příkazový řádek

editovat

Ionic nabízí ke snadnému využívání jeho funkcionalit sadu příkazů, které může vývojář využívat po nainstalování Ionic CLI[4]. Ukázka několika základních příkazů:

ionic init

nainicalizuje nový projekt

ionic build

příkaz zkompiluje kód, ve ktrém je aplikace napsána a připraví jej pro nasazení do produkce

ionic capacitor add <platform>

přidá do projektu složku se specifikovanou platformou, pro kterou chce vývojář aplikaci vytvářet. Možnosti jsou ios, android, nebo electron.

ionic capacitor build 

příkaz provede následující operace:

  • spustí příkaz Ionic build
  • zkopíruje webové soubory do zvolené nativní platformy
  • otevře vývojové prostředí pro zvolenou platformu (Xcode pro iOS, Android Studio pro Android)

Jakmile se webové soubory a konfigurace zkopírují do vašeho nativního projektu, můžete svou aplikaci vytvořit pomocí nativního IDE.

ionic serve 

spustí vývojový server ve vašem prohlížeči. Sleduje změny ve zdrojových souborech a automaticky se znovu načte s aktualizovaným sestavením.

Ve výchozím nastavení ionic spouští vývojový server na lokální síti. Je však možné příkazu pomocí parametru --external nastavit i externí adresu, na které bude spuštěná verze k dispozici.

Aplikace napsané pomocí frameworku Ionic využívají jak nativního kódu dané platformy, tak webových technologií a umožňují přístup k perifériím zařízení, potřebuje-li to programátor. Ionic zároveň využívá funkce nativní hardwarové akcelerace dostupné v prohlížeči, jako jsou například CSS animace a optimalizuje vykreslování. Toho dosahuje například vyhýbáním se zbytečnému překreslování DOM modelu webové stránky. Zároveň pro zlepšení výkonu aplikací Ionic využívá přechody a transformace CSS pro animaci. Protože se o CSS animace ve webovém prohlížeči stará grafická karta / procesor, je tak uvolněno místo na hlavním procesoru pro další operace.

Alternativní technologie

editovat

Ionic není jediný nástroj svého druhu, který umožňuje vývojářům psát jeden druh zdrojového kódu pro více zařízení nebo platforem, tj. pro webové prohlížeče, mobilní aplikace Android nebo iOS.[5]

React Native

editovat

Jednou z lepších alternativ k Ionic, React Native[6], je open-source framework pro vývoj aplikací od společnosti Facebook. Pomocí React Native mohou uživatelé vyvíjet aplikace pro Android, Windows, iOS, Mac a webové aplikace. React Native zůstává velmi úspěšnou volbou pro malé i velké společnosti. Je perfektní volbou pro vytváření výkonných aplikací pro Android a iOS prostřednictvím dříve napsaných kódů. Při psaní kódů pro aplikaci React Native bude aplikace obsahovat komponenty React pro lepší efekt. Definice nativních komponent React se zaměřují na nativní widgety uživatelského rozhraní pro mobilní aplikace.

Flutter

editovat

Flutter pochází z domu společnosti Google a dalšího praktického open-source rámce pro vývoj mobilních a webových aplikací. Tato sada SDK s otevřeným zdrojovým kódem kombinuje širokou škálu widgetů pro vývoj uživatelského rozhraní. Je třeba poznamenat, že Flutter nikdy nepoužívá widgety OEM. Spíše upřednostňuje používání připravených widgetů, které mají nativní vzhled pro aplikace pro iOS a Android. Na druhou stranu mají vývojáři také možnost vytvořit si vlastní widgety. V současné době je Flutter jedinou dostupnou sadou SDK, která nabízí reaktivní zobrazení bez mostu JavaScriptu. To je hlavní důvod, proč tolik vývojářů zvažuje Flutter, aby vyvinuli své aplikace.[7]

Xamarin

editovat

Xamarin, další vhodná alternativa k Ionic, prochází spravovaným prostředím a je skvělý pro vývoj aplikací pro platformy Android, Windows a iOS. Tento open-source nástroj usnadňuje vývojářům práci s použitými kódy napříč platformami při vývoji aplikací. Opakovaná použitelnost struktury kódu je hlavní výhodou spojenou s Xamarinem. Výsledkem je, že vývojáři mohou použít jediný jazyk k napsání obchodní logiky pro všechny platformy bez omezení výkonu. Další skvělá věc na Xamarin je, že aplikace jsou psány na Mac nebo PC a poté kompilovány do nativních souborů APK a IPA.[8]

  1. IONIC. ion-virtual-scroll - Ionic Documentation. Ionic Docs [online]. [cit. 2021-01-25]. Dostupné online. (anglicky) 
  2. IONIC. UI Components - Ionic Documentation. Ionic Docs [online]. [cit. 2021-01-25]. Dostupné online. (anglicky) 
  3. IONIC. Native APIs - Ionic Documentation. Ionic Docs [online]. [cit. 2021-01-25]. Dostupné online. (anglicky) 
  4. IONIC. Ionic CLI - Ionic Documentation. Ionic Docs [online]. [cit. 2021-01-25]. Dostupné online. (anglicky) 
  5. SATHIANESAN. UNIFIED SEMANTIC BLOG MINING FRAMEWORK AND SUMMARIZED BLOG RETRIEVAL. Journal of Computer Science. 2013-02-01, roč. 9, čís. 2, s. 207–217. Dostupné online [cit. 2021-01-25]. ISSN 1549-3636. DOI 10.3844/jcssp.2013.207.217. 
  6. React Native. reactnative.dev [online]. [cit. 2021-01-25]. Dostupné online. (anglicky) 
  7. Flutter - Beautiful native apps in record time. flutter.dev [online]. [cit. 2021-01-25]. Dostupné online. (anglicky) 
  8. Xamarin | Open-source mobile app platform for .NET. Microsoft [online]. [cit. 2021-01-25]. Dostupné online. (anglicky)