Ten Tips When Writing Hybrid Language Metro style Application / Lessons learned designing the Windows runtime

Message de Roch Baduel

Ten Tips When Writing Hybrid Language Metro style Application / Lessons learned designing the Windows runtime
Ce coup ci, surprise ! : deux sessions pour le prix d’une (la première n’était pas au programme. J )
Et le titre change encore avant le début de session : je pense que là on a le record du plus grand titre de session de la Build 😉

Agenda :

–          Quelles sont les points à prendre en compte quand on conçoit un runtime multi-langage ?
–          Quel est l’impact sur notre code ?

Il y a actuellement peut être 600 000 ou peut être 1000000 de fonctions dans les différentes API Microsoft. C’est difficile de les utiliser, il y avait plusieurs erreurs de conceptions. Les api WinRT sont des apis modernes organisées par namespace mais ce sont bien les APIs Windows version « moderne ».

–          Il y avait besoin d’avoir un système de type qui soit agnostique vis-à-vis du langage.
–          La casse dans les méthodes, propriétés, event : suivant les langages les conventions varient (PascalCase ou camelCase) et en javascript les conventions sont parfaitement établies. La décision qui a été prise est de se conformer aux règles des langages et donc de transcrire la casse à il n’est pas possible d’avoir deux méthodes qui se différentient uniquement par la casse !
–          WinRT utilise le PascalCase pour les types et les membres
–          WinRT fait un mapping pour javascript

Les types

–          Tous les indexes (tableau par exemple) ne sont pas signés
–          Les types numériques ne sont pas les même en .NET/C++ et Javascript :

  • par exemple js ne supporte pas les entiers sur 64 bits)
  • Et pourtant l’OS utilise des types 64bits dans plusieurs API
  • à si on dépasse les 53 bits en JS les nombres seront tronqués

–          Les strings : WinRT introduit un nouveau type de string (ça a pris presque 2 mois) HSTRING immutable.

  • Devaient elles être immutables ?
  • Elles sont immutables en JS et .NET mais pas en C++
  • La valeur Null : en C++ ça n’existe pas pour une string à en c++ null sera traduit par ‘’, ce qui peut poser problème en cas d’aller retour JS/C++ : nullà’’à’’

–          Les structures :

  • Quand une structure contient des objets doit on copier la référence en cas de copie de la structure ou faire une « deep copy » ?
  • La décision : les structures ne contiennent que des values types (NB : en WinRT les strings sont considérées comme des value types : c’est le cas en js mais pas en .NET)

–          Les références :

  • Le comportement lors d’appels de méthodes est différents suivants les langages (certains peuvent passer par valeur ou référence, d’autre uniquement par référence)
  • WinRT ne passe que par référence
  • à on peut avoir des paramètres in, out mais pas ref

–          Les tableaux : value type ou ref ?

  • En WinRT ce sont des value types
  • à en JS on peut appeler une méthode qui modifie un tableau (le tableau ne sera pas modifié)

–          Les Events

  • La syntaxe est # suivant les langages
  • En JS suivant la casse utilisée il ne se passera rien

–          Collections :

  • Les collections WinRT sont des simples Vector ou Map
  • à dans certains cas on peut avoir des problèmes de performances suivant la manière dont on les manipule

–          Les surcharges de méthodes

  • Javascript ne supporte pas la notion de type
  • En JS si on appelle une méthode avec plus de paramètres que nécessaire WinRT essaie de mapper sur la plus approchante

 

 

Optimize your website using asp.net and iis8

Message de Pierre Yves Hemery

Quand amazon est 100 ms plus lent, ils perdent presque 1M$ par jour !
Quand google est 50ms plus lent, ils perdent 20% de traffic !

On peut optimiser un site sur plusieurs couches, mais la session traitera que de couche asp.net/iis.
(premiere, la demo n’est pas sous w8 et VS11, mais du Vs210 et firefox…)

premier conseil = suivre les suggestions de page speed et yslow optimiser la taille du request tree (l’arborescence d’enchainement des requetes)

 # Bundle js and css
asp.net integre un mecanisme automatique pour combiner et minifier les css et js au runtime.
on le configure dans le global.asax et on garde dans la page un seul header css avec comme source « Style/css » (idem pour le javascript « Scripts/js »)

On peut aussi ajouter des regles pour gerer l’ordre, prendre des fichiers ailleurs que dans les repertoires par defaut…
Le systeme est extensible via une interface IBundleTransform ou par heritage d’un bundle existant.
(ex. on remplace un lien image dans la css par l’image encodee en base64 dans un tag url(data:image) ).

 # compression gzip
On configure la compression gzip dans le web.config <urlcompression />

 # browser caching
