Jetpack Compose: Budoucnost vývoje pro Android?

Svět vývoje aplikací (nejen) pro systém Android je pořád v pohybu a kdo chce být úspěšný, musí se držet v čele neustálých inovací. Přesně proto je načase si dopodrobna představit revoluční sadu nástrojů, která svou transformační silou zanechává výraznou stopu na poli moderního vývoje uživatelského rozhraní pro Android. Řeč je samozřejmě o Jetpack Compose!

Jetpack Compose: Čím je výjimečný

Začneme rychlým představením. Jetpack Compose je moderní a stále populárnější nástroj od Googlu navržený pro vývoj uživatelského rozhraní (UI) v prostředí Androidu.

V čem je tak jedinečný? Velice usnadňuje a urychluje tvorbu interaktivního a responzivního UI. Svými možnostmi navíc předvádí obrovský potenciál zacloumat celým ekosystémem vývoje v Androidu.

Tradiční metody vývoje uživatelského rozhraní často zahrnují imperativní kódování a složitou správu skrze XML. Jetpack Compose ale využívá sílu jazyka Kotlin a vývojářům umožňuje tvořit aplikace kompozitním a reaktivním přístupem.

To oceníte zvláště při vytváření složitých uživatelských rozhraní.

Kdo ocení moderní framework

Pokud s Jetpack Compose ještě nemáte zkušenosti, ničeho se nebojte – začít může bez problémů každý. Vývojáři se navíc díky dostupnému průvodci nastavením rychle seznámí s celou sadou nástrojů.

Věřte nám. Tvorba vlastního UI pomocí deklarativní syntaxe je s Compose otázkou minut či hodin i pro někoho, kdo s frameworkem teprve začíná.

Jetpack Compose se snaží vývojářům vyjít vstříc a umožňuje jim bez námahy zvládat i složité požadavky. Od vytváření vlastního RecyclerView až po navrhování dynamických rozhraní chatovacích aplikací.

Hlavní plusy Jetpack Compose? 

• Flexibilita a škálovatelnost i pro složité vize UI
• Šikovné použití kompozitních funkcí a jejich skládání
• Jednoduchý proces vytváření interaktivního a vizuálně lákavého UI

Je toho ale mnohem víc.

Kompozitní funkce v praxi

Na obrázku níže vidíte jednoduchou kompozitní funkci tvořící komponentu uživatelského rozhraní.

Příklad kompozitní funkce

Největší výhodou je možnost znovuvyužití v jiné složené funkci. Na konkrétním příkladu se zaměříme na funkci setContent, která nastavuje obsah pro MainActivity.

Ukázka složené funkce

Při použití vzniká textová komponenta s pozdravem „Hello Android”. Žádná věda. 

Jakmile se prokoušete touto částí, tak už tvorbě vlastního komplexního uživatelského rozhraní nic nebrání.

Komplexní rozhraní? Správa stavu? Hračka!

Tvorba komplexních a dynamických uživatelských rozhraní je ošemetná oblast. Můžete se proto radovat – tady Jetpack Compose opravdu září.

Místo jednoduchých příkladů se proto rovnou vydáme prozkoumat možnosti při řešení složitých požadavků. Na příkladu si definujeme komponovatelnou funkci CardItem. 

Definice komponovatelné funkce

Zobrazená funkce používá komponentu CardItem k vytvoření uživatelského rozhraní karty, do které je zapojena komponenta Column. A aby toho nebylo málo, ta ještě obsahuje další dvě součásti – text pro nadpis a podnadpis.

Jetpack Compose dále vyniká ve správě stavu.

V tradičním vývoji pro systém Android se stav obvykle spravuje pomocí Views a Activity/Fragment cyklů. Jetpack Compose přímo poskytuje nástroje pro zapamatování funkcí nebo například mutableStateOf.

Správa zaškrtávacího políčka v Jetpack Compose

V tomto případě slouží ke správě stavu zaškrtávacího políčka. K dispozici také máte širokou škálu předpřipravených komponent uživatelského rozhraní, které je možné dále přizpůsobovat a kombinovat.

Bohatá nabídka předpřipravených komponent

Při vytváření vlastního RecyclerView používá Compose tzv. LazyColumn. Je důležité si uvědomit, že nic jako Adapter tu neexistuje. Všechny položky vykresluje a pozicuje přímo framework.

Vývojář ve výsledku píše méně kódu, což také snižuje prostor pro případné chyby.

Níže uvedený příklad zobrazuje kontejner Scaffold, který definuje horní panel i floating action button. LazyColumn je tak zapouzdřený rovnou se 3 textovými položkami. 

