Jetpack Compose, de UI-toolkit van Google voor het ontwikkelen van Android-apps, bevindt zich nu in de alfafase. Het is volledig interoperabel met de standaardweergaven van Android.
Als het gaat om het ontwikkelen van een app, zijn er veel manieren om dit aan te pakken. Je kunt kiezen voor welke platform(en) je wilt ontwikkelen, welke programmeertaal(en) je wilt gebruiken en nog zoveel meer.
In de herfst van 2019 kwam Google geïntroduceerd een nieuw raamwerk voor het bouwen van gebruikersinterfaces in Android, met behulp van Kotlin. Tot nu toe bevond het zich in een ontwikkelingsfase, met regelmatig brekende veranderingen en talloze ontbrekende functies. Maar vandaag heeft Google Jetpack Compose naar de alpha-release-status gebracht, wat betekent dat het een stap dichter bij gebruik in projecten van productiekwaliteit is.
Wat is Jetpack Compose?
Bij het bouwen van een Android-app zijn er meestal twee hoofdcomponenten waarmee u te maken krijgt: de code, voor op logica gebaseerde dingen; en de XML, voor lay-outs. Standaard gebruikt Android Java voor code en een eigen set XML-tags voor lay-outs.
Voor velen zijn Java en XML prima, vooral voor eenvoudigere apps. Maar beide systemen hebben hun beperkingen en ergernissen. Met de introductie van Kotlin als officieel (en aanbevolen) taal voor Android-ontwikkeling, is de codeerkant van het maken van een Android-app aantoonbaar een stuk eenvoudiger geworden. Met de handige functies van Kotlin, zoals ingebouwde nulbeveiliging en uitbreidingsfuncties, ziet de code er overzichtelijker uit en is deze gemakkelijker te lezen.
Maar Kotlin veranderde niets aan de lay-outs van Android. Om een complexe lay-out te maken, moest je nog steeds een XML-bestand maken en dat daar ontwerpen. Dit heeft enkele opmerkelijke nadelen, waaronder de inherente scheiding tussen de code en XML. Als u bijvoorbeeld een constante tekenreeks in uw code heeft, kunt u daar niet alleen vanuit XML naar verwijzen. Als die tekenreeks in de code verandert, moet u er dus aan denken om deze ook in XML bij te werken.
Voer Jetpack Compose in. Dit is het antwoord van Google op het steeds onhandiger wordende XML-lay-outontwerpproces in Android. In plaats van de gebruikersinterface van uw app in XML te ontwerpen, kunt u dit rechtstreeks vanuit uw code doen. Hoewel het mogelijk is om op code gebaseerde lay-outs te maken, zijn ze doorgaans minder onderhoudbaar dan XML en omvatten ze gemakkelijk te breken bibliotheken. Compose daarentegen is ontworpen om rechtstreeks in Kotlin te werken: geen XML meer.
Jetpack Compose wijkt ook behoorlijk radicaal af van het standaard imperatieve ontwerp van XML-lay-outs. In plaats daarvan lijkt het meer op React of Flutter, met declaratieve lay-outs die zichzelf bijwerken wanneer gegevens veranderen, in plaats van te vertrouwen op de ontwikkelaar om die logica te implementeren.
Wat wordt ondersteund
Dus Jetpack Compose bevindt zich nu in alpha. Wat betekent dat? Nou ja, een heleboel dingen.
Interoperabiliteit met weergaven
Net zoals Kotlin volledig interoperabel is met Java, is Jetpack Compose volledig interoperabel met de standaardviews van Android. Dit betekent nogal wat dingen.
Ten eerste zal het een stuk eenvoudiger zijn om naar Jetpack Compose te migreren als je dat wilt. In plaats van al uw aangepaste weergaven en lay-outs naar Composables te moeten converteren, kunt u uw nieuwe lay-outs en componenten gewoon in Compose maken. Heeft u een bibliotheek die verouderde weergaven gebruikt, maar is uw app ontworpen met Compose? Geen probleem. U kunt de View rechtstreeks toevoegen aan uw Composable-functie. Heeft u nog niet de sprong naar Compose gemaakt, maar wilt u een bibliotheek gebruiken die afhankelijk is van Composables? Nogmaals, geen probleem. Plaats de Composable gewoon in uw lay-out.
Wat de thema's betreft, het is niet zo plug-and-play als de interoperabiliteit van de lay-out. Echter, Google heeft een bibliotheek gemaakt om uw standaard XML-thema's aan te passen in Compose-compatibele thema's, waardoor u alles gecentraliseerd kunt houden en duplicatie kunt voorkomen.
Animaties
Er valt hier niet echt veel te zeggen, behalve dat Jetpack Compose animaties ondersteunt, net als het View-framework van Android. U kunt naar hartenlust verplaatsen, vergroten of verkleinen en roteren.
Luie lijsten
Een luie lijst is in wezen Compose's versie van een RecyclerView. Het geeft alleen items weer als dat nodig is, waardoor er op RAM wordt bespaard en de prestaties worden verbeterd. Omdat dit Compose is, zijn lijsten natuurlijk aanzienlijk eenvoudiger te implementeren.
BeperkingIndeling
Een van de krachtigere weergaven in Android is de ConstraintLayout. Hierdoor kunt u kindweergaven ten opzichte van elkaar positioneren, vergroten en wegen, terwijl bepaalde animaties ook eenvoudiger worden gemaakt. Als u zich zorgen maakte over het verlies van deze functionaliteit in Compose, hoeft u dat niet te doen, want deze is er ook.
Materiële UI-componenten
Een andere reeks krachtige weergaven is de Material Components-bibliotheek van Google. Het grootste deel van wat hier staat, zijn standaardweergaven en lay-outs die u kunt vinden in het oorspronkelijke View-framework. Maar ze zijn aangepast of ingepakt om extra functionaliteit te bieden en het thema gemakkelijker te maken, en ze hebben ook hun weg naar Compose gevonden.
Testen
Een belangrijk onderdeel van het ontwikkelen van een app is het testen ervan. Voor een eenvoudige app kunt u dit handmatig doen door deze te installeren en te gebruiken. Complexere projecten kunnen echter enorm profiteren van geautomatiseerde testframeworks die het meeste werk voor u doen. Jetpack Compose ondersteunt geautomatiseerd testen, zodat u uw app zo stabiel mogelijk kunt maken.
Toegankelijkheidsfuncties
Bereikbaarheid is een belangrijk onderdeel van onze samenleving. Zonder toegankelijkheidsfuncties in onze technologie zouden veel mensen eenvoudigweg buitengesloten worden van de voordelen die onze telefoons, televisies en wat dan ook bieden. Jetpack Compose bevindt zich nog in de alfafase, dus de toegankelijkheidsondersteuning is nog niet compleet. Google houdt er echter rekening mee tijdens de ontwikkeling en er is al rudimentaire ondersteuning aanwezig.
Android-studio
Niet alle functies van Jetpack Compose zitten echter in Jetpack Compose zelf. Android Studio en Kotlin hebben ook plug-ins en uitbreidingen om gemakkelijker te kunnen componeren.
Kotlin compiler-plug-in
Net als bij Kotlin JVM is er een compilerplug-in in Android Studio om uw Compose-functies correct om te zetten in code die Android daadwerkelijk kan begrijpen en volgen.
Interactieve voorbeelden
Net als bij uw standaard XML-lay-outs wordt Android Studio geleverd met een lay-outvoorbeeld voor Jetpack Compose. Hoewel het momenteel in sommige opzichten niet zo handig is als de XML-voorbeelden, moet je je project er wel voor bouwen de preview die moet worden bijgewerkt en een speciale preview-functie moet worden gemaakt: deze heeft één opmerkelijk voordeel: interactief voorvertoningen.
Een interactieve preview is slechts een normale preview, maar interactief. Gek, ik weet het. Wat dit echter betekent, is dat je daadwerkelijk tekst in tekstvakken kunt typen, op knoppen kunt klikken en, nou ja, kunt communiceren met je Composables, zonder ze zelfs maar te hoeven implementeren.
Eén samengestelde implementatie
Als u uw lay-out daadwerkelijk wilt implementeren (dat wil zeggen installeren) om te zien hoe deze werkt op een echt apparaat, kan deze functie u misschien helpen. Om te zien hoe een lay-out in de echte wereld werkt, moet u bij normale XML-lay-outs de hele app bouwen en installeren. Als de lay-out die u wilt testen niet op het hoofdscherm staat, moet u mogelijk veel tikken om er te komen.
En dat is waar de mogelijkheid om slechts één Composable in te zetten een rol speelt. In plaats van dat u uw app moet bouwen en installeren en vervolgens naar de lay-out moet navigeren die u test, kunt u gewoon de lay-out implementeren. Android Studio genereert en opent een wrapper-activiteit waarin alleen de Composable wordt weergegeven die u heeft geïmplementeerd. Dit kan het testen en ontwerpen een stuk sneller maken, en kan zelfs helpen problemen met betrekking tot elementinteractie te isoleren.
Codevoltooiing
Als uw IDE geen code-aanvulling heeft, is het dan wel een IDE? Nee. Nee, dat is het niet. Android Studio ondersteunt dus uiteraard de volledige codeaanvulling voor Jetpack Compose.
Hoewel dit niet alles is wat Jetpack Compose te bieden heeft, laten de functies en het gedrag hierboven zien hoe krachtig Google wil dat dit raamwerk is. En hoewel het nog steeds in de alfafase verkeert, is dat een stap voor op de vorige 'ontwikkelings'-status. Als je Jetpack Compose nog niet echt wilde gebruiken (zoals ik was), is dit misschien het moment om het nog eens te proberen.