On configure les caches headers http dans le web.config <staticcontent><clientcache/>

 # coffee script (http://jashkenas.github.com/coffee-script/)
on peut aussi etendre le mecanisme de bundle a d’autres types de fichiers (ex avec les coffee scripts)

 # optimiser les images
le speaker a ecrit un addin VS pour ajouter un menu « optimize images » sur un dossier en utilisant smushit
http://visualstudiogallery.msdn.microsoft.com/a56eddd3-d79b-48ac-8c8f-2db06ade77c3

 # optimiser le html
on override la methode render() pour parser le html et supprimer les espaces avec des regex.
on peut aussi overrider le onload() pour ajouter la date d’expiration de la page pour qu’elle reste en cache.

Note : il y a un helper pour ajouter hashcode (base sur le contenu et pas une date) sur le lien du fichier de sortie du bundle pour etre sur que le fichier ne reste pas en cache si on fait des modifications

Le mecanisme est dispo dans un paquet nuget http://nuget.org/List/Packages/Microsoft.Web.Optimization

Windows Runtime internals : understanding « Hello World »

Message de Roch Baduel

Windows Runtime internals : understanding « Hello World »

J’arrive un peu plus d’un quart d’heure à l’avance, la salle est déjà presque pleine et ça continue à se remplir, tout le monde cherche une place …

C’est amusant, maintenant il y a un placeur …

Agenda : on va voir :

–          Le cyle de vie détaillé en pas à pas d’une application Hello World

–          Le détail du focntionnement du Windows Runtime

–          Au programme debugger, registry …

On ne va pas voir les apis mais l’infrastructure

Que se passe t’il quand on installe une application ?

L’installation commence par un package qui contient un manifest.

Le manifest contient :

–          La description de l’application, le point d’entrée les icones …

–          Les « capabilities »

–          Les contrats implémentés

–          Un identifiant pour l’application

L’enregistrement de l’application se fait dans la registry : dans HKEY_CURRENT_USER\Software\Classes

Il y a deux enregistrements : un pour la classe et d’autre pour les extensions (contrats) sous :

Extensions\ContractId

On trouve l’enregistrement de la classe dans Windows.Launch\PackageId

Les contrats sont associés à des extensions qui pointent elles vers une classe qui implement l’xetension.

W wahost.exe est le host pour l’execution des applications HTML

Le pipeline de déploiement consiste à prendre le manifeste et à créer les entrées dans la base de registre pour les contrats, extensions et classes.

 

Que se passe t’il quand on lance l’application ?

–          Démos avec procmon : il est possible de voir quelles clés de registre sont lues par explorer.exe

Le process d’activation :

–          Explorer crée un objet extension catalogue (winrt)

–          Il requete le catalogue

–          Une fois trouvé il crée un extension registration

–          Enfin il appel une méthode activate

–          La méthode activate fait appel à rpcss

–          Rpcss cherche dans le catalogue de classse

–          Ensuite il déclenche une activation DCOM qui créé le process et active l’application

–          L’application s’execute

C’est le process d’activation DCOM (presque)

On passe maintenant sur une démo débugage à l’application est en cours d’execution et on s’attache à wwahost.exe (cdb.exe)

On peut voir :

–          La ligne de commande qui précise le package qui permet de retrouver l’extension associée

–          Les « capabilities »

–          Un token pour le package

Lors de l’execution un thread  est crée : mainCRTStatup

–          Premier étape : dans combase le thread initialise WinRT : combase !RoInitialize

–          WinRT supporte deux mode d’appartements STA et MTA (la pluspard des applications tourne dans un STA)

–          Le thread utilise roGetActivationFactory pour instancié un objet Windows.ApplicationModel.Core.CoreApplication qui crée un  IActivationFactory

(les objets winrt sont manipulés au travers d’interface alors que en .NET/JS on les voit comme des objets)

NB : Les classes système WinRT sont enregistrées dans la registry

–          Les interfaces sont juste des pointeurs vers une VTable (table de pointeur de fonction). La premiere est QueryInterace. On retrouve les méthodes classiques AddRef, Release…

–          A partir de l’interface IActivationFactory, QueryInterface est appelée pour retrouver l’interface attendue.

–          L’interface contient une méthode RunWithBackgroundFactory

–          Le thread appel cette méthode en lui passant un viewProviderFactory (c’est une interface)

–          Elle contient une méthode CreateViewProvider

–          Une fois le viewProvider Créé il va y avoir création d’une instance de WebInstance (dans WWAHost) puis appel des méthodes load et run

 

En résumé : dans l’initialisation un core application est créé et la méthode Run est appellée.

Les vues qui sont créés (à priori des WebInstance) sont créées sur leur propre thread dans un STA.

