Team Fondation Server (TFS) est un outil bien pratique pour suivre l’avancement des travaux via la gestion des “Work Items”.

Ceci dit, une petite chose m’avait échappée jusqu’à ce matin…   Lorsque l’on regarde les tâches existantes, on peut se créer une requête pour filtrer.  Mais je devais la recréer à chaque fois, comme je ne trouvais pas comment faire pour la sauvegarder.  Et pourtant, c’est tout simple.

Alors si je ne suis pas le seul à qui la méthode a échappée, voici la marche à suivre en de très simples étapes.

Disons que j’ai cette requête de créée :

On voit par l’astérisque en haut que je l’ai modifié. Je clique sauvegardé. J’ai cette écran qui apparaît :

De toute évidence, il y a eu un problème à sauvegarder. Mais la bonne nouvelle, c’est que dans l’écran qui suit, on peut la sauvegarder ailleurs :

Et ensuite, ma tâche est correctement sauvegardée !

Et voilà, simple comme bonjour, comme par magie !

Il y a déjà quelques années que les disques durs flash (SSD) sont apparus sur le marché.  Au début, on les retrouvait davantage sur des systèmes bien précis, où leurs propriétés atypiques obligeaient leur utilisation. Par exemple, j’ai un ami qui travaille en informatique dans le milieu forestier.  Dans ce contexte, les SSD sont utilisés depuis plusieurs années comme contrôleur dans des systèmes embarqués sur de grosses machines directement sur l’exploitation. Ces machines se promènent sur tout le territoire, coupent, préparent et transportent le bois.  Pour eux, le gros avantage du SSD est la résistance aux vibrations.

Honnêtement, il n’y a pas tant de vibrations que ça au bureau…  Et pour d’autres qui travaillent sur des ordinateurs portables, ils l’utilisent pour le gain en économie de batterie.  Mais ce qui nous intéresse de notre côté, c’est les performances incroyables de certains SSD sur la lecture et l’écriture de fichiers aléatoirement distribués sur le disque dur.  Prenez par exemple, le Intel X25-M.  Il est reconnu pour permettre 250 MB/s en lecture et 70 MB/s en écriture en maintenant jusqu’à 32 opérations en parallèle, au détriment de peu d’espace avec son chétif 80 GB.  Et en cherchant sur le Web, vous trouverez une panoplie de personnes vous vantant ces mérites pour accélérer leur système.

Nous avons donc décider de prendre le temps de tester dans notre environnement ce que l’on pourrait avoir comme gain à l’utilisation.  À sa sortie en 2008, ce disque ce détaillait près de 800$, alors qu’on le retrouve désormais aux environs de 250$ (si vous êtes dans la région de Drummondville, je vous conseille Dr Solutions, ils en ont à un prix très agréable).

Objectif du test

Pour nos tests, nous nous sommes concentrés sur du quantifiable, bien que je puisse vous assurer qu’il y a une amélioration ressentie dans la majorité des applications; Windows en premier.  Notre objectif de départ était de mesurer les temps de compilation comme pour la plupart de nos applications, ce temps représente une part non négligeable de la journée d’un développeur.

Démarche

Nous avons donc préparé deux machines similaires, l’une avec un disque dur Western Digital comme nous utilisons d’ordinaire, la seconde avec un Intel X25-M de seconde génération.  Et pour bien mesurer notre test, les deux disques durs ont été placés dans la même machine.  On changeait l’unité de démarrage pour tester l’une ou l’autre, mais nous étions assurés d’avoir la même mémoire, la même carte maitresse, le même CPU, …

Chaque test fût exécuté trois fois pour permettre de lisser quelque peu les données.  Il y a eu de deux à quatre tests :

• Compilation complète de la solution (Rebuilt All);
• Compilation des modifications (Build).

Et pour une des solutions, nous avons aussi profité du test pour compiler sous Visual Studio 2010 sur le SSD.

Description du poste

Voici les spécifications sommaires du poste sur lequel a eu lieu le test.  Il représente bien un poste typique de développeur chez nous.