Sada funkcí umožňuje tvořit složitá rozhraní

Využitím kompozitních funkcí, nástrojů pro správu stavů a předpřipravených komponent UI mohou vývojáři vytvářet uživatelská rozhraní, která jsou vysoce modulární, opakovaně použitelná a škálovatelná.

Migrace kódových sad není složitá

Mnoho vývojářů bojuje s integrací již stávajících kódových základen. A není se čemu divit, zvláště u velkých projektů vyvinutých tradičními způsoby (např. XML) může jít o poměrně složitý proces.

Existuje ale několik strategií, jak postupně zavést Jetpack Compose do vašich stávajících projektů. A není to žádná zkouška ohněm.

Jako první se nabízí ta nejradikálnější možnost – začít vytvářet nové funkce či obrazovky pomocí Compose. Vyhnete se tak nepříjemné migraci úplně všeho najednou a navíc se pořádně seznámíte s novým frameworkem.

Druhou a možná vhodnější možností je použít komponenty AndroidView a ComposeView ke vložení prvků z Jetpack Compose do stávajícího rozvržení.

Můžete tak pomalu přecházet na nový framework a zároveň využívat stávající kódovou základnu pro ostatní funkce. 

Určitě oceníte tato pokročilá témata

• Vytváření animací. Moderní framework nabízí arzenál výkonných nástrojů pro vytváření plynulých a citlivých animací. Patří sem funkce animate*AsState, rozhraní Tansition API a třída AnimationVector.
  
  

• Vlastní rozvržení. Compose poskytuje flexibilní systém rozvržení k vytváření vlastních specializovaných komponent k potřebám aplikací. Hodí se téměř pro cokoliv.
  
  

• Navigace. Hlavní roli zde hraje komponenta NavHost a třída NavController. Společně slouží k implementaci navigace mezi různými obrazovkami či destinacemi aplikace.
  
  
• Tematizace. Konzistentní a vizuálně atraktivní uživatelská rozhraní vznikají také díky výkonnému systému tematizace. Vývojáři mohou v Compose přizpůsobit vše od barev až po typografii.
  
  
• Testování. Framework poskytuje rozhraní API a komplexní testovací nástroje pro uživatelská rozhraní (včetně jednotkových a integračních testů), která zajistí spolehlivé fungování dle představ.
  
  
• Optimalizace výkonu. Nechybí ani pokročilé techniky a nástroje, jako je paměťová optimalizace, lazy composition a view recycling. Výsledná uživatelská rozhraní jsou rychlá, citlivá a plní požadavky na jedničku.

Osvědčené postupy v Jetpack Compose

Aby Compose fungoval pro vaše účely co nejlépe a nejpřesněji, vyplatí se i v tomto případě dodržovat osvědčené postupy. 

Patří sem například minimalizace počtu rekompozic a využití paměťových funkcí, aby framework přijímal pouze minimum externích parametrů.

Za zvážení také stojí vytvoření vlastních opakovaně použitelných kompozitních funkcí místo těch standardních, které vždy provází obrovský seznam parametrů.

Vývojáři by také měli mít zkušenosti s běžnými návrhovými vzory a pokyny s ohledem na přístupnost (například pro Material Design), aby výsledné rozhraní bylo nejen funkční, ale také intuitivní a uživatelsky přívětivé.

Ale i bez těchto tipů se v prostředí zorientujete rychle. Sám Compose vás navede k nejlepšímu řešení!

Jaká je budoucnost Jetpack Compose?

Jetpack Compose je výkonný nástroj pro všechny Android vývojáře, kteří se snaží vytvářet atraktivní, výkonná a dynamická uživatelská rozhraní deklarativním způsobem.

Vývoj frameworku se žene neustále kupředu a s ním i jeho rostoucí rozšíření, proto lze sebevědomě říct, že Jetpack Compose je budoucností vývoje uživatelských rozhraní systému Android.

Co tomu dále naznačuje?

• Pokračující růst a přijetí ve vývojářské komunitě
• Zlepšování výkonu a stability
• Integrace s dalšími knihovnami (Navigation, Paging, WorkManager)
• Zdokonalování rozhraní API pro potřeby vývojářů

Je už Jetpack Compose vaším běžným pomocníkem při vývoji? Přiměl vás náš článek ho vyzkoušet? Pokud chcete další podrobnější informace, mrkněte na online meetup našeho vývojáře Majka.

Máte nějaké dotazy přímo na nás? Potřebujete pomoct s vývojem (nejen) Android aplikace na míru? Kontaktujte nás! Náš tým vývojářů si rád poradí s každou výzvou.