Windows 8 commence à pointer le bout de son nez avec une Developer Preview et une version Consumer Preview avant la version finale prévue pour la fin d’année. Avec W8 arrive une nouvelle opportunité pour nous les développeurs qui est le Windows Store, une sorte d’App Store pour applications Windows. A l’intérieur de ce futur store, des applications et des jeux qu’il va falloir développer sur de nouvelles APIs Windows.

Windows 8 et Metro

Bien sûr, Windows 8 contient toujours une interface « à l’ancienne » similaire à Windows 7 qui pourra faire tourner les applications existantes. Pour le Windows Store, on parle des applications qui vont utiliser la nouvelle interface nommée « Metro ». Metro est une interface prévue pour être utilisée sur du matériel tactile (tablette & co).

Chaque « tuile » représente une application, un peu comme la home de votre iPhone et ses icônes. Cette interface à base de Tile est cohérente avec le reste des produits Microsoft (Windows Phone 7 et Xbox 360 par exemple). Cette interface est en fait le nouveau menu Démarrer de Windows 8, ce qui est un peu surprenant au départ mais on s’y habitue vite.

Installer Windows 8 sur une machine virtuelle

Microsoft fournit un ISO de sa Consumer Preview que vous pouvez installer sur votre machine. J’ai fait un petit article sur les erreurs à éviter lors de l’installation:

Installation de Windows 8 Consumer Preview sur VMware Workstation 8

Développer pour Windows 8 Metro

Si vous développez des applications Desktop (ex natif ou Adobe AIR) ou des web app (dans le navigateur), cela fonctionnera comme avant, mais seulement dans l’ancienne interface. Pour pouvoir réaliser une application Windows Metro, vous allez devoir utiliser les nouvelles APIs Microsoft à votre disposition.

Pour cela, vous avez 3 options selon vos compétences:

• Si vous êtes développeur « web », vous allez utiliser HTML / JavaScript / CSS (alias HTML5) pour développer votre application Windows Metro
• Si vous connaissez Windows Presentation Foundation ou Silverlight, vous pouvez utiliser XAML (langage déclaratif d’interface) et C++ / C# /  Visual Basic pour le code
• Si vous connaissez DirectX, vous pouvez utiliser du C++ natif / HLSL

Vous pouvez aussi faire des mix entre des composants C++ appelés par du JavaScript mais là, ça devient assez avancé

Les APIs disponibles

Au délà des langages, Windows 8 propose surtout plusieurs ensembles d’API:

• Windows Runtime : API Native du système d’exploitation. Essentielle pour les applications de style Metro. Implémentée en C++ et prise en charge en JavaScript, C#, Visual Basic et C++ d’une façon qui semble naturelle pour chaque langage.
• HTML/CSS pour les applications de style Metro: Sous-ensemble de code HTML et CSS que vous pouvez utiliser dans une application de style Metro.
• Bibliothèque Windows pour JavaScript (alias WinJS) : Contrôles, objets et styles que vous pouvez utiliser lors de la création d’une application de style Metro en JavaScript.
• .NET pour les applications de style Metro : Sous-ensemble de l’API .NET que vous pouvez utiliser dans une application de style Metro en C++, C# ou Visual Basic.
• Win32 et COM pour les applications de style Metro : Sous-ensemble des API Win32 et COM que vous pouvez utiliser dans une application de style Metro.

Les outils des développement

Pour l’instant, le seul outil pouvant créer des applications Windows 8 de style Metro est MS Visual Studio 11 Express. Cette version 11 est encore en beta mais vous pouvez déjà l’installer sur votre Consumer Preview. Cette version Express est gratuite.

Pour l’avoir essayé, Visual Studio 11 n’est pas génial pour le développement HTML / JS mais contient certains éléments essentiels pour le développement Metro (Réserver un nom d’application, lancement en mode Metro, debug / breakpoints,…) .

J’espère vraiment que les autres IDE (ex. IntelliJ) permettront dans le futur de développer directement des applications Metro. Pour l’instant, Visual Studio fera l’affaire :).

Critères de certification pour les applications Windows

Comme tous les « stores », le Windows Store a aussi ses règles qu’il faudra respecter pour pouvoir être accepté. Je vous invite à les lire:

Critères de certification pour les applications Windows

Un peu comme chez Apple, les applications de mauvaise qualité, incomplètes (type Hello World)  ou pas assez performantes, elles ne seront pas acceptées.

Plusieurs points importants à bien garder en tête (selon moi):

Votre application doit entièrement prendre en charge les interactions tactiles, tel qu’il est décrit dans la terminologie des opérations tactiles de Windows 8.

Votre application doit fournir un retour visuel quand les utilisateurs appuient sur des éléments interactifs.

Elle doit entièrement prendre en charge les manipulations tactiles, ainsi que les entrées via la souris et le clavier. Vos clients doivent également être en mesure d’accéder à toutes les fonctionnalités de votre application uniquement à l’aide d’interactions tactiles. La terminologie des opérations tactiles de Windows 8 est décrite dans la Conception des interactions tactiles.

Votre application doit exploiter les mécanismes fournis par le système pour les fonctionnalités déjà prévues par ce dernier.

Votre application doit prendre en charge une disposition ancrée. En orientation Paysage, ses fonctions doivent être entièrement accessibles lorsque ses dimensions d’affichage sont de 1024 x 768. Votre application doit demeurer fonctionnelle lorsque le client l’ancre et la libère.

Votre application doit satisfaire aux critères de performances de base sur un ordinateur à puissance limitée.

• Elle doit se lancer en 5 secondes ou moins.
• Elle doit pouvoir se suspendre en 2 secondes ou moins.

