Débutant

Créer des applications mobiles cross-platform avec C#/XAML for HTML5

C#-XAML-HTML5
Développer des applications mobiles multi-plateformes est, aujourd’hui, le rêve de tous les développeurs. Un rêve confronté à la multitude de solutions existantes sur le marché qui sont, pour la plupart, soit trop chères à acheter, soit trop lourdes à maîtriser et à maintenir.

Parmi toutes ces solutions, une commence à se démarquer au sein de la communauté des développeurs .NET. On parle bien sûr de C#/XAML for HTML5 !

Si, comme moi, vous avez passé beaucoup de temps à apprendre et monter en compétence en Silverlight, WPF ou Windows Phone et que n’étiez pas intéressés par l’apprentissage de l’Objective-C, du JavaScript ou autre, alors cet outil est fait pour vous.

Avec plus que 4000 beta-testeurs en quelques mois, cette extension séduit de plus en plus les développeurs qui s’intéressent aux technologies mobiles, grâce à de fortes promesses toujours tenues par Userware, la société éditrice.

Nous allons faire, dans cet article, une introduction rapide de l’outil ainsi que les différentes fonctionnalités supportées jusqu’à aujourd’hui, et celles qui vont arriver dans un futur très proche. Et comme toujours, il y aura des exemples d’utilisations, pour vous donner une idée globale de ce que vous pouvez en faire.

 

Introduction

 