Tous les Hotfix / Service pack étaient installés.

Description des solutions compilées

Nous avons effectués les tests de compilation sur trois projets.  Comme le développement Web représente la majorité des développements effectués chez Nmedia, nous avons testé deux solutions principalement Web et une Windows Presentation Fondation (WPF).

Ceci dit, dans les solutions Web, il y avait aussi des projets WPF et Silverlight.

Observations

Voici les données mesurées et sur lesquelles furent calculées la moyenne. 

Répartition pour les trois solutions :

Application Web #1

Application Web #2

Application WPF

Résultats

Et oui… ce qui nous intéresse le plus : SHOW ME THE MONEY ! (ou les chiffres dans notre cas).

Vous vous souvenez que nous avons testé l’application WPF sur SSD ET Visual Studio 2010 ? 

Conclusion

Ça, je vous le laisse en exercice à la maison !

J'ai voulu dernièrement optimiser une fonction JavaScript qui était plutôt gourmande en temps d'exécution.

Suite à plusieurs tentatives, j'ai réalisé que c'était l'utilisation des propriétés offsetWidth et offsetHeight des éléments qui était en cause. Elles sont utilisées pour connaître la taille réelle d'un élément. Avec offsetTop et offsetLeft, nous avons aussi le même problème.

Après avoir exposé ma solution à Tommy, il m'est arrivé avec une explication logique à ce problème.

Voici le code qui causait les problèmes de performance :

   1: ContainerBox.prototype.PositionBox = function(element, borderColor, width, borderStyle) {

   2:  

   3:         var pos = J(element).offset();

   4:  

   5:         this.TopBar.style.top = pos.top;

   6:         this.TopBar.style.left = pos.left;

   7:         this.TopBar.style.width = element.offsetWidth + (width);

   8:         this.TopBar.style.display = "";

   9:         this.TopBar.style.borderTop = borderStyle + " " + width + "px " + borderColor;

  10:         this.TopBar.style.visibility = "visible";

  11:         this.TopBar.setAttribute("BorderedItemID", element.id);

  12:  

  13:  

  14:         this.LeftBar.style.top = pos.top;

  15:         this.LeftBar.style.left = pos.left + 1;

  16:         this.LeftBar.style.height = element.offsetHeight;

  17:         this.LeftBar.style.display = "";

  18:         this.LeftBar.style.visibility = "visible";

  19:         this.LeftBar.style.borderLeft = borderStyle + " " + width + "px " + borderColor;

  20:         this.LeftBar.setAttribute("BorderedItemID", element.id);

  21:  

  22:  

  23:         this.BottomBar.style.top = pos.top + element.offsetHeight - 1;

  24:         this.BottomBar.style.left = pos.left + 1;

  25:         this.BottomBar.style.width = element.offsetWidth;

  26:         this.BottomBar.style.display = "";

  27:         this.BottomBar.style.visibility = "visible";

  28:         this.BottomBar.style.borderTop = borderStyle + " " + width + "px " + borderColor;

  29:         this.BottomBar.setAttribute("BorderedItemID", element.id);

  30:  

  31:  

  32:         this.RightBar.style.top = pos.top;

  33:         this.RightBar.style.left = pos.left + element.offsetWidth;

  34:         this.RightBar.style.height = element.offsetHeight;

  35:         this.RightBar.style.display = "";

  36:         this.RightBar.style.visibility = "visible";

  37:         this.RightBar.style.borderLeft = borderStyle + " " + width + "px " + borderColor;

  38:         this.RightBar.setAttribute("BorderedItemID", element.id);

  39: }

En gros, cette fonction sert à afficher le contour des zones dans un éditeur.  À priori, ce qui est fait là est assez simple, je positionne 4 divs au dessus d'une zone de l'éditeur. Pour le cas particulier que je testais, il y avait 72 zones pour lesquelles nous devrions faire afficher le contour, ce qui prenait 8 secondes à exécuter.