Voilà, vous êtes prévenus :).

« HTML et JavaScript? Sweet, je vais pouvoir réutiliser ce que j’ai déjà codé! »

Ça, c’est que je me suis dit au départ. Microsoft avait bien dit que l’on allait pouvoir coder des applications Metro HTML5 parce que le « HTML5 », c’est trop hype, blablabla.

Dans le discours, ils n’ont pas tort, vous allez bien pouvoir réutiliser vos compétences en HTML / JavaScript /CSS pour créer des applications. Ce que Microsoft a « oublié » de vous dire au passage, c’est que ce n’est pas vraiment ce que vous avez l’habitude de coder…

Not your dad’s HTML5

Comme je l’ai dit plus haut, MS a prévu des APIs supplémentaires et une librairie JavaScript nommée « WinJS » pour pouvoir créer des applications Metro. Celle-ci contient notamment plusieurs composants qui sont les composants « natifs » du système. Ceux-ci réagissent à la souris et au touch comme on s’y attendrait sur Windows 8.

Sauf que vous aurez du mal à recréer les mêmes effets et les mêmes interactions avec vos « ul/li ». Alors pour réutiliser les développements existants de votre web app, vous allez avoir du mal. Tout au moins pour la partie View / HTML en tant que telle. Pour votre logique « Controller » (échanges avec le serveur, parse, etc.), vous pourrez toujours réutiliser votre code JavaScript existant.

Certains concepts sont encore là, notamment celui de la création de template (template = modèle HTML que l’on va venir mélanger avec de la donnée pour obtenir un DOM). Si vous avez une liste avec des éléments qui se répètent donc, vous allez créer un template pour une ligne puis  vous allez boucler sur la donnée pour créer les autres lignes à partir du modèle.

Il y a des dizaines des librairies différentes en JS pour faire du templating, avec plusieurs formalismes qui ont émergé, notamment {{Mustache}} et sa notation avec des « {} ».  Pas de chance, Windows 8 utilise aussi des templates pour le rendu des listes mais le formalisme n’a rien à voir. Un petit exemple:

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-info">
            <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            <h4 class="item-description" data-win-bind="textContent: description"></h4>
        </div>
    </div>
</div>

Au lieu des « {} », vous avez des annotations « propriétaires » (car elles commencent par data-win, aucun attribut n’est vraiment propriétaire).

J’ai pris le templating en exemple mais il y en a d’autres. Pour faire une liste par exemple, vous allez faire un div avec un attribut « data-win-control » au lieu de votre ul/li que vous aimez tant :).

« Je vais juste attendre que PhoneGap soit compatible »

En ce moment, la « silver bullet » du développement natif iOS / Android, c’est PhoneGap:

http://phonegap.com/

Si vous ne connaissez pas PhoneGap, c’est un outil qui vous permet de packager une application « HTML5 » dans une application native iOS (IPA) ou Android (APK). Pour cela, l’application intègre un navigateur web en full screen et fait le rendu des pages web classiques. PhoneGap permet en plus de pouvoir communiquer avec la plateforme d’accueil à travers des APIs JavaScript. Cela vous permet donc de réutiliser son code pour les 2 plateformes les plus importantes du marché.

Normalement, Apple n’autorise pas ce genre d’application (site web packagé dans une app) mais grâce à des outils comme jQuery Mobile, vous pouvez arriver à avoir une interface qui ressemble de loin à celle d’iOS. Du coup, ça passe, surtout avec la popularité qu’a gagné PhoneGap ces derniers temps. Et pour Android? Et bien les utilisateurs Android se retrouvent avec une interface qui ressemble à iOS. C’est moche mais c’est un autre débat.

Personnellement, PhoneGap pour Windows 8 Metro, je n’y crois pas vraiment. Encore une fois, votre application ne va pas respecter les « UX Guidelines » de la plateforme, comme sur iOS et sur Android d’ailleurs. Mais le style Windows 8 est vraiment spécial, au point de vue des interactions utilisateur. Il y aura peut-être des initiatives comme le thème jQuery Mobile pour WP7 mais perso, je n’y crois pas.

Après, cela va aussi dépendre de la sévérité dont va faire preuve Microsoft pour l’entrée sur le Windows Store.

Et maintenant?

Et bien maintenant, si vous voulez développer pour Windows Metro, vous avez deux options:

• Attendre qu’une librairie magique transforme votre web app en application Windows Metro (peu probable selon moi)
• Commencer à apprendre les API WinJS à votre disposition et commencer à coder

Mais il n’y a pas que du négatif dans cette histoire. Pour l’avoir testé, l’API WinJS est plutôt agréable à manipuler avec certains petits trucs qui me rappellent Flex (Binding, Templates = Custom ItemRenderer, WinJS.Binding.List = ArrayCollection) et des composants déjà axés MVC (une mise à jour du WinJS.Binding.List met à jour automatiquement le composant graphique qui lui est lié). Alors bien sûr, le formalisme est très « propriétaire », avec des attributs « data-win » à utiliser obligatoirement. Cela rend l’API assez dure à ingérer, avec pas mal de copier-coller quand on débute.

La bonne nouvelle, c’est que ce billet est le premier d’une série sur le développement Windows 8 Metro en HTML5 sur html5-tutorial.fr :)

Un peu de lecture

Quelques articles qui peuvent vous intéresser

• Principes de conception d’applications de style Metro
• Recommandations en matière d’expérience utilisateur pour les applications de style Metro
• Création d’applications de style Metro réussies
• Planification d’applications de style Metro
• Créer votre première application de style Metro utilisant JavaScript
• Building Metro style apps with HTML5/JavaScript Forum