5 astuces à connaître lors du passage d'Apache Cordova à Xamarin

Si vous avez décidé de passer de Cordova à Xamarin pour le développement de votre application mobile multi-plateforme, voici les cinq meilleurs conseils que vous devez connaître.

modèle de PhoneGap / Cordova ou l'approche plus native de Xamarin est le meilleur modèle de développement "hybride" pour les applications mobiles, cet article supposera que vous avez réglé ce débat pour vous-même et que vous êtes prêt à faire le saut vers Xamarin. Voici certaines choses que vous devriez savoir.

1. Xamarin et Cordova résolvent différents problèmes

Pour comprendre les différences et les similitudes entre Xamarin et Cordova, il est utile de commencer par comprendre comment les architectures se rapportent aux environnements mobiles eux-mêmes.

dans un wrapper spécial autour du moteur HTML Rendering contenu dans le contrôle UIWebView (pour iOS, WebView pour Android). Pensez-y comme un navigateur Web programmable. Vos HTML / CSS / JavaScript sont tous exécutés dans ce contrôle de navigateur. Cordova Plugins fournit des wrappers JavaScript autour des API natives exposées via Objective-C Runtime ou Android Runtime. Les plugins Cordova Core tentent d'unifier les fonctionnalités de tous les systèmes d'exploitation dans une API cohérente pour vos applications. Des plug-ins spécifiques à une plate-forme sont disponibles lorsque vous devez appeler un système d'exploitation ou des API spécifiques à un périphérique.

Les applications Xamarin sont conçues pour s'exécuter dans une version du Common Language Runtime appelée Mono. Contrairement aux bibliothèques Cordova Core qui tentent de masquer les différences entre les différentes API OS de manière unifiée mais souvent limitée, Xamarin expose directement les API natives avec toutes les fonctionnalités disponibles pour le développeur. Cela permet également d'écrire des applications Xamarin contre presque toutes les bibliothèques existantes pour les plates-formes OS quelle que soit la technologie utilisée pour les créer.

Pour les applications iOS fonctionnant sur un iPhone, le code est compilé dans des bibliothèques binaires natives. Cela a des avantages et des inconvénients et est décrit en détail ici .

Par exemple, voici le code Xamarin.iOS utilisé pour initialiser une application dans iOS.

 public partial class AppDelegate: global :: Xamarin.Forms.Platform.iOS.UIApplicationDelegate
{
  public override bool FinishedLaunching (application UIApplication, options NSDictionary)
  {
    return base.FinishedLaunching (app, options);
  }
} 

Et voici le même code dans Swift:

 @UIApplicationMain
classe AppDelegate: UIResponder, UIApplicationDelegate {
  application func (_ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    retourner vrai
} 

Notez que l'application Xamarin utilise l'objet NSDictionary pour contenir les options. Dans ce cas, l'objet NSDictionary est une référence à un objet NSDictionary réel à partir des API Foundation d'iOS

C'est vraiment la principale différence entre Xamarin et Cordova. Cordova tente de fournir un modèle de programmation JavaScript unifié pour tout périphérique mobile tandis que Xamarin est un modèle de programmation conçu pour exposer les fonctionnalités de la plate-forme mobile d'une manière cohérente pour les développeurs .NET.

2. Xamarin n'est pas hybride, Xamarin.Forms est

Vous avez raison, ce n'est pas le cas. À la base, Xamarin est un environnement de développement conçu pour permettre le développement .NET sur des appareils mobiles avec une abstraction aussi faible que possible de la plate-forme. Vous obtenez les avantages des bibliothèques .NET BCL et Mono Runtime avec les fonctionnalités du système d'exploitation sous-jacent. Si toutefois vous voulez créer des applications qui peuvent fonctionner sur plusieurs plates-formes, vous devez utiliser une extension Xamarin appelée Xamarin.Forms.

Dans une application Xamarin.iOS ou Xamarin.Android, les éléments de l'interface utilisateur sont construits en utilisant les mêmes modèles développement. Cela signifie que iOS utilise des storyboards et des vues et Android utilise des fichiers .AXML. Xamarin Studio et Visual Studio disposent tous les deux d'un excellent outil de conception pour créer des interfaces utilisateur. Ces fichiers sont ensuite compilés dans les paquets de l'application de la même manière que les applications natives, généralement en tant que ressources intégrées.

Xamarin.Forms est basé sur le modèle de programmation de l'interface utilisateur XAML autour du monde .NET pour créer des applications Windows. depuis quelques années. En fait, Xamarin.Forms fonctionne également pour la construction d'applications Universal Windows Platform, y compris Windows 10, Xbox, HoloLens, Surface Hub et autres. XAML est un modèle déclaratif de construction d'interfaces utilisateur, similaire au HTML, mais utilisant des balises XML bien formées spécifiques aux contrôles de l'interface utilisateur pour Xamarin.Forms. Voici un exemple d'interface utilisateur de base définie en XAML.

Cette spécification définit une page simple avec une étiquette au centre de l'écran disant "Welcome to Xamarin.Forms" et un contrôle Switch à côté de lui.

Alors que les contrôles Xamarin.Forms sont différents des contrôles HTML , vous trouverez beaucoup de mêmes caractéristiques sont disponibles et peuvent être grossièrement regroupées dans les catégories suivantes.

• Pages: Ces contrôles représentent les types de page de base et comprennent ContentPage NavigationPage TabPage MasterDetailPage et autres
• Layout: Ces contrôles gèrent la disposition des autres contrôles sur la page et incluent des choses comme StackLayout ScrollView et Grid .
• Vues: Ce sont les contrôles individuels sur une page telle que Label ] Bouton Image etc.
• Cellules: Ces contrôles sont e utilisé dans ListView et TableView contrôles et sont utilisés pour formater le contenu de ces contrôles.