Le problème c'est que chacun de ces divs est déjà ajouté au html de ma page donc chaque changement de style que je fais va potentiellement affecter le offsetWidth ou le offsetHeight.

Par conséquent, à chaque fois qu'un style est modifié, IE est flagé pour recalculer les offsets en fonction des nouveaux styles, et ce même si ça n'a pas réellement affecté le offsetWidth d'un élément.

Pour optimiser, il suffisait donc de mettre mes offsets dans une variable au début de la fonction (avant le code qui modifie les styles) et d’utiliser ces variables pour changer les styles. Après optimisation, la même opération prend moins d’une seconde!

Voici l'explication trouvée par Tommy dans sa version originale :

“ You just caused two reflows to happen, since asking for offsetWidth forced the element to reflow in order to answer you question (because it had a pending change to style).
This is the real performance bottleneck to be wary of. Browsers are smart about avoiding reflows when they can, but if you create code that forces a reflow in order to answer a question, then you can create severe performance”

Merci à Tommy!

Comment livrer du logiciel de qualité… Bien certainement, il faut des programmeurs de qualité et avoir le souci de pleins de détails techniques… Quelle plateforme, quels langages, quels choix architecturaux, quels standards, quels protocoles, … Mais ce n’est pas tout.

Un aspect trop méconnu, c’est l’importance du design. Et non seulement les pixels qui seront affichés à l’écran, mais aussi comment sera utilisée l’application, par qui, quelles seront leurs préoccupations… et leur background ? Comment faire en sorte que l’information recherchée soit facile à retrouver. Comment mettre à profit tout ce qu’ils sont comme utilisateurs pour leur donner une forte résonnance dans la solution offerte.

C’est là que le design entre en jeux. C’est pour l’instant un mélange de quelques professions : designer à la sauce infographe, architecte d’information, ergonome d’applications…

Un bon penseur dans le sujet, est Monsieur Bill Buxton.

Voici un petit compte-rendu de deux Web Cast le mettant en vedette :

• Un premier lors de la conférence Mix 2010 : An hour with Bill Buxton;
• Le second, alors qu’il était sur le même divan que notre sympathique ami Erik Meijer où ils parlent tous deux de leurs perspectives sur l’évolution du design, chacun de leur point de vue.

• Comparaison avec un projet de construction novateur (prenons l’exemple du Seattle Central Library)
  • Pour Bill Buxton, l’architecture de bâtiments s’apparente plus au design du fonctionnel et de l’architecture d’information qu’à l’architecture logicielle;
  • Il fait le parallèle entre architecte logiciel et ingénieur du bâtiment;
  • La portion architecture sur le budget total du projet est de 17 à 25%;
  • Design commence avec l’appel d’offre et continu jusqu’à la complétude (livraison) du projet.
• Comparaison des méthodologies :
  • Programmation est issue des mathématiques ou de l’ingénierie :
    On cherche à trouver LA réponse;
  • Design :
    On cherche la vision, donc pas une réponse monolithique et absolue. Le designer va chercher à trouver plusieurs approches très différentes, les présenter, non pour trouver la bonne du premier coup, mais pour faire discuter sur chaque différence. C’est une façon de dessiner le terrain (en bon programmeur, on emploierait le « solution space ») et d’amener tout le monde à en discuter, à faire émerger le chemin à marcher sur ce terrain.
• Approche agile pour le design?
  • Potentiellement contre intuitive et contre productive à la base, plus à l’aise waterfall, mais pas impossible d’être agile.
• Comment réussir avec notre équipe de design ?
  • Si on cherche à livrer du logiciel qui sera innovateur dans 2 ans, alors il faut une machine à la fine pointe de la technologie. La loi de Moore continue de fonctionner. On le savait de l’aspect programmation, là l’input sur le volet design est pareil.
  • Le domaine du design informatique ressemble au design industriel de 1920. Il manque présentement les écoles, les maîtres à penser, les champions…;
  • Alors pour avoir un bon département de design, il faut faire comme avec un CFO : engager un bon designer et lui laisser le champ libre pour recruter ce qu’il reconnaît comme un bon designer.