Voilà c’était pas évident, j’espère avoir à peu près retranscrit correctement le fonctionnement mais comme ça allait super vite il y a certainement quelques coquilles…

 

Printing in metro apps

Message de Pierre-Yves Hemery (Le 16-09-2011)

2 solutions pour lancer une impression dans une app Metro : soit par le charm Device > Print, soit depuis un bouton de l’app.

L’app gere le contenu a imprimer, et laisse windows gerer l’impression.
On peut bien sur gerer une vue imprimable differente de l’ecran en cours.
Pour pouvoir imprimer, on doit ajouter la capabily print dans le manifest, et implementer le print contract.

HTML5
On formatte le contenu a imprimer en CSS, comme on le ferait dans une page web classique, et en utilisant les events onbefoprint/onafterprint.

XAML
Ici aussi, l’app se contente de produire le contenu dans un PrintDocument et le transmettre au PrintManager pour impression.
Contrairement au html, en xaml il faut aussi gerer le contenu de la preview.

Print experience
On a aussi la possibilite de customiser les options (copies, orientation, pagination…) : lesquelles afficher, leurs ordres d’affichage, valeurs par defaut….
On peut aussi ajouter des options avancees a la PrintTask pour eviter d’enchainer plusieurs boite de dialogue avant d’imprimer (ex. imprimer image+legend ou image seulement), chaque option a sa callback pour prendre en compte le choix sur le contenu a imprimer et mettre a jour la preview.

Direct2D / XPS
L’API contient aussi les methodes pour faire des impressions plus riches avec D2D ou directement en XPS.

Integrating with Windows device experience

Message de Roch Baduel (Le 16-09-2011)

Cette fois une session étrange : super rapide, demos à 300 à l’heure, à peine le code s’affiche que le présentateur passe au slide suivant et surprise il fait sa session en 1/2h ???!!

Mais bon voici quand même quelques notes qui furent difficiles à prendre vu la vitesse  …

L’accès aux devices sur Windows 8 se fait au travers du « Charm » device (menu contextuel – barre sur le coté).

On peut acceder aux imprimantes, echanger de l’information avec un autre device …

L’impression :

  • La détection des imprimantes sur le réseau est automatique et l’installation se fait aussi de manière automatique.
  • Le contenu a imprimer est formaté en HTML5/CSS ou en XAML
  • La responsabilité de l’imprimante est de produire le contenu et de s’enregistrer avec le PrintManager

« Playing to screens » : speakers and receivers.

Cette option permet de jouer de la musique, de la video sur un device externe. Ça marche également par défaut pour une vidéo incluse dans une page HTML5.

Ça utilise DLNA !

Tout device compatible DLNA et certifié Windows fonctionnera.

Comment ca fonctionne ?

  • L’application identifie le contenu streamé
  • Elle s’enregistre auprès du PlayToManager

« Sharing with Someone Nearby » :
On peut partager une page web entre deux devices en utilisant la technologie  NFC simplement en sélectionnant partager avec quelqu’un et en mettant les tablettes en contact. Strange …

Share : Your app powers the Windows 8 share experience

Message de Roch Baduel (Le 16-09-2011)

Une petite session assez simple et beaucoup de démos mais qui ne se retranscrivent pas dans les notes

La session est sur la fonctionnalité de partage entre applications sur Windows 8.

La session couvre :

  • Le share contract
  • Comment ça marche
  • Les Best practices pour l’implémenter
  • Comment coder

Si on écrit une application qui a du contenu à partager, l’application est une source. La pluspard des applications devraient être une source. Si l’application consomme les données des autres il s’agit d’une « target ».

Actuellement pour partager avec des applications on est obligé de codé du code spécifique pour chaque appli et se connecter directement à l’appli : c’est ce problème qu’adresse la fonctionnalité de share dans Windows 8.

Dans Windows 8 les applications ne se « connaissent » pas elles partagent ou consomme des données.

Fonctionnement :

  • L’application s’enregistre avec  le  DataTransfert Manager
  • L’utilisateur sélectionne share
  • Le share Broker (Windows) demande un DataPackage à la source
  • Le share broker filtre la liste des target en fonction du type de données
  • L’utilisateur sélectionne la target
  • Le share broker active la target et passe le datapackage
  • Une fois fini la target notifie le share broker

Le DataPackage :

  • Contient les données
  • Formats supportés : text,URI,HTML,Images, …
  • La liste des formats peut être étendue mais ce n’est pas une bonne idée : il n’y aura pas de target

On peut mettre plusieurs formats dans le datapackage. Ex : text + image

Il est préférable d’avoir le plus de formats possible

