Xamarin Forms, iOS Android en Windows crossplatform.

Toen ik bij Rensa werd gevraagd om hun huidige mobiele applicaties voor Windows, iOS en Android te gaan vervangen, door een versie die beter te onderhouden was, was mijn eerste gedachte een Typescript/Html/Cordova applicatie. Maar rond die tijd had Microsoft net Xamarin overgenomen en werd het voor .NET ontwikkelaars met een MSDN licentie, of voor kleinschalig gebruik gratis om Xamarin te gaan gebruiken.

Wat is Xamarin eigenlijk? Het is een omgeving waarin crossplatform apps ontwikkeld kunnen worden voor Android, iOS en OS X met .NET.   In deze omgeving worden apps over het algemeen ontwikkeld in C# maar in principe kan elke taal gebruikt worden die naar MISL compileert. Op Android betekent dit een eigen runtime en op iOS wordt het gecompileerd naar machinecode omdat de kernel geen runtimes ondersteunt.

1. Xamarin

Ontwikkelomgeving

Je kunt met Xamarin op zowel OS X als Windows ontwikkelen. Op Windows gebruik je Visual Studio en maak je verbinding met een Mac om voor iOS te kunnen builden en te draaien op een simulator.

2 Ontwikkelomgeving

Als deze verbinding eenmaal is opgezet kan de iPhone gestart worden vanuit Visual Studio en kun je gebruik maken van alle debug mogelijkheden die Visual Studio biedt, terwijl de applicatie wel op OS X draait.

3 VisualStudio starten op iOS

Als de applicatie draait kan je vervolgens in Visual Studio op Windows een breakpoint zetten en door je applicatie heen stappen.

Als je op de Mac wil ontwikkelen moet je Xamarin Studio gebruiken of de spiksplinternieuwe release candidate van Visual Studio for Mac (niet te verwarren met Visual Studio Code). Als je voor de Mac kiest is het alleen niet mogelijk om Universal Windows Platform (UWP) applicaties te builden of te draaien.

Opzet Xamarin project

4 Xamarin Solution

In afbeelding 4 zie mijn Xamarin project voor Rensa in Visual Studio. Het project gemarkeerd met “(Portable)” is een portable C# class library, die de grootste gemene deler aan .NET api’s ondersteunt. De meeste standaard .NET functionaliteit wordt ondersteund zoals bijvoorbeeld http calls, reflection en threading. Wil je echter afbeeldingen bewerken, dan zal je dit moeten implementeren in platform specifieke projecten, of gebruik maken van een plugin. Plugins zijn gewoon te installeren vanaf Nuget en meestal zal je deze in alle platform-specifieke projecten moeten installeren waarna je deze vanuit het “Portable” project kan aanroepen.

Naast het “Portable” project, zijn er dus projecten voor Android, iOS en Windows, met daarin de platform specifieke code. Nog steeds in C# maar niet meer gedeeld. Hier spreek je dus de api’s aan die specifiek zijn voor de verschillende platformen.

5 iOS SearchBar

In de code in afbeelding 5 pas ik een aantal properties van de UISearchBar klasse aan voor iOS. In Android heb je bijvoorbeeld een SearchView klasse met de properties zoals op dat platform gebruikelijk is.

Ook alle viewcode schrijf je zoals voor het platform gebruikelijk is. Dus voor Android werk je met XML, Activities en Fragments en voor iOS met Xib, Storyboards of code ect.

XAML

We hebben nu een idee wat Xamarin is maar dit artikel gaat over Xamarin Forms. Xamarin Forms is een schil over Xamarin, waarmee je niet alleen de business logica deelt maar ook de view definitie. Dit doe je door middel van een XAML implementatie van Xamarin Forms. XAML staat voor eXtensible Application Markup Language en is hét format voor Microsoft om een UI in XML te definiëren. Vervolgens vertaalt Xamarin dit naar een platform specifieke UI.

Dit gebeurt op een andere manier dan je gewend bent van bijvoorbeeld Java Swing of Html/CSS oplossingen, waarbij de elementen vanaf de grond worden opgebouwd en de UI er standaard precies hetzelfde uitziet op alle platformen. Bij Xamarin Forms wordt het element vertaald naar een platform specifiek element.

6 XAML TabbedPage

In afbeelding 6 staat een voorbeeld van TabbedPage in Xamarin Forms. In dit geval zet ik een aantal properties op het “TabbedPage” element, de “Title” spreekt voor zich en wordt op elk platform boven in de titel balk weergegeven. De “ItemSource” bevat een lijst met view-models die weergegeven worden in de tabs. De “ItemTemplate” property wordt gebruikt om de view te renderen. Ik gebruik hier een zelfgemaakte klasse om op basis van de view-model de juist page te tonen.

7 Windows Tabs
8 iOS Tabs
9 Android Tabs

In afbeelding 7,8,9 zie je hoe dit er uit ziet op de verschillende platformen. Deze methode zorgt ervoor dat de identiteit van het platform behouden blijft maar dat er toch veel UI code gedeeld kan worden.

We kunnen nu zowel de business logica als de UI delen, maar betekent dat ook dat we 100% van de code kunnen delen? Nou niet helemaal, je ziet altijd dat er wat platform specifieke code bij komt. In mijn geval is dit beperkt gebleven tot een aantal UI specifieke functies, zoals het veilig opslaan van het wachtwoord en een implementatie van Google Analytics.

Inmiddels staat de applicatie in de verschillende stores en in afbeelding 10 zie je de regels code per project de conclusie na maanden ontwikkelen: meer dan 90% gedeelde code.

Project Regels code
Gedeeld 7616
iOS 586
Android 751
Windows 471

10 Gedeelde code

Conclusie

Terugkijkend, zou ik Xamarin weer gebruiken? Jazeker, er zijn namelijk een aantal belangrijke voordelen:

  • De kracht van het kunnen delen van je bijna je volledige code base zeker als de apps uit dezelfde user stories bestaan.
  • Het delen van de logica zorgt er voor dat je dit maar één keer hoeft te testen.
  • Er is een kleinere kans op fouten want er is een kleinere codebase omdat er veel code gedeeld is.
  • Als er fouten optreden zijn die voor alle platformen meestal in één keer op te lossen.

En Xamarin Forms? Dat ligt iets genuanceerder. Als je design-eisen niet al te strikt zijn en je wilt voornamelijk werken met de standaard design elementen dan zeker, ook kan het de doorlooptijd flink verkorten. Zijn er echter strikte design-eisen en is er meer vrijheid en flexibiliteit per platform gewenst, dan is Xamarin zonder Forms waarschijnlijk een betere optie.

De applicatie is deels zonder account te gebruiken je kunt het zelf uitproberen:

App in de stores

http://onelink.to/a97zmc

 

 

 

 

Tweet about this on TwitterShare on LinkedIn

Reacties

Het e-mailadres wordt niet gepubliceerd.

*