• Bons livres
  • Le meilleur livre de design : « Art and Fear »;
  • Le meilleur livre de design d’interface graphique : « The Simplicity Shift: Innovative Design Tactics in a Corporate World ».
• Pistes de réflexion…
  • La jolie phrase de St-Exupéry : « Il semble que la perfection soit atteinte non quand il n'y a plus rien à ajouter, mais quand il n'y a plus rien à retrancher. »;
  • L’importance des 3 piliers : technologie, design, business. Ils sont aussi important l’un que l’autre et doivent travailler à se complémenter. Comme la relation symbiotique lors de la renaissance entre les destins de Donatello et des Médicis;
  • Un bel exemple d’après lui fût Google au début,
    • Search engine OK
    • Design OK
    • Business model OK
    • Mais les trois au même niveau et qui s’imbriquent, on génère beaucoup de valeur.
• Simplification des rôles dans l’équipe :
  • Designer : chercheur et porteur de vision;
  • Programmeur : prend une vision et l’implémente;
  • Business : s’assure du cadre financier pour que la vision implémentée puisse se livrer et se supporter par la suite.
• Mes conclusions :
  • Les designers personnifient l’âme du projet;
  • Pour bien comprendre la portée de ce constat, il faut se souvenir de cette autre belle phrase de Rabelais : « Science sans conscience n'est que ruine de l'âme. ».

C’est ce merveilleux moment de l’année où Microsoft partage avec la communauté à travers son événement sur le développement Web : MIX. D’ailleurs, pour les intéressés, vous pouvez suivre en temps réel les présentations en direct de Las Vegas. Donc qui dit Web et Microsoft… On pense Silverlight et Internet Explorer 9 !

Silverlight

• Silverlight 4 est rendu à la phase Release Candidate (RC) depuis le 15 mars 2010.
  Aller chercher ce qu’il faut ici.
• Silverlight 4 sera complété et disponible (RTW) d’ici la fin avril !
• Plus de 60% des machines sur internet ont Silverlight d’installé
• Silverlight pour Symbian (c’est la plateforme derrière les téléphones de Nokia), le beta commence
• Toujours des rumeurs de Silverlight pour Android (Google Phone)
• Silverlight streaming pour le iPhone… c’est très fluide !
  
  

Expression Blend

Et pour travailler avec Silverlight, quoi de mieux qu’Expression Blend pour complémenter notre Visual Studio !

• Expression Blend 4 est maintenant Beta !
• Et il y aura une mise à jour gratuite de Blend 3 vers Blend 4
  
  

Et du côté d’Internet Explorer 9 ?

• On peut télécharger une version “développeur” de IE9
  
  
• Nouvel engin JavaScript a des performances désormais comparable à Opera et Chrome
  
  
• Bien que les performances de l’engin Javascript de IE9 soit un peu en arrière comparé à d’autres fureteur, l’expérience de navigation dans son ensemble semble nettement amélioré… Par exemple, si sur une page type, calculer le rendu visuel de la page prend plus de 25% du temps et le JavaScript moins de 10%, pourquoi toujours optimiser JavaScript? Microsoft propose de regarder le système dans son ensemble 
  
• Et désormais, le rendu visuel est fait avec toute la famille DirectX, et ainsi ça devient très rapide
• Support pour SVG à même le html (aller voir le Keynote 2, à 54 minutes). Et c’est pas seulement SVG à côté du reste… non c’est du SVG que tu peux styliser via des CSS et que tu peux manipuler (lire animer) avec du Javascript ! (et bien sur, ça se doit d’être du SVG accéléré par le matériel… merci DirectX pour les animations vectoriels avec opacités !)
• Dans l’outil « Developer Tools », il y a un nouvel onglet « Network ». Dedans, on voit les temps de téléchargement de chaque item ainsi que l’ordre, on peut observer ce qui prend du temps et ce qui se parallélise !
  
