Les articles des consultants de MCNEXT
SignalR est une librairie permettant de faire du temps réel et du push en http, avec des mécanismes de fallback pour des navigateurs anciens.
SignalR fait maintenant partie de ASP.Net, sera bientôt déployé avec ASP.Net, et est décomposé en 2 API (client + serveur)
Côté serveur ont fait une classe héritant de Hub, dans laquelle on met des méthodes qui seront accessibles cote client, sur le même modèle que MVC. Cote client, on va utiliser la librairie javascript associée, créer des méthodes et se connecter sur le hub. Le hub peut appeler les méthodes déclarées dans le client et vice versa. Un système de projection expose automatiquement les entites et methodes du serveur, dans l’API client.
On voit ça applique à une appli dans laquelle on peut déplacer un élément, et voir le résultat en temps réel sur un autre navigateur.
SignalR peut être utilisé pour des apps de monitoring, travail collaboratif, suivre la progression de traitements longs, …
On voit ensuite un jeu (shootr.signalr.net). On est invite a se connecte et a jouer tous ensembles sur nos tablettes ^_^
Des guidances seront publiées très prochainement pour approfondir les concepts.
SignalR peut utiliser websocket, a condition que le browser le support, et que le serveur et l’infra réseau le supporte. Si ce n’est pas le cas, SignalR va utiliser des messages par iframe ou du http long polling.
SignalR a plusieurs librairies clientes (javascript, .Net, iOS, etc) et d’autres sont en cours.
Le cœur de SignalR a été reecrit pour ameliorer les perfs, et peut traiter au moins 100000 messages/secondes/serveur, et supporte du scaling horizontal avec un système de service bus géré soit avec azure, soit reddis, soit sql server.
SignalR utilise maintenant des perfcounters pour faire du tracking, et dans les sources de SignalR, on trouve un outil de loadtest.
Guillaume
Session A VOIR ABSOLUMENT, même pour les personnes sans profil technique.
Scott Hanselman nous fait attendre le début de la session avec des vidéos humoristiques. Ça donne le ton ^_^ . Pour vous donner une idée tapez "onion apple wheel" dans Youtube.
Nous avons d’abord un rappel charge d’humour sur le computing en général et le cloud en particulier.
On a droit ensuite à une démo ou il crée un site, le commit dans git, le publie et y accède dans Azure en moins de 3 minutes (avec des Websites Azure).
On enchaine sur un historique du web et des technos associées, et par des émulateurs commodore et linux… en javascript, du jeu "contre jour" en html5. Il considère un browser html5 comme une machine virtuelle cote client, qui possède maintenant les caractéristiques d’un système d’exploitation (storage, threading, ui, graphics).
On a droit à une brève présentation de Typescript, de WebAPI, et de la réunion des univers fortement type/script
On fait également un tour des "productivity boost" pour le web avec VS2012.
On conclut sur la puissance cote client, qui vient en parfait complément du cloud
Guillaume
De mauvaises performances peuvent décourager les utilisateurs d’utiliser nos applications. Il est important de proposer une appli "responsive" et prendre garde de ne pas bloquer l’IHM. Il est important d’essayer de garder une empreinte mémoire faible, et de s’intéresser aux bonnes pratiques.
Visual Studio est fourni avec un profiler javascript (tout comme IE) qui permet de tracer le temps d’exécution des fonctions et le nombre de fois qu’elles sont exécutées. Le profiler est visible dans le menu "Debug" de VS. Le mode "paused" du profiler permet de placer son appli dans un état défini avant de lancer la session de profiling.
En profiling on distingue "inclusive time" (temps global d’exécution), et "exclusive time" (temps d’exécution du code de la fonction, donc sans le temps des appels a d’autres méthodes).
Dans le applis WinJS, le javascript est compile en mode release mais pas en mode debug. Il peut donc y avoir de grosses différences de perfs entre les deux.
Le sdk win8 possède également un outil "performance analyser for HTML5 apps" qui permet d’analyser davantage d’éléments (program fils/windows kits/8.0/bin/x64/appperfanalyser). Il faut lancer l’outil et suivre le wizard. L’outil existe pour les différents processeurs, y compris ARM. On va avoir un rapport avec des warnings et des erreurs.
Il y a également un outil "javascript memory profiler" qui sera dispo dans le prochain update de Visual studio, mi-novembre (et en CTP pour l’instant). Comme son nom l’indique, il permet d’analyser l’utilisation de mémoire, et les fuites mémoire.
Point intéressant aussi, le speaker utilise le getthumbnail de winRT pour optimiser le chargement de grosses images downscallee pour être affichée dans les tuiles.
On voit aussi que comme en c#, un event ou une variable mal déréférencée peut induire des fuites mémoire importantes.
Guillaume
Dans cette série sur la réalisation de l’application Metro "Parle moi de…" en HTML et Javascript, nous avons vu :
Le meilleur moyen de déployer votre application Metro reste le magasin d’applications Windows ou Windows Store. Dans ce webcast, nous allons aborder les différentes étapes de la publication d’une application, comme la création d’un compte dans le store, la validation de votre application avec les outils du SDK, et le processus de certification.
Dans cette série sur la réalisation de l’application Metro "Parle moi de…" en HTML et Javascript, nous avons vu :
Les animations et les transitions permettent de donner vie à l’application, et de donner un ressenti plus organique lors de la manipulation de l’application. C’est particulièrement important dans les applications tactiles car c’est un contexte dans lequel les applications peuvent paraître "cassées" lorsqu’elles ne sont pas assez réactives. Nous allons aborder dans ce webcast les différentes façon de gérer ces transitions et ces animations pour les applications Metro en HTML et Javascript. Une fois de plus, l’API WinJS fournie par Microsoft comporte tout une API qui va nous pouvoir nous aider. Si vous maîtrisez des librairies javascript comme jQuery, vous pourrez également les mettres à contribution, de la même façon que sur vos sites web. Une dernière façon de donner vie à vos écrans peut être d’utiliser directement les transitions CSS3.
Une autre façon de donner plus de vie à votre application est de permettre de partager son contenu. Pour ce faire, Windows propose le charme de partage. Grâce à ce charme, vos utilisateurs peuvent partager vos contenus vers d’autres applications, comme par exemple les applications de Contact (pour partager dans Facebook, Twitter, …), ou Courrier (pour envoyer ces informations par mail). Nous allons donc vous présenter comment implémenter le charme de partage dans votre application.
Dans le prochain épisode de cette série, nous verrons les étapes à respecter pour publier votre application dans le Windows Store.
Dans cette série sur la réalisation de l’application Metro "Parle moi de…" en HTML et Javascript, nous avons vu
Parmis les charmes proposés dans Windows 8, nous avons le charme de paramètres. Il permet à l’utilisateur d’accéder aux paramètres de l’application, ainsi qu’aux paramètres du système. Dans vos applications Metro, les écrans de préférences et de paramétrage de l’application doivent être accessibles à travers le charme de paramètres (cela fait partie des points vérifiés lors de la certification dans le store). C’est également un bon endroit pour mettre votre fenêtre "A propos" si vous souhaitez en mettre une, ou pour mettre un lien sur l’aide. Dans les applications en HTML et Javascript, nous disposons d’un contrôle SettingsFlyout qui va nous permettre d’implémenter des écrans de préférence. Nous allons voir comment ajouter un lien dans le charme de paramètres, et comment réaliser un écran avec le contrôle SettingsFlyout.
Si vous proposez un écran de préférences, il faudra également stocker les choix de l’utilisateur pour pouvoir les réutiliser. Nous allonc donc également voir comment stocker ces préférences en local. Nous verrons aussi comment bénéficier du roaming, afin d’utiliser ces préférences sur les différents ordinateurs associés à un utilisateur.
Dans le prochain épisode, nous verrons comment ajouter des animations pour améliorer les transitions et le ressenti utilisateur, et comment implémenter le charme de partage.
Dans cette série sur la réalisation de l’application Metro "Parle moi de…" en HTML et Javascript, nous avons vu
Nous allons maintenant voir la gestion des résolutions d’écran et des états visuels de l’application.
Windows 8, bien que résolument tactile, reste Windows. Il n’y a donc pas de résolution d’écran fixée. La résolution minimale supportée est de 1024 pixels, mais il est fréquent aujourd’hui de trouver des écrans en 1920px, y compris sur des portables, et on commence à voir apparaitre des écrans avec des résolutions beaucoup plus importantes.
Par ailleurs, une application Metro peut être dans différents états visuels, correspondant à l’ergonomie de cette nouvelle génération de Windows. L’application peut être affichée au format portrait ou paysage, mais elle peut aussi être en mode "snap", c’est à dire qu’elle est affichée côte à côte avec une autre application. On a dans ce cas une application "snappée" (avec un espace de 320 pixels), et une application "filled" qui occupe le reste de l’espace. Le fait de "snapper" des applications n’est accessible que si votre terminal est en orientation paysage, et que votre écran à une résolution d’au mois 1366 pixels.
Votre application Metro doit impérativement gérer ces différentes résolutions, ainsi que les états visuels (il n’est pas possible pour l’application de refuser de se "snapper"), sous peine d’être refusée dans le processus de certification dans le store.
Nous allons donc voir comment gérer ces paramètres en utilisant les mediaqueries de CSS3, ou à travers l’API javascript.
Dans le prochain épisode de cette série, nous verrons comment utiliser le charme de paramètres et comment stocker des données en local.
Jusqu’ici, nous avons découvert comment mettre en place notre projet, puis comment tirer parti du charme de recherche et des contrôles comme la ListView pour notre application "Parle moi de…"
Dans ce 3e épisode, nous allons voir comment rendre notre application multilangue en Français et en Anglais.
Lorsqu’on souhaite tirer parti du multilangue dans une application Metro, il faut prendre différents aspects en compte. Nous allons évidemment vouloir traduire les textes utilisés. Nous allons aussi avoir besoin de changer certaines images selon la langue, à commencer par l’icone de notre application, l’écran de démarrage, le logo etc. Nous allons également avoir besoin de fournir des traductions pour les méta données de notre application comme par exemple son titre ou sa description, et déclarer les différentes langues gérées par notre application. Le but étant que les utilisateurs puissent avoir cette information lorsqu’ils consulteront notre application dans le magasin d’applications Windows.
Dans le prochain épisode, nous verrons comment gérer efficacement les différentes résolutions d’écran et comment gérer les différents états visuels de notre application.
Dans le précédent épisode de cette série, nous avons créé le projet pour l’application "Parle moi de…". Dans ce second épisode, nous allons aborder différents aspects essentiels à notre application. Nous allons tout d’abord intégrer le charme de recherche, afin de pouvoir lancer des recherches depuis Windows.
Nous allons ensuite découvrir l’utilisation d’éléments de base des applications Metro en HTML comme l’utilisation des templates et du binding. Nous appliquerons ces concepts dans l’utilisation du contrôle de liste (ListView) pour afficher le résultat de la recherche. Ce contrôle est essentiel dans les applications de style Metro car il vous permet d’afficher une liste d’éléments sous la forme de tuiles. Dans les applications Metro en HTML et Javascript, ce contrôle ListView permet d’afficher les éléments soit sous la forme d’une grille (dans l’esprit de l’écran de démarrage Windows 8), soit sous la forme d’une liste (plus traditionnelle).
Pour terminer, nous approfondirons ces concepts en mettant en place le zoom sémantique à partir de la liste. Le but du zoom sémantique est de proposer une vue sémantiquement différente de la liste. L’utilisation typique est de fournir une vue des regroupements de données utilisés, et de permettre ainsi un système de "Jump-List" entre ces regroupements. En mode tactile, cette fonctionnalité est déclenchée par la gesture de zoom, d’où le terme de zoom sémantique.
Dans le prochain épisode, nous verrons les différentes étapes pour rendre notre application multilangue.
Les applications Metro dans Windows 8 permettent des ergonomies plus simples et plus fluides, et adaptées à une utilisation tactile. Il est possible de réaliser ces applications avec différentes plateforme de développement : C++/XAML, C# ou VB / XAML, ou HTML / Javascript.
Nous vous proposons une série de vidéos pour découvrir la réalisation d’applications Metro en HTML et javascript.
Il y a quelques temps déjà, à l’occasion de la version Developper Preview, nous avions présenté l’ergonomie de Windows 8, ainsi que les fondamentaux sur les applications Metro en HTML et Javascript
Nous avions également présenté l’anatomie des applications Metro en HTML et javascript
Avec la sortie de la version Release Preview de Windows 8, nous vous proposons maintenant de découvrir la réalisation d’une application Metro en HTML et Javascript, à travers le développement de l’application "Parle moi de…". Cette application permet de faire des recherches dans différents fournisseurs de contenus comme Wikipédia ou Youtube.
Dans le premier épisode de cette série, nous vous proposons de découvrir la mise en place du projet. Cette mise en place passe par l’intégration de librairie javascript comme jQuery, et quelques informations sur les bonnes pratiques concernant l’utilisation du javascript. Vous pourrez aussi découvrir combien il est simple, grâce à Visual Studio, d’ajouter des pages et de naviguer dans les éléments du projet
Nous continuerons cette série avec différents articles et vidéos associées, pour découvrir le développement de ce genre d’application, étape par étape.
Dans le prochain épisode, nous verrons comment tirer parti du charme de recherche, et comment inclure un contrôle de type ListView dans notre application.
