Créer des applications mobiles cross-platform avec C#/XAML for 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#
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.
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.
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
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
Vous 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.
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
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