Xamarin.Forms sur le Web

Nous explorons les possibilités de combiner et de faire correspondre des technologies web avec des Xamarin.Forms natifs.

XAML propulse des applications web. Sur la base de qui vous parlez, cela ramène les meilleurs souvenirs du développeur ou un souvenir de choses qui ont horriblement mal tourné. Alors que les développeurs .NET ont apprécié la facilité de développement et la richesse des outils, le modèle de plug-in est peut-être mort sur le web. Cependant, si vous êtes un aficionado .NET / C # / XAML, il peut y avoir quelques nouveaux développements fournissant de l'espoir pour les technologies natives alimentant des applications Web à nouveau. Xamarin.Forms est en cours de développement et pour les développeurs, cela signifie plus de plates-formes à cibler à partir de la base de code partagée. Cet article explore la promesse de Xamarin.Forms sur le web, démystifie certains mythes et regarde vers l'avenir.

Ooui Web Head

Xamarin.Forms permet aux développeurs de réutiliser le code de logique métier C # et fournit une interface utilisateur abstraction pour le support de la plate-forme. Les développeurs peuvent écrire XAML dans une couche d'interface utilisateur partagée. Au moment de l'exécution, Xamarin.Forms se retourne pour afficher l'interface utilisateur native pour chaque plate-forme. Les plates-formes supportées par Xamarin.Forms sont souvent appelées Heads ou Backends . La magie de transformer XAML générique en interface native pour chaque plate-forme est réalisée par les Renderers – il y a des moteurs de rendu pour chaque abstraction Xamarin.Forms UI qui font le gros du travail pour rendre les interfaces correspondantes. Comme mentionné avant certains esprits très pointus travaillent sur la prise de Xamarin.Forms et ajoutent plus de support de plate-forme. Des efforts sont en cours pour prendre en charge Xamarin.Forms sur plusieurs nouvelles plateformes – comme MacOS, GTK Linux, WPF, Samsung Tizen et même le Web. L'histoire de la portée de Xamarin.Forms est sur le point de devenir beaucoup mieux!

Rencontrez Frank Krueger – développeur extraordinaire sur une variété de fronts. Frank a récemment publié une petite bibliothèque OSS appelée Ooui – à prononcer weee ou plus concrètement, comme ooey bonté au fromage. Ooui est décrit comme:

Une petite bibliothèque d'interface utilisateur multi-plateforme qui apporte la simplicité du développement de l'interface utilisateur native sur le web.

En effet, Ooui fournit des moteurs de rendu pour Xamarin.Forms XAML. Alléluia!

Alors, comment ça marche? Puisque nous ciblons le Web, il doit y avoir un serveur qui diffuse le contenu. Lorsque l'utilisateur fait une demande à une URL donnée, une page est maintenue qui maintient une connexion au serveur à l'aide de Web Sockets. Le serveur conserve un modèle en mémoire de l'arborescence visuelle et l'interface utilisateur réelle est diffusée à l'aide de moteurs de rendu sur XAML.Forms XAML. Le DOM d'ombre sur le serveur est synchronisé avec l'interface utilisateur du navigateur en utilisant un simple protocole de messagerie avec des paquets JSON sur le réseau. Il y a plusieurs échantillons en ligne à jouer – vous pouvez voir comment Ooui rend l'interface utilisateur simple à un peu compliquée pour le web.

Il existe plusieurs façons d'utiliser Ooui – les développeurs peuvent choisir d'utiliser le built-in serveur Web léger ou servez-vous d'un backend ASP.NET Core.

Débâcher les mythes

Il est naturel de soulever des questions quand vous voyez Xamarin .Forms alimentant les applications web pour la première fois. Commençons donc par démystifier certaines idées fausses courantes

ASP.NET Core Ease

Maintenant que nous avons les bases, prenons un regard sur la façon dont les choses fonctionnent. Ooui a son propre serveur web, mais la façon la plus facile de l'utiliser est probablement avec ASP.NET – oui, il supporte le dernier ASP.NET Core en tant que backend de serveur. Et cela fonctionne de la même manière dans Visual Studio – à la fois sur Windows et Mac.

Vous pouvez certainement partir de zéro avec un projet web, mais plus que probablement, vous avez déjà une solution Xamarin.Forms – vous essayez juste d'ajouter le web en tant que plate-forme supplémentaire à soutenir. Commençons par ajouter un projet web ASP.NET Core standard – oui, le modèle MVC intégré fonctionne totalement