• Support pour le vidéo de HTML 5. (donc du vidéo dans le browser sans aucun plugin!)
  Et si on fait une comparaison entre Chrome et IE9 pour un film en 720P :
  • Chrome rafraichit le vidéo aux ~3 secondes
  • Mais comme IE9 est « Hardware accelerated », aucun frame perdu dans le flux et moins de 25% de CPU d’utilisé ! Il en reste un peu pour Outlook…
    
    

Et dans le reste de l’écosystème…

• Dans les projets ASP.Net 4 sous Visual Studio 2010, il supporte désormais plusieurs Web.config (séparé par environnement…)
• Web.release.config;
• Web.staging.config;
• Web.debug.config.
• ASP.Net 4 + AJAX + JASON + JQuery Template Binding… WOW !
• La compagnie Curse.com avait une solution LAMP avant; maintenant ils ont migré à l’architecture Web Plateforme de Microsoft… Malgré la croissance, ils ont désormais besoin du 1/3 de serveurs et ils livre 3 fois plus de visites!

Voici un petit bilan de notre comparaison de deux système de diagrammes (charts) disponible dans le marché pour WPF. C’est un test très sommaire, mais ça nous a permis de faire notre choix. On a essayer tour à tout de faire les mêmes choses dans les deux frameworks, et on a noté nos impressions.

WPF Toolkit

· Plus simple

· Accès simple aux Axes Y pour en ajouter

· Possibilité de mettre un titre sur les axes

· Aucun Binding pour supporter plusieurs series dynamiquement via M-V-VM

· Utilise davantage les standards WPF

· Facile à « templater » le visuel via les styles

· Plus gratuit

Infragistics

· Plus compliqué

· Complexe pour ajouter des Axes en Y

· Pas de titre sur les Axes, il faut ajouter un text block avec rotation

· Comme WPF Toolkit : Aucun Binding pour supporter plusieurs séries dynamiquement via M-V-VM

· Utilise moins les standards WPF, réinvente certains concepts

· Plus compliqué à utiliser

· Plus cher

Alors notre choix c’est porté sur la WPF Toolkit. Maintenant, si on pouvait binder sur la propriété « Series » de la « Chart » !

Hier Silverlight 3, aujourd’hui on regarde dans le futur… Et comme il y a encore beaucoup de nouveautés avec Silverlight 4, un petit top 3 des fonctionnalités s’impose !

• 3^ième position 
  Plus de support pour s’approcher de M-V-VM (Commanding et des erreurs de validations via IDataErrorInfo)
  
• 2^ième position
  Est désormais compatible avec le format des « assemblies » de .Net 4… on peut donc inclure des références de dll .Net à même Silverlight pour favoriser le partage des composants sans avoir à faire des « add as a link »
  
• 1^ière position
  Bref, toutes les nouvelles fonctions sont intéressantes ! Alors pour bien mesurer la puissance de Silverlight 4, vous devez jeter un coup d’oeil sur le “Facebook Reference Implementation ». C’est une application créée pour donner un aperçu de la force de Silverlight 4. Chaque nouvelle fonctionnalité s’y retrouve. C’est une belle plateforme pour tester… et comme maintenant tout le monde a un compte Facebook et que Microsoft publie son SDK pour l’interfacer…
• Voici l’application :
   http://www.silverlight.net/content/samples/apps/facebookclient/
• Petit blog pour le présenter :
  http://timheuer.com/blog/archive/2010/01/25/silverlight-client-for-facebook-from-pdc-available.aspx
• Un vidéo sur Channel 9 sur ce sujet :
  http://channel9.msdn.com/shows/SilverlightTV/Silverlight-TV-8-Inside-Look-at-the-Code-for-the-Silverlight-for-Facebook-App/

Chose promise, chose dûe! Alors voici la première étape dans le marathon. Silverlight… 3 !  Après plusieurs mois de disponibilité et quelques développements accomplis sur la plateforme, c’est un petit compte-rendu de ce que l’on aime bien de la plateforme. Et parce que l’on a pas toute la journée… en point form !

