Si vous suivez mon compte twitter @fnicollet, vous avez pu voir que ces dernières semaines, je travaillais sur une application Windows 8 perso. L’application est à présent terminée, prête à être mise sur le Windows 8 Store. Comme il y a encore peu de développeurs qui créent des applications Windows 8, je vais faire un point sur le développement de mon application, les bonnes et les mauvaises surprises.

Windows 8 ne sortira que fin Octobre 2012, vous avez donc le temps de vous y frotter ;).

Si vous l’avez raté, vous pouvez lire mon article résumé sur le développement d’applications « HTML5 » pour Windows 8:

Introduction au développement HTML / JavaScript / CSS pour Windows 8

Clouder! pour SoundCloud

L’application se nomme donc « Clouder! » (merci @iammichiel pour la suggestion) et permet de parcourir les milliers de sons du site soundcloud.com.

Pour présenter l’application, j’ai fait un screencast, plus sympa que des screenshots. Désolé pour le bruit de fond, c’est celui de mon ventilateur qui n’apprécie pas vraiment les VM.

Quelques screenshots quand même:

Pourquoi SoundCloud? Car j’y passe pas mal de temps et qu’ils disposent d’une bonne API, bien documentée permettant de jouer / rechercher les morceaux :

http://developers.soundcloud.com/docs/api/reference

Voici en vrac les fonctionnalités de l’application:

• écran d’accueil
• Derniers morceaux joués par l’application (6 max)
• « Hottest tracks », les tracks les plus populaires de SoundCloud des 3 derniers jours
• La sélection du développeur :)
• écran d’une track / playlist
• Jaquette et information sur le morceau
• Lecture automatique du titre
• Accès au profil de l’artiste
• Possibilité de partager / télécharger le morceau
• Affichage des commentaires liés au morceaux (clic sur un commentaire = accès à la page de l’utilisateur qui a commenté)
• écran d’un utilisateur
• Affichage avatar + location
• Affichage de ses morceaux partagés sur SoundCloud
• Affichage de ses morceaux marqués comme « favoris » sur SC
• Affichage de ses playlists
• Affichage de ses followings / followers
• écran des résultats de recherche
• Affichage des suggestions intégré au système Windows 8
• Affichage des résulats avec accès à chaque titre
• bonus
• Le lecteur audio est présent en permanence dans l’application, il se trouve dans l’AppBar qui peut être affichée / masquée par un click droit (souris) ou par un swipe vers le haut (tablette). Le son n’est pas coupé lors des changements de page dans l’application
• « Tuile » de l’écran de démarrage Windows Metro dynamique, avec affichage des derniers titres et de leur jaquette
• Fonctionnalité de partage complètement intégrée à Windows 8

Durant le développement de cette application, il y a eu du bon et du moins bon. Mon point de vue est celui d’un débutant dans le dév d’application Windows 8 Metro mais ce sera le cas de beaucoup de monde ;).