Assurez-vous que le framework cible de votre projet web est .NET Core 2.0 – il y a quelques choses dans Ooui qui dépendent de la prise en charge des sockets Web modernes:

Une fois que Visual Studio a fini son échafaudage, vous devriez avoir un standard Projet Web ASP.NET Core – oui, vous pouvez le nommer comme ce que vous faites pour vos autres projets spécifiques à platfom dans la solution Xamarin.Forms. Vous obtenez le point – le web est juste une autre tête:

Ensuite, ajoutez tous les paquets NuGet dont Ooui a besoin pour s'héberger sur ASP.NET Core et rendre pour le navigateur – il y en a trois:

Dans votre projet web, vous voudrez aussi ajouter des références à Xamarin.Forms lui-même ainsi que le PCL Xamarin.Forms partagé /.NET Bibliothèque standard. L'objectif serait d'écrire le moins possible de code spécifique au web et d'utiliser simplement ce qu'il y a dans le projet partagé.

Ajoutons du code dans le fichier Startup.cs dans le projet web – nous utiliserons les configurations et le routage MVC par défaut. Voici un exemple Startup.cs – remarquez l'application app.UseOoui () pour amorcer Ooui dans ASP.NET et Xamarin.Forms.Forms.Forms.Init () pour initialiser le rendu Xamarin.Forms moteur:

 utilisant Xamarin.Forms;
en utilisant Ooui.AspNetCore;

espace de nommage XamarinFormsEveryWhere.Web
{
  démarrage public
  {
    Démarrage public (configuration IConfiguration)
    {
      Configuration = configuration;
    }

    Configuration IConfiguration publique {get; }

    // Cette méthode est appelée par le moteur d'exécution. Utilisez cette méthode pour ajouter
    // services au conteneur.
    public void ConfigureServices (services IServiceCollection)
    {
      services.AddMvc ();
    }
 
    // Cette méthode est appelée par le moteur d'exécution. Utilisez cette méthode pour
    // configure le pipeline de requête HTTP.
    public void Configure (application IApplicationBuilder,
                          IHostingEnvironment env)
    {
      if (env.IsDevelopment ())
      {
        app.UseDeveloperExceptionPage ();
      }
      autre
      {
        app.UseExceptionHandler ("/ Home / Error");
      }

      app.UseOoui ();
      Xamarin.Forms.Forms.Init ();

      app.UseStaticFiles ();

      app.UseMvc (routes =>
      {
        routes.MapRoute (
          nom: "default",
          template: "{controller = Accueil} / {action = Index} / {id?}"
        )
      });
    }
  }
} 

Ensuite, nous devons ajouter du code dans HomeController.cs – le contrôleur par défaut qui, par convention, sert à la vue Index.cshtml . Au lieu de retourner une vue régulière, nous laisserons Ooui s'injecter, comme ceci:

 en utilisant Ooui.AspNetCore;
en utilisant Xamarin.Forms;
en utilisant XamarinFormsEverywhere;
 
namespace XamarinFormsEveryWhere.Web.Controllers
{
  HomeController de la classe publique: Controller
  {
    public IActionResult Index ()
    {
      var page = new XamarinFormsEverywherePage ();
      var element = page.GetOouiElement ();
      return new ElementResult (element, "Bonjour, à partir de XAML!");
    }

    // ...
  }
} 

L'idée est simple: nous allons prendre une instance nommée d'une page XAML dans Xamarin.Forms, et laisser Ooui la rendre sur un canevas web. Voici le code XAML par défaut dans notre page (le code derrière est vide):

Vous vous sentez chanceux? Exécutez votre application et l'interface utilisateur XAML s'affichera sur le Web. C'est un exemple trop simpliste, mais une promesse géante en avant. Ooui a des moteurs de rendu web pour la plupart des éléments XAML génériques et vous pouvez apporter la plupart des conforts auxquels vous êtes habitué – comme la liaison de données, les mises en page et les convertisseurs.

Attention, vous n'avez pas besoin d'utiliser ASP.NET Core pour le retirer – Ooui a un petit serveur web intégré pour servir du contenu aux navigateurs Web. Et vous pouvez construire l'arbre visuel dans un code XAML ou C # derrière:

 using System;
utiliser Ooui;

Programme de classe
{
  static void Main (chaîne [] arguments)
  {
    var button = new Button ("Bonjour tout le monde");

    // Interface utilisateur rendue disponible à l'adresse http: // localhost: 8080 / helloworld
    UI.Publish ("/ helloworld", bouton);
  }
} 