• Les Olympics de Vancouver sont présentement diffusés en Silverlight
• Silverlight 3 ne possède pas un engin 3D, mais il permet d’émuler aisément un « Flip 3D » sur un axe. Éditable à partir de Blend dans la section Transform à Projection
• Support de l’accélération graphique via GPU
  • Pour ce faire :
    • <object>
      <param name=”enableGPUAcceleration” value = “true”
    • Ensuite C# : Application.Current.Host.EnableCacheVisual
    • Ensuite : <Canvas.CacheMode><BitmapCache RenderAtScale=4
  • Une option agréable : “Enable cache visual”, qui permet de mettre en rouge ce qui n’est pas contrôlé par le GPU.
• Dans Blend 3,
  • Il y a une nouvelle option très sympathique, dans la section « Data », choisir « new sample data service ». Cette option crée un « mock » de design time. Très pratique, avant nous les avions créés à la main à même Visual Studio. Mais désormais, les designers peuvent s’en occuper eux même.
  • Je suis toujours à rechercher certains raccourcis pratiques…
    • Pour alterner en « animation view » ou design, utiliser F6
    • « Tab » permet de cache les panneaux des côtés
  • Édition de event handler dans blend est intégrée : en double cliquant sur Bouton.Click, l’éditeur de code source inclus dans Blend souvre, et supporte maintenant Intellisence
  • “Easing animation” dans Blend, mais seulement pour Silverlight
  • “Animation Easing” sur un KeyFrame
• Fonctions linéaires, spring, élastiques, bouncing, …
• Effects en pixel shaders
  • Ombres portées et floues
  • Writable bitmaps en provenance d’un video
• Local Messaging
  • Via plusieurs technologies
  • Frames
  • Pages
  • Browser
  • … bref, tant que ça reste sur la même machine, la communication peut s’établir.
  • Exemple :
    http://blogs.msdn.com/jstegman/archive/2009/09/08/silverlight-3-sample-updates.aspx
    La balle qui rebondit d’un fureteur à l’autre (BouncingBalls.sln)
    
  • La classe à utiliser :
    LocalMessageReceiver r …
    r.MessageReceived += …
    r.Listen();
• Virtualizing UI à la WPF, donc plus de performances en travaillant avec de larges quantités de données
• Pour supporter un affichage synchronizer via le SelectedItem : DataGrid / DataForm
• Navigation framework pour le support de l’historique
• Déploiement à l’extérieur du fureteur

Bonjour,

Comme tout bon blogue, je dois dire que ça fait longtemps que je ne suis pas venu poster quelques trucs techniques…

Et pourtant, il y a beaucoup de modifications ces temps-ci… Simplement du côté de Visual Studio 2010 + .Net 4 qui est pratiquement à nos portes avec sa panoplie de nouveautés. Avec ça, il y a beaucoup de nouvelles choses à regarder!  C’est du sérieux ce que Microsoft livre cette année…

Alors fidèle à notre habitude, nous allons migrer bien des projets sous cette nouvelle plateforme dès que la version RTM sera disponible. En parcourant certains points, je me suis dit : « Pourquoi ne pas résumer ici certaines de ces nouveautés ? ». Après tout, il n’y a pas de raison de garder ça pour nous !

Restez donc à l’écoute, je vais tenter un marathon dans les prochains jours. Je vais présenter des listes de points sur les sujets suivants :

· Silverlight

· ASP.Net

· Visual Studio

· Blend

· Prism

· Accès aux données (et pas seulement bases de données...)

· Team Fondation Server

Avez-vous des demandes spéciales ? Le train part demain matin ;)

Patrick

En décembre dernier, Stéphane Lépine, programmeur chez Nmedia, passait avec succès l'examen menant à la certification MCPD (Microsoft Certified Professional Developer). Cette reconnaissance de Microsoft est un cursus de très haut niveau qui présente tous les concepts et technologies indispensables au développement d’applications Internet et Windows basées sur le langage Microsoft .Net. Bravo Stéphane !