Pour le développement de Clouder!, j’ai utilisé la stack « HTML5 » proposée par Microsoft. A noter qu’il est aussi possible de le faire avec les autres langages de la plateforme MS (C# & co).

La documentation et les samples Microsoft

Sûrement ce qui est le plus important quand on développe sa première application. La documentation fournie par Microsoft (en ligne) est excellente. Les exemples sont concrets, avec du code dans les différents langages (C#, JS, …), des « QuickStart » bien pratiques et complets. J’ai beaucoup copié de code venant directement de la documentation et cela a souvent fonctionné du premier coup. Les exemples sont nombreux et très fournis  avec beaucoup de scénarios expliqués et implémentés. Et pour ceux qui ne veulent vraiment pas se mettre à l’anglais, une grosse partie de la documentation est même disponible en Français. Les traductions sont un peu douteuses mais elles sont là.

Bon exemple: ajouter une liste (QuickStart détaillé):

http://msdn.microsoft.com/en-us/library/windows/apps/hh465496.aspx

Il est parfois un peu difficile de trouver de l’information car on va tomber sur des sites / blogs qui donnent des exemples en C# alors que l’on développe sur la stack HTML5. Mais les APIs étant sensiblement les mêmes, cela reste une bonne aide. A noter aussi ce ebook gratuit (en cours d’écriture) de très bonne qualité:

Free ebook: Programming Windows 8 Apps with HTML, CSS, and JavaScript (First Preview)

Sur ce point, bravo Microsoft.

Installation de l’environnement de développement

J’avais fait un billet sur l’installation de la Consumer Preview (qui est maintenant une Release Preview) et son installation dans VMWare:

Installation de Windows 8 Consumer Preview sur VMware Workstation 8

Ce n’est pas évident la première fois mais au final pas très laborieux. Le SDK Windows 8 permet d’installer MS Visual Studio Express 2012 RC pour Windows 8 ainsi que Microsoft Blend et les kits de certifications. Pas vraiment de reproches à faire sur ce point, c’est très guidé et cela fonctionne plutôt bien.

Il est quand même préférable de faire une installation en anglais, les traductions en Français de Visual Studio sont très hasardeuses.

L’exécution dans une VM de Windows 8 a rendu l’expérience de développement assez laborieuse à cause du lag. Si vous pouvez vous payer le luxe d’avoir une machine avec W8 hors VM pour développer, vous ne le regretterez pas.

Le framework WinJS

Vous l’avez lu dans l’article d’introduction, MS propose un framework WinJS pour concevoir des applications. Celui-ci est à la fois « bas-niveau » et « haut-niveau ». Ainsi, il se rapproche de jQuery en vous permettant de faire des appels XHR ou des animations mais bien sûr sans la partie « compatibilité avec IE6 » puisque dans notre cas, on sait que l’on tourne sous IE10 (plus ou moins). Pour les sélecteurs, on peut donc utiliser directement document.querySelector et compagnie.

WinJS propose aussi des APIs plus haut-niveau de communication directe avec le système, comme par exemple pour la gestion de la recherche ou du partage Windows 8. Dans l’ensemble, assez agréable à utiliser, surtout grâce aux exemples bien fournis de Microsoft. Les APIs se prennent en main assez rapidement. Si vous ne pensez que par jQuery, vous pouvez bien sûr utiliser jQuery dans votre application Windows 8 Metro mais cela va être un peu redondant.

Certaines fonctionnalités sont vraiment très simples à mettre en place grâce à ces API, comme par exemple la mise à jour dynamique des tuiles de l’écran de démarrage. MS propose pas moins de 45 templates différents pour que votre application rentre dans le moule:

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notifications.tiletemplatetype.aspx

On suit le QuickStart, on copie les quelques lignes de code qui vont bien et c’est parti.

Après, je ne suis pas très fan de la syntaxe des exemples qui incitent un peu à faire du code à la n’importe quoi. On retrouve souvent des exemples avec des objets « enfermés dans leur scope » auquels on peut exposer une API publique au moyen de WinJS.define. Je sais que c’est pour ne pas avoir de collision et compagnie mais j’aurais préféré un code un peu plus à l’ancienne directement sur le prototype. Bref, ça va plaire à certains, pas à d’autres.

Microsoft Visual Studio Express 2012 RC

Là, on commence avec le moins bon. Je n’avais jamais développé en environnement MS auparavant, donc jamais manipulé Visual Studio. Je suis habitué à Flash Builer pour faire du Flex (basé sur Eclipse) et plus récemment sur IntelliJ pour du développement avec Play! Framework et du JavaScript.

IntelliJ a mis la barre assez haut au niveau du développement en JavaScript, avec notamment une auto-complétion qui fonctionne bien (bien vu l’aspect dynamique du langage JS) et une reconnaissance des erreurs très rapide à la frappe. Notamment les « this » oubliés qui font perdre pas mal de temps.

VS n’est pas à la hauteur sur le développement JS et propose peu (parfois aucune) aide. L’auto-complétion fonctionne bien sur les objets du framework WinJS mais n’arrive pas à « deviner » ce qu’il faut proposer pour son propre code. La gestion des erreurs est plutôt simple, il va vous informer quand vous avez laissé une virgule dans un bloc JSON ou quand vous avez oublié un « ; » en fin de fonction. Il ne vous préviendra pas sur les problèmes de scope par exemple. Pas non plus de « Quick Assist » (assignation d’une variable, extraction d’une méthode, etc.  hors-menu).

Le débugger est « pas mal » dans le sens où il fonctionne, points d’arrêt, un « watch » au rollover assez agréable, navigation dans le code, etc. Par contre, pour certaines erreurs, il ne vous indiquera pas la cause de l’exception, il va juste s’arrêter sur une instruction « debugger » tout au fond du code de WinJS et vous ne pourrez pas remonter jusqu’au code problématique. Cela se produit dans certains cas qui deviennent du coup très laborieux à décoder (vous ne savez pas d’où vient le problème).

J’ai essayé d’installer une extension à VS pour faire du contrôle de version avec SVN (oui, je sais SVN blablabla) mais cela n’a pas fonctionné pour une raison inconnue. VS est très axé versionning Microsoft, c’est assez dommage de ne pas avoir de connecteurs SVN et compagnie directement installables. Une bonne habitude prise par les autres IDEs.

Visual Studio m’a fait perdre pas mal de temps, il pourrait être bien amélioré pour éviter au développeur de perdre du temps.

Microsoft Blend for Visual Studio

Comme pour Visual Studio, je ne connaissais pas Blend (à part sur les vieilles vidéos de dev Silverlight quand c’était le clash SL / Flex). Blend s’occupe donc de la partie graphique de l’application, une sorte de vue « Design ». Le logiciel est assez puissant mais consomme beaucoup de ressources (sur une VM, cela se voit vite).

Le plus apprécié est le mode « interactif » permettant de se servir de son application puis de repasser en mode inspection de composant avec mise à jour des styles en temps réel. Pour un développeur d’application, cela semble être pratique, mais pour un développeur web, c’est ce que vous faites tout le temps quand vous utilisez Firebug ou l’inspecteur Chrome. Dans le contexte des applications Windows 8, vous ne pouvez pas utilisez Chrome pour inspecter l’application, vous devez donc faire avec les moyens du bord fournis par Microsoft.

MS Blend fait donc le métier en vous permettant de faire une inspection des propriétés CSS de chaque élément et de les modifier:

VS et Blend vérifient si l’autre ne modifie pas les fichiers pendant que l’on travaille dessus pour les garder toujours en synchonisation. Il n’y a pas de « merge », donc vous devrez travailler soit sur l’un, soit sur l’autre.

Ajout sur le Microsoft 8 Store

Windows 8 n’est pas encore sorti en version finale, il est en ce moment en Release Preview et l’ajout au Windows 8 Store n’est pas possible avant la sortie officielle. Pour pouvoir publier son application token, il faut un « Developper Token » que seuls les « Microsoft Champions » peuvent délivrer. Pour cela, il faut s’inscrire au programme « Accélérateur Windows 8 », décrire son application pour ensuite se voir attribuer un « tuteur » MS Champion qui va vérifier que votre application est bien en conformité avec les Guidelines MS et vous guider un peu si vous avez des questions:

http://msdn.microsoft.com/fr-fr/windows/accelerateur-windows-8.aspx

L’autre solution est de participer à un des Windows Dev Camps:

http://www.devcamps.ms/windows

Bon le dernier en France, c’était le 1er Juin et aucun n’est prévu avant la sortie de W8 donc pour les français, c’est pas la joie. Le plus proche se situant soit en Belgique soit à Zurich.

Perso, j’ai fait la demande depuis l’Accélérateur, en espérant avoir un tuteur MS prochainement mais en attendant, mon application reste dans mon Visual Studio. Si tu es MS Champion est que tu lis cet article, je compte sur toi pour me contacter :) (fnicollet@gmail.com)

Pour information, l’inscription en tant que développeur chez MS coûte 37€. Un peu plus cher qu’Android mais moins cher qu’Apple.

Conlusion

Voilà donc le résultat d’une application développée en plusieurs semaines (soirées), ce qui est plutôt court vu qu’il fallait déjà que j’apprenne à manipuler les APIs de WinJS puis à les mettre en pratique.

Je n’ai pas vraiment été bloqué par les APIs JavaScript, le plus laborieux étant la création des styles CSS mais c’est aussi le cas pour moi en web. Trop habitué au placement « logique » de Flex, je galère à comprendre les position:absolute, float, clear, vertical-align et autres joyeusetés qui ne fonctionnent jamais comme je le veux. A noter que Microsoft introduit avec IE10 le placement en grid (en grid, pas en table), qui est déjà plus flexible et fonctionne plus ou moins comme on l’espère.

Pour la suite, je compte faire un tutorial « fil rouge » sur la création de l’application Clouder! de A à Z. Vu l’application, cela devrait bien tenir en 20-30 tutoriaux :).

Bientôt sur html5-tutorial.fr !