Thinking Ahead

Bien qu'il soit tôt, vous devriez voir clairement la promesse de ramener XAML sur le Web d'une manière native. Il s'avère, il ya quelques développements en cours pour avoir Xamarin.Forms supportent le Web comme une plate-forme – c'est une bonne nouvelle pour les développeurs qui veulent partager du code entre différentes plates-formes.

Je peux avoir CSS? de grandes nouvelles est récemment style XAML avec CSS étant pris en charge dans Xamarin.Forms maintenant. Pour le contexte, les applications Xamarin.Forms ont toujours été stylées avec les styles et ressources XAML. C'est un mécanisme très puissant avec des outils riches construits autour de lui.

Alors pourquoi CSS? La réalité est que beaucoup de développeurs Xamarin viennent d'un arrière-plan ASP.NET. Et tous ceux qui ont fait du développement web connaissent sûrement des CSS. Tout est question de réutilisation des compétences grâce à un shim – complètement facultatif pour les développeurs XAML à utiliser. En fait, l'analyseur CSS pour Xamarin.Forms (tiré récemment dans la branche Master ) fournit un mappage entre les styles CSS et XAML déjà utilisés. XAML Styling continuera à être plus puissant – vous ne pouvez pas encore tout styliser avec CSS. CSS, d'un autre côté, a l'avantage d'offrir un meilleur effet de "retombée" sur l'interface utilisateur avec des classes définies et une meilleure lisibilité. Et à l'exception d'un symbole caret pour identifier le Xamarin.Forms ContentPage pour le style, il est valide CSS – réutilisable partout ailleurs.

Et au moment où nous obtenons CSS, les développeurs réclameront un meilleur CSS – oui, Less and Sass sont pris en charge avec des avantages de pré-traitement et de productivité. Pendant que l'outillage rattrape, vous pouvez utiliser un pipeline Node.JS / Gulp pour traiter votre Sass / Less en CSS que Xamarin.Forms peut avoir du sens.

Tandis que la communauté de développeurs peut être divisée sur XAMML de Xamarin.Forms en prenant en charge le style CSS, il y a clairement un gagnant ici – la réutilisabilité du code. En particulier, si vous utilisez Ooui pour emmener votre XAML sur le web, à quel point serait-il cool de partager du CSS entre le mobile et le web? Il suffit d'écrire vos styles CSS dans un fichier séparé, de le référencer depuis Xamarin.Forms XAML et de le partager avec votre projet web. Ce petit morceau d'interface utilisateur qui semble presque identique entre le web et le mobile, peut maintenant partager le même style. C'est une excellente nouvelle pour de nombreuses applications B2B ou secteur d'activité qui souhaitent avoir la même apparence et la même image sur toutes les plates-formes.

WebAssembly

Vous avez peut-être déjà entendu parler de WebAssembly définition de niveau de l'arbre de syntaxe abstraite (AST) représenté dans un format binaire. Pensez-y comme un langage d'assemblage que la plupart des navigateurs Web peuvent comprendre et exécuter. Cela a d'énormes répercussions sur l'ensemble de la plate-forme Web – il serait possible de compiler du code écrit dans de nombreuses langues modernes en petits paquets binaires que les navigateurs Web exécutent nativement. Faites des recherches sur WebAssembly et vous vous rendrez vite compte que la promesse est cool.

Aussi, vous avez peut-être déjà entendu ou entendra beaucoup plus sur Blazor – un nouveau framework web expérimental d'interface utilisateur du Équipe ASP.NET, basée sur C # / Razor / HTML qui s'exécute dans le navigateur via WebAssembly. La promesse est de permettre aux développeurs d'écrire des applications Web SPA modernes qui exécutent .NET côté client dans les navigateurs Web en utilisant des standards web ouverts. Comparé à d'autres frameworks web, .NET peut offrir une stabilité, un support linguistique facile et des outils de développement de premier ordre. Allez-y et jouez avec Blazor – en utilisant .NET pour écrire une interface Web native composable est assez hallucinant.

Maintenant, .NET fonctionnant nativement dans le navigateur Web est rendu possible avec WebAssembly – sans avoir besoin de Plugins ou de Transpilation. Et comment les assemblys .NET sont-ils compilés dans WebAssembly? C'est grâce à le soutien de Mono pour WebAssembly – travaux en cours qui tient énormément de promesses. Et devinez quoi .NET runtime propulse les applications mobiles Xamarin – Mono c'est. Vous mettez 2 et 2 ensemble – et l'avenir de XAML sur le web semble très prometteur. Gardez à l'esprit, Blazor n'est même pas un produit engagé à ce stade et n'est certainement pas la façon d'apporter des applications Xamarin sur le web. Cependant, le support de Mono pour WebAssembly doit être une très bonne nouvelle pour les développeurs de Xamarin – il y a des opportunités intéressantes avec Ooui et peut-être plusieurs façons de ramener l'interface XAML sur le web. Nous pouvons tout deviner pour l'instant, mais l'avenir semble plutôt excitant.

PS: En tant que développement très récent, Ooui fonctionne déjà complètement côté client sans avoir besoin d'un serveur – WebAssembly pur à travers Ooui .Wasm .

Telerik UI

Donc, si vous avez joué avec Ooui et essayé nos rendus Xamarin.Forms pour le web, vous pourriez être curieux – est-ce que je peux supporter une interface plus compliquée? Nous réalisons une suite complète de contrôles d'interface utilisateur performants pour toutes les applications Xamarin – c'est l'interface utilisateur Telerik pour Xamarin . Les contrôles de Telerik Xamarin pourraient-ils commencer à fonctionner pour le Web?

Eh bien, attendez encore une fois tiger. Tout d'abord, il est peu probable que vous fassiez des applications web complètes avec Xamarin.Forms – vous seriez mieux servis avec ASP.NET et JavaScript. Et comme vous le savez, nous offrons beaucoup d'interface utilisateur Web – Interface utilisateur Telerik pour ASP.NET Ajax Interface utilisateur Telerik pour ASP.NET MVC et Interface utilisateur Telerik pour ASP.NET Core . Alors vous avez tout le bien de l'UI Kendo pour les applications Web modernes – avec le support de jQuery, Angular, React et Vue.

Si, cependant, cela ne vous dérange pas de vivre sur le bord saignant et de jouer avec bits non pris en charge, certains de l'interface utilisateur Telerik pour les contrôles Xamarin s'allument sur le web – diffusés via le pipeline Ooui. Maintenant, clairement, nous n'avons pas de moteur de rendu pour le web, mais quelques contrôles de base fonctionnent – voici un avant-goût.

Dans le fichier HomeController.cs sur notre projet web, permutons la page XAML pour essayer les choses:

 public IActionResult Index ()
{
  var page = nouveau TelerikUI ();
  var element = page.GetOouiElement ();
  return new ElementResult (element, "Bonjour, à partir de XAML!");
} 

Maintenant, de retour dans notre projet partagé Xamarin.Forms (.NET Standard ou PCL), nous pourrions avoir une simple page XAML avec du balisage – pas différent de tout ce que nous aurions pour les applications mobiles:

  
    
      
      
        
                             
             1 [19659081] 2 
             3 
          
        
      
    
  
 

Allons-y – oui, vous voyez maintenant l'interface utilisateur de Telerik propulsée par XAML sur le navigateur Web. Mise en garde complète – ceci est complètement expérimental et nos équipes d'ingénierie ne seront probablement pas satisfaites. Mais bon – c'est amusant de bricoler, non?

Avez-vous remarqué que le bouton que nous avons rendu possède un gestionnaire d'événement Click ? Oui, cela peut normalement se retrouver dans notre code XAML derrière le fichier – Ooui raccorde automatiquement les gestionnaires d'événements à partir du code une fois que les requêtes des utilisateurs reviennent sur le serveur. Voici une petite fenêtre d'alerte – oui, c'est une alerte web native via le rendu Ooui:

 void Handle_Clicked (expéditeur d'objet, EventArgs e)
{
  DisplayAlert ("Alerte", "Vous avez été alerté", "OK");
} 

Partager Toutes les choses

Voici les développeurs – c'est notre époque où les logiciels façonnent notre avenir. Le futur peut être complexe avec une variété de plates-formes d'applications, mais excitant avec des possibilités de partage de code pour les développeurs. Avec Ooui, vous disposez désormais d'un véritable moyen d'intégrer les technologies d'applications natives Xamarin.Forms au Web. Et vous pouvez apporter la qualité CSS à Xamarin.Forms. La meilleure chose à faire pour les développeurs dans ce paysage de plates-formes en constante évolution peut être de prêter attention à la façon dont les applications sont architecturées – prendre des dispositions pour le partage de votre code. Logique métier abstraite dans les bibliothèques de classes réutilisables. Partager le style sur les plates-formes d'applications Réutilise tout et prends tes places de code – bravo à ça.