Le datapackage a les propriétés suivantes :

  • Title
  • Description
  • Thumbmail

On peut appeler  les méthodes : SetURI, SetText … pour fixer les contenus

L’application source :

Tout ce qu’il y a à coder c’est :

  • Enregistrer un handler avec DataTransfertManager
  • Dans l’évènement on build le datapackage

L’application Target doit :

  • S’enregistrer comme target et spécifier les formats qu’elle accepte
  • Créer une UI qui s’intègre avec le « charm » de partage
  • Utiliser le datapackage
  • Signaler la fin de l’utilisation
  • Renvoyer un quicklink

NB : l’enregistrement en tant que target se fait dans le manifest de l’application. On peut le faire facilement avec visual studio. De même pour la partie UI il y a un template accessible par add à new item à Share Target

On peut détecter dans l’évènement d’activation de l’application si elle a été activé par le share broker ou par quicklink ou normalement …

Queue and topics

Message de Roch Baduel (Le 15-09-2011)

Je voulais allez voir les nouveautés du framework 4.5 mais arrivé plus d’un quart d’heure avant la session  était pleine. Donc direction une autre session : Building advanced touch apps in Windows 8 : meme scenarios. Donc sur place il y à Clemens Vaster et un de mes sujets favoris puisque c’est une partie du futur “BizTalk”, je vais donc à la session (spécial Team BizTalk), voir notamment si il y a du nouveau:

Building loosely-coupled apps with Windows Azure Service bus topics and queues

Animée par Clemens Vasters

Un peu d’Azure ne fait de mal à personne 😉

  • Topics and Queues viennent juste d’être « releasés » en production

Maintenant le service bus n’est plus uniquement un service de connectivité.

La session commence par un rappel sur le service de relay et le relay bindiing avec une petite démo.

Ensuite Clemens explique que la nouveauté qui vient d’être ajouté est le service de messaging / pub /sub aka : Topics and queue : c’est le sujet de la session.

Les queues : ce sont des files d’attente à la mode MSMQ dans lesquelles une application peut publier des messages. Les messages seront ensuite lus par une ou plusieurs autres applications. Les queues sont persistantes et supportent un espace de stockage allant jusqu’à 4Go.

Lors de la lecture le client peut utiliser 3 modes de lectures :

  • Read and Delete : dans ce mode le message est lu et directement supprimé de la queue. Si l’application cliente crashe, le message est perdu.
  • Peek : le message est lu et un verrou est placé. Ensuite l’application peut valider la lecture, ce qui supprime le message ou l’annuler ce qui enlève le verrou : le message reste dans la queue.
  • Transactionnel : l’application peut effectuer une transaction avec la queue

Les lectures peuvent être faites par plusieurs clients ce qui permet de faire du « load balancing »

Les messages représentés par la classe BrokeredMessage contiennent à la fois les données (le corps du message et un ensemble de propriétés sous la forme clé=valeur)

Les topics sont similaires aux queues : une application source publie des messages dans les topics. Par contre au niveau d’ un topic on défini des souscriptions. Les souscriptions sont des conditions sur  les valeurs des propriétés associées aux messages. Quand un message arrive dans le topic, il est routé vers les souscriptions qui correspondent. Ensuite un client peut lire les messages d’une souscription d’un topic. C’est un modèle asynchrone et persistant de publish subscribe.

La particularité du système est de supporter un très grand nombre de souscripteurs.

Utilisation – API :

  • Pour créer, tester l’existence et supprimer des queues, topics et souscriptions on utilise la classe NamespaceManager.
  • Pour interargir avec les queues, topics et subscriptions on utilise la classe MessagingFactory.

MessagingFactory propose notamment 3 méthodes qui permettent de créer des clients permettant de lire ou écrire dans les queue, topic et subscription.

Les méthodes sont :

  • CreateQueueClient : Crée un client permettant d’écrire et lire dans les queues
  • CreateMessageSender : Crée un client permettant d’écrire des messages
  • CreateSubscriptionClient : crée un client pour une souscription

Les messages manipulés par les clients sont des instances de la classe BrokeredMessage. Cette classe prends en paramètre de son constructeur le corps du message. Le corps du message peut être n’importe quel objet serialisable ou encore plus simplement un stream.

La classe BrokeredMessage dispose également d’un certains nombre de propriétés :

  • TimeToLive
  • ReplyTo
  • Properties : ce sont les propriétés qui sont évalues dans les souscriptions
  • ContentType

Focus sur les souscriptions :

  • Les souscriptions peuvent être créées avec des expressions conforme à SQL92 ce qui permet des notamment des expressions du type « like ‘…%’ »

La session se finie par une démonstration de synchronisation de lecteurs vidéos multi-device.