CSHTML5 (C#/XAML pour HTML5) est une extension gratuite pour Visual Studio qui permet aux développeurs d’utiliser le langage C# avec du XAML pour produire des applications multi-plateformes en HTML5 et JavaScript.
Les applications générées peuvent s’exécuter sur un navigateur web sans avoir besoin d’un plugin. Elles peuvent également être packagées pour iOS, Android et Windows Phone.
Pour les curieux, cet outil utilise le compilateur open source JSIL pour transformer le code intermédiaire généré par les langages .NET en des applications cross-plateformes en Javascript et qui sont faciles à débugger et à maintenir.

 

Comparaison avec les autres outils

 

CSHTML5 est actuellement le seul outil qui permet aux développeurs d’écrire des applications véritablement multi-plateformes utilisant uniquement le langage standard C# et XAML avec Visual Studio.

Xamarin

  • Les applications ne peuvent pas s’exécuter sur des navigateurs web, et ne peuvent pas non plus fonctionner sur des OS tels que Linux, ChromeOS ou Tizen.
  • Le langage XAML utilisé dans Xamarin.Forms est très différent du XAML utilisé dans les applications Universal Apps, Silverlight, WPF, et Windows Phone. Les noms, les propriétés et les méthodes sont différentes.
  • Étendre les fonctionnalités intégrées nativement nécessite du développement spécifique pour chaque plate-forme. En revanche, CSHTML5 permet d’étendre les fonctionnalités de C#/XAML en écrivant du code personnalisé JS / HTML5 qui fonctionne sur toutes les plateformes.

 

ASP.NET

  • Les applications ne sont pas basées sur du XAML.
  • Le code C# s’exécute seulement sur le serveur, et non pas sur le client, il est donc pas possible d’écrire des applications en C# qui peuvent fonctionner en mode hors connexion sur les plateformes mobiles telles que iOS ou Android.

 

Typescript et autres

  • N’étant pas basées sur C#/XAML et le Framework .NET, elles ne vous permettent pas de réutiliser vos compétences, de partager du code existant, de partager le code entre le client et le serveur ou de migrer vos applications Silverlight, etc.

 

Pourquoi utiliser C# et XAML

 

Parce qu’avec C # et XAML vous pouvez :

  • Utilisez vos compétences de développement existantes
  • Porter vos applications Silverlight existantes vers le web
  • Partager le code C# entre le client et le serveur
  • Tirer parti de la puissance de .NET et XAML (UserControl, binding, templates, async/await, LINQ)
  • Partager du code avec d’autres types de projets (WPF, Windows Phone, Universal Apps)
  • Étendre la portée des applications universelles au-delà de l’écosystème Microsoft
  • Utiliser un langage C# standard au lieu d’apprendre une myriade de frameworks JavaScript.

 

Fonctionnalités supportées

 

Fonctionnalité Supportée Non supportée
Langage C#support 99% Classes, interfaces, enums, inheritance, generics, event handlers, try/catch, “ref”, “out” keywords, properties, accessors, modifiers, lambda expressions, anonymous methods, extension methods, virtual methods, “var”, “dynamic”, nullables, automatic properties, partial types, nested types, pragma directives, collection initializers, yield return, sealed, Async/await, Linq (Any, AsEnumerable, Cast, Contains, Count, ElementAt, ElementAtOrDefault, Empty, First, FirstOrDefault, OfType, OrderBy, OrderByDescending, Range, Select, SelectMany, Sum, ToArray, ToList, et Where), Class libraries, visual studio project references, namespaces, C# 6.0 “dynamic” sur VS 2015
Les types .NETsupport 40% Object, string, char, int, single, double, bool, DateTime, TimeSpan, List, Dictionary, Array, Size, Rect, Point, Exception, StringBuilder, Int64, CultureInfo, Encoding, StreamReader, TextReader, MemoryStream, BinaryWriter, BinaryReader, Buffer, System.Reflection, DispatcherTimer, Http calls (WCF, SOAP, REST, Add Service Reference, Web API support), WebClient, XmlSerializer, Guid, Dispatcher.BeginInvok, Regular Expressions, IsolatedStorage, FileInfo, ICommand Le référencement des dll externes ou les libraieis tierces (Telerik, Infragistics, ComponentOne, Syncfusion, etc.)
Concepts XAMLsupport 65% General XAML syntax, XAML layout, Dependency properties, User Controls, Code behind, Events registration (Click, PointerPressed, PointerReleased, PointerMoved, GotFocus, TextChanged, KeyDown…), XAML namespaces, Alignments et margins, TranslateTransform, RotateTransform, Binding, DataContext, DataTemplate, StaticResource, Styles, IsEnabled, IsHitTestVisible, TransformToVisual, Opacity, CapturePointer, Cursor, Pointer coordinates, Styles BasedOn, DropShadowEffect ControlTemplates, Storyboards et animations, VisualStateManager, Implicit styles, Pointer coordinates, MinWidth, MinHeight, Padding, Opacity, IsHitTestVisible, XAMLReader.Load
Les types XAMLsupport 70% Button, TextBox, TextBlock, Canvas, StackPanel, Border, Image, Grid, ScrollViewer, Rectangle, WrapPanel (horizontal), UserControl, Control, Window, Page, Panel, , SolidColorBrush, Named colors, HorizontalAlignment, VerticalAlignment, Orientation, Thickness, CornerRadius, , ItemsControl, ContentControl, PasswordBox, DataGrid, ComboBox, CheckBox, HyperlinkButton, ListBox, MediaElement, RadioButton ViewBox, Path, Ellipse, Line, TabControl, Popup, Thumb, ToggleButton, Frame, Slider, ToolTip, TreeView, DatePicker, GridSplitter, LinearGradientBrush

Vous pouvez consulter la liste complète des fonctionnalités supportées sur la page officielle du site.

 

Comment ça marche

 

Télécharger l’extension Visual Studio

L’extension est compatible seulement avec Visual Studio 2012 et 2013. Vous pouvez toutefois ajouter la compatibilité avec VS 2015 en modifiant le fichier vsix téléchargé.

 

Créer le projet C# XAML for HTML5

Une fois l’installation de l’extension est terminée, vous pouvez lancer Visual Studio et créer un projet C# XAML for HTML5 qui sera disponible sous le menu Templates -> Visual C#
create project

 

Coder en C# & XAML

Vous pouvez coder votre application comme vous avez l’habitude de le faire en Silverlight, WPF, Windows Phone ou Universal Apps.
code in c# and xaml
Si vous êtes en manque d’inspiration, vous pouvez regarder le code source de l’exemple de la calculatrice fourni par l’extension, ou sinon vous pouvez consulter le code source de mes exemples sur Github.

 

Compiler et exécuter

Une fois que votre code compile, vous pouvez le tester sur l’émulateur intégré ou sur le navigateur de votre choix.
execute on emulator and browser

Sachant que le résultat final de votre code sera disponible dans le dossier \bin\Debug\Output sous forme de JS avec un fichier index.html
fichiers

 

 

Exécuter du Javascript

Le débuggeur de CSHTML5 vous permet d’exécuter du code JavaScript sur une application déjà lancée. Pour ce faire, il faut cliquer sur le bouton Execute JS disponible dans l’onglet du simulateur ‘Intermediate version (much slower)’ et de taper le code JS à tester sur votre application.

 

Tester sur un téléphone

execute javascriptVous pouvez aussi débugger votre application en lançant le mode debug et en choisissant Test on Mobile device. Cette option lance un serveur IIS qui vous permettra d’obtenir un lien qui sera utilisé par votre téléphone pour tester l’application.
test on smartphone
Il vous suffit juste de taper l’url générée sur votre téléphone, et de mettre les points d’arrêt sur votre code C# pour débugger de manière normale.

 

Déployer l’application

Lorsque vous avez terminé le développement de votre application, vous pouvez soit télécharger les fichiers HTML5 et JavaScript générés sur un serveur de fichier pour qu’elle soit accessible en ligne, comme Azure ou sur votre propre site Web, ou de packager les fichiers générés dans une application hybride pour Android, iOS, WP, ChromeOS, et de la soumettre sur les stores tels que l’App Store d’Apple, Android Google Play ou le Windows Store.

 

Roadmap

 

CSHTML5 n’est pas en version finale, et il reste encore beaucoup de fonctionnalités à implémenter. Cependant, Userware a partagé la feuille de route suivante :

  • 1er semestre 2016: (Beta 7/8)
    Support de 90% de XAML: ControlTemplates, VisualStateManager, animations, storyboards, TabControl, Menu, Popup, Frame, ChildWindow, Line, Ellipse, Path, LinearGradientBrush, fichiers RESX. HttpWebRequest. Amélioration de WCF. Un premier support pour les composants tiers.
  • Milieu 2016
    L’approche de la sortie de v1.0. Dernières corrections des bugs, et en se basant sur les retours des utilisateurs et la maturité du logiciel, soit il y aura la livraison v1.0, soit une autre beta.
  • Fin 2016 (1.x)
    Le produit est maintenant très stable et peut être utilisé dans un environnement de production pour développer des applications multi-plateformes HTML5 robustes à grande échelle. Les fonctionnalités nécessaires au portage des applications Silverlight seront disponibles. D’autres nouvelles fonctionnalités seront développées en fonction des retours des utilisateurs.
  • 2017
    Prise en charge complète de toutes les classes et les méthodes du framework .NET de base (mscorlib), le support de la plupart des fonctionnalités de Silverlight 5, grande performance et optimisation de code, support des composants tiers et création d’une communauté pour des extensions gratuites.

 

Prix

 

FREE Edition Professional Edition
Prix Gratuit 99$ pendant la beta
Utilisation commerciale Oui Oui
WCF & HTTP x Oui
DataGrid x Oui
Support prioritaire x Oui
1 an de mise à jour x Oui
Composant tiers x Support partiel (JS)

 

Démo

 

Si vous désirez voir des scénarii plus avancés, vous pouvez consulter une page de démo sur le site officiel ou de télécharger les applications iOS et Android
html5
google playapp store

 

Pour plus de détails

 

  • La documentation à la norme MSDN est disponible
  • Vous pouvez voter pour vos fonctionnalités désirées sur le uservoice du site.
  • Des Forums de discussion vous permettent de remonter des bugs

Nombre de vue : 772

COMMENTAIRES 3 commentaires

  1. Johnny Behague dit :

    Bonjour,
    Qu’en est-il des performances? On en fait mention qu’en 2017, mais est-ce qu’à l’heure actuelle une application cross platform HTML5 n’est pas plus gourmande en ressources qu’une application WIndows Phone traditionnelle, déjà optimisée dans son environnement ? (c’est également le même scénario pour les autres environnements, iOS et Android). Après, je me doute qu’on a rien sans rien, mais c’est par curiosité 🙂

  2. AZIRAR Wassim dit :

    Salut Johnny,
    Pour le moment, les tests que j’ai réalisés sont assez satisfaisants et les temps de compilation et exécution sont vraiment très rapides. Le seul bémol actuel est que l’éditeur XAML plante parfois et je suis obligé de redémarrer VS pour l’avoir.

AJOUTER UN COMMENTAIRE