Nous n'avons pas le temps de couvrir tous ces contrôles dans cet article, mais vous pouvez en savoir plus sur les différents contrôles disponibles et comment les utiliser ici . Plus important encore, ces contrôles se rapportent directement aux contrôles de l'interface utilisateur sur chacune des plates-formes mobiles

Voici à quoi ressemble l'exemple précédent dans chaque plate-forme:

Notez que chaque commutateur semble subtilement différent. C'est parce que la plate-forme elle-même détermine à quoi ressemble le contrôle. Cela garantit que les applications écrites pour iOS ressemblent à d'autres applications écrites pour iOS, les applications Android ressemblent à d'autres applications Android, etc.

Les pages Xamarin.Forms et le code UI sont compilés dans une bibliothèque qui est ensuite incluse dans un projet pour chaque plate-forme , typiquement [App] .iOS [App] .Android [App] .UWP . Si vous avez besoin d'écrire du code spécifique à la plate-forme, vous pouvez l'ajouter aux projets spécifiques à la plate-forme. Xamarin.Forms a également des moyens de spécifier des valeurs spécifiques à la plate-forme, mais la plupart du temps, vous voudrez conserver le code de votre plate-forme dans les projets de la plateforme.

3. Travailler avec des images est plus complexe

Dans les technologies Web, les images sont facilement incorporées dans les applications avec le contrôle WebView effectuant la majeure partie de la levée de lourdes charges pour traduire l'image à la résolution d'écran du périphérique. Dans les applications mobiles natives et Xamarin, les choses sont un peu plus compliquées. Les images sont intégrées dans l'application en tant que ressources et, selon la plate-forme, vous pouvez créer plusieurs versions pour tenir compte des différences de résolution d'écran.

Pour iOS, les images sont organisées en jeux d'images de catalogue d'actifs et nécessitent une version de l'image. dans différentes tailles pour prendre en charge les différentes résolutions et la mise à l'échelle des appareils iOS. Vous utilisez ensuite un fichier JSON pour spécifier quelles images fonctionnent avec quels périphériques et résolutions.

Pour plus d'informations sur l'utilisation des images avec Xamarin, vous pouvez en lire plus ici . Android, les images sont des ressources intégrées dans l'application. Alors qu'Android tentera de mettre à l'échelle les images à la résolution de l'appareil, vous pouvez aider en fournissant des bitmaps de densité variable. Vous pouvez utiliser Android Asset Studio pour générer ces images à utiliser dans vos applications Xamarin. Les ressources sont organisées en dossiers et les images sont placées dans des dossiers commençant par "drawable". Voici un exemple de la structure du dossier:

Pour plus d'informations sur l'utilisation des images dans Xamarin Android, vous pouvez consulter la documentation ici .

4. C # et JavaScript ne sont pas si différents

Si vous avez l'habitude de coder en JavaScript, vous trouverez C # une transition relativement facile. JavaScript est basé sur le langage Java qui lui-même est basé sur C qui est aussi la base de C #. Tant de concepts structurels identiques tels que le contrôle, le branchement, etc. sont tous très similaires. De plus, si vous avez écrit votre JavaScript en utilisant le dernier framework Angular, alors vous êtes familier avec TypeScript. TypeScript est un langage fortement typé qui génère du JavaScript.

C # et TypeScript ont tous deux été conçus par Anders Hejlsberg chez Microsoft

Les composants angulaires et les classes C # sont en fait assez similaires. Prenons par exemple ces deux classes:

Angular / TypeScript

 import {Component} de '@ angular / core';
importer {NavController} à partir de 'ionic-angular';

@Composant({
  sélecteur: 'page-contact',
  templateUrl: 'contact.html'
})

classe d'exportation ContactPage {
  constructeur (public navCtrl: NavController) {
  }
} 

C # / Xamarin.Forms

 en utilisant Xamarin.Forms;
en utilisant Xamarin.Forms.Xaml;

espace de noms HelloXamarin <
{
  [XamlCompilation(XamlCompilationOptions.Compile)]
  Classe partielle publique ContactPage: ContentPage
  {
    public ContactPage ()
    {
      InitializeComponent ();
    }
  }
} 

Chaque classe accède au code d'autres bibliothèques via Imports ou using, chacune a un constructeur, les deux utilisent l'accolade et le point-virgule standard qui dérivent du langage C racine. La plus grande différence est que JavaScript vous permet d'échanger à volonté des types de variables, y compris en assignant des fonctions à des variables. C # est une langue typée et vous spécifiez donc généralement les types spécifiques que vous voulez utiliser. Par exemple:

 var x = "1";
var y = x * 2; 

En JavaScript, ce code fonctionnera correctement et y recevra la valeur 2. L'interpréteur JavaScript convertit la valeur de chaîne de x en nombre entier à l'exécution puis multiplie par 2 et affecte le résultat à la variable y .

En C # ce code ne sera même pas compilé car vous obtiendrez une erreur de compilation disant "Opérateur * ne peut pas être appliqué opérandes de type 'string' et 'int'. " Cela peut sembler une limitation mais ce qui se passe est que le compilateur vous oblige à être explicite afin que vous puissiez éviter les erreurs lors de l'exécution. Les bogues sont toujours plus faciles à tuer avant leur mise en production.

Cette spécificité signifie également que des concepts plus complexes en JavaScript comme Promises nécessitent une approche légèrement différente en C #. Les variables qui référencent une fonction (ou une méthode en C #) sont un type spécifique appelé délégués. Le langage C # a la capacité d'utiliser des délégués anonymes (aka Lambdas) afin que vous puissiez écrire votre code de la même manière que vous le feriez en JavaScript. Par exemple, ce code est exécuté lorsque l'utilisateur clique sur le contrôle Switch :

 Switch.Toggled + = (expéditeur, e) => {
  // Bouton de basculement
}; 

Toutefois, pour vraiment implémenter les promesses JavaScript, vous devez utiliser la bibliothèque de tâches .NET dans l'espace de noms System.Threading.Tasks . Voici un exemple tiré d'un excellent post sur le sujet par Matt Mazzola

JavaScript

 const GetNumberPromise = async (): Promise  =>
nouvelle promesse  ((résolution, rejet) => résolution (util.SimulateSynchronousApi ())) 

C #

 public static Tâche  GenerateNumberAsyncTaskRun ()
{
  return Task.Run (() => SimulateSynchronousApi ());
} 

5. Construire votre application dans Xamarin, c'est comme la construire à Cordoue

Xamarin et Cordova s'appuient toutes les deux sur les plates-formes natives pour construire l'application pour le déploiement. Si vous utilisez la ligne de commande "cordova build ios" ou "cordova build android", il lancera une série de commandes par lots qui appellera le SDK de plate-forme correspondant pour compiler et empaqueter votre application. Cela signifie par exemple que pour créer une application iOS, vous devez utiliser iOS car vous avez besoin de XCode. Beaucoup de développeurs Cordova ont travaillé autour de cette exigence en utilisant Adobe PhoneGap Build un outil en ligne qui vous permet de télécharger un ZIP de votre projet et ils le compileront sur les plateformes de votre choix.

Xamarin works de la même manière, localement, vous pouvez construire vos applications sur les différents SDK. Xamarin vous permet de créer vos applications iOS à partir de Windows si vous avez une machine iOS à laquelle vous pouvez vous connecter. Mais Microsoft a également le Visual Studio App Center qui vous permettra de créer vos applications pour n'importe quelle plate-forme avec une tonne d'autres fonctionnalités comme les tests automatisés sur de véritables périphériques matériels, bêta tester vos applications sans avoir à passer par les App Stores respectifs. aussi débogage et analyse.

Si vous avez décidé de passer de Cordova à Xamarin, ces conseils devraient vous faciliter la tâche. Mais bien sûr, tout ne peut pas être couvert dans un seul article. Si vous avez déjà changé, quels autres conseils souhaitez-vous que vous connaissiez? N'hésitez pas à partager les commentaires ci-dessous.

Et pour ceux d'entre vous qui développez des applications Xamarin à la recherche d'un ensemble complet et moderne de composants UI, n'oubliez pas de consulter Telerik UI pour Xamarin – télécharger un essai gratuit et créer rapidement des applications Xamarin professionnelles.