Tutoriel sur asp.net disponible en béta

Bonjour à tous !

Avant toute chose, bonne rentrée à ceux qui commencent aujourd’hui, bon courage à ceux qui ont déjà commencé et que les autres (comme moi ^^) profitent au maximum de leur journée !

Pour ma part, mes vacances ont été plutôt productives. Avec plusieurs PR sur le dépôt git de zeste de savoir et surtout la mise en béta d’un tutoriel complet sur ASP.NET MVC 5.

Le tutoriel est encore en cours de rédaction, mais il y a déjà de quoi faire pas mal de belles choses avec ce que mes coauteurs (BlueShark et Zyhou) et moi même avons écrit.

Notamment, vous pourrez découvrir :

  • Ce qu’est ASP.NET, les différentes possibilités que ce framework offre
  • Comment créer un site de base avec ASP.NET MVC5
  • Comment créer votre maquette graphique
  • Comment utiliser les formulaires avec ASP.NET MVC 5

Nous n’avons que deux tout petits prérequis : Savoir utiliser le duo HTML5/CSS3 et connaître la syntaxe de base de C# ou VB.NET.

L’avenir du tutoriel sera divisé en deux parties distinctes :

  • la rédaction des parties pour l’instant vides de contenu
  • la création de vidéo de démonstration et d’explication qui viendront soutenir le texte du tutoriel.

A noter que le contenu vidéo ne représentera pas plus de 10% du contenu total du  tutoriel et devrait surtout se composer de screencast commentés (vous ne verrez donc pas ma tronche). Ce n’est pas par pudeur mais parce que je ne possède pas de camescope, donc si une personne habitant sur lille lit ce message et se send opé pour une séance de tournage (si possible si vous avez un fond vert ^^), je serai heureux de vous accueillir chez moi. Et puis à Lille on peut trouver des bars sympa avec de la bonne bière ^^.

SignalR : les websockets façon ASP-principe de fonctionnement

Parcourant depuis quelques temps la Virtual Academy de Microsoft pour me former à l’architecture système, je suis passé par leur Jump Start sur la création d’application web avec ASP.NET.

Outre l’intérêt très fort que j’ai pour ce framework qui permet de faire des sites mais aussi des API web, j’ai pu y découvrir un outil assez formidable : SignalR.

Le problème que tente de résoudre SignalR est celui très connu du partage en temps réel. Faire un chat en javascript avec la technologie AJAX (ou tout simplement de l’asynchrone) est une problématique qui est apparue depuis longtemps. Pourtant un problème se pose : comment on fait communiquer les mises à jours à tous les membres?

Une technique est le long polling, c’est à dire qu’on va demander sans cesse au serveur des mises à jours. Cette méthode a pour principal inconvénient d’être gourmande en bande passante et surtout en bande passante inutile : dans la plupart de vos requêtes c’est l’entête qui prend le plus de place, ce qui est ridicule.

Autre technique, l’infinite frame. On met une balise iframe mais le serveur n’envoie jamais le message de fin de page. ainsi la frame charge sans cesse et affiche au fur et à mesure les données. Outre que ça utilise les iframe (souvent déconseillé), cela demande un rafraichissement de la page en cas d’interruption du service. En outre certains navigateurs au nom onni ne supporte pas cette technique.

Mais est venu l’HTML5 qui est plus que de l’HTML. HTML5, c’est une API pour plein de choses (vidéo, dessin…) et entre autre les websocket.

fonctionnement d'une websocket

fonctionnement d’une websocket

SignalR est une technologie open source qui partage un développement .NET côté serveur et un plugin JQuery pour le côté client pour utiliser ces websocket et faire du temps réel.

L’avantage de cet outil c’est qu’il comprend que votre utilisateur n’a pas un navigateur de dernière génération et, de manière totalement transparente, va utiliser une des deux techniques citées au dessus en cas de non support des websockets.

En réel, ça donne quoi?

Côté serveur vous allez créer un ou plusieurs hubs. Un hub c’est un ensemble de fonctionnalité autour d’un thème. Par exemple, si vous avez deux outils en temps réel dans votre site, un paint et un chat, vous aurez un hub pour chaque outil. Le hub paint permettant de dessiner des choses et le hub chat d’ajouter, retirer, modifier des messages. Les méthodes du hub sont appelées à chaque communication client vers serveur.

Côté client, vous allez créer des “proxy” en javascript. Ces proxys seront les méthodes appelées par le script à chaque communication serveur vers client.

Dans le prochain poste, je me consacrerai au code afin de montrer la puissance de l’outil.

 

 

 

Le dogme du MVC

Intro

Il fut un temps où le web était développé “à l’arrache”, en témoignent les divers outils de type CMS ou de forum dans leurs premières versions. Puis une mode est apparue : le MVC.

Dans mon ancien blog, je citais la documentation de PHP à propos de ce MVC qui en fait n’a rien de très précis, est souvent mal interprété et est loin de la panacée promise.

Je suivais cette citation de considérations techniques sur “comment faire un MVC sur le web”, puisque le MVC sur le web ne ressemble pas tout ? fait au MVC dans une application bureau qu’on peut voir avec JAVA par exemple.

Mon expérience

Je me suis rendu compte durant mon année, et notamment durant le projet “Hackenbush” combien ces considérations étaient vaines et combien la citation de la documentation de PHP était réaliste.

En effet en appelant “mvc” un peu près toutes les architectures des framework php (je connais désormais CodeIgniter et Symfony), l’architecture utilisée sur ce blog (qui est une sorte de Code Igniter ad hoc) ainsi que le MVC que j’ai utilisé sur mon application javascript Hackenbush, on croit vite que c’est l’architecture la plus plébiscitée (Symfony) qui est la meilleure.

Je l’ai cru, et j’ai expérimenté, ainsi que tous mes condisciples, de sacrées déconvenues, autant quand il a fallu coder que quand il a fallu soutenir notre projet ? l’oral.

En effet, pour beaucoup d’entre nous, à force de chercher une architecture “divine” qui serait l’exemple type du MVC, nous avions oublié le principe de base de tout patron de conception ou d’architecture : nous organiser et nous offrir un vocabulaire commun qui nous permette de documenter notre application.

En effet, finalement quelque soit le MVC que vous utilisez, s’il est clair dans votre esprit (i.e si lorsque vous créez une classe vous ne réfléchissez même pas ? savoir dans quel dossier vous la mettez) et qu’il est correctement documenté (si vous travaillez en équipe ou qu’une API publique est prévue), ce MVC là ne sera peut être pas la norme de Fabien Potencier, mais il sera très sûrement adpaté à votre utilisation et donc :

  • Ne vous fera pas perdre de performances
  • Vous fera gagner du temps
  • Sera facilement maintenable

J’ai donc aujourd’hui quatre grandes expériences (à mon niveau hein) du MVC:

-Mon projet de première année, en programmation procédurale. Même si la conception du MVC m’avait posé quelques maux de têtes, avec “@CyrilChcod” nous avions rapidement mis tout à plat et fait un MVC qui nous correspondait. Et ça marchait ! Malgré la programmation procédurale, nous avions la réusabilité du code, la clarté et le sens. Et nous ne perdions pas de temps à rien.

-Ma mission auprès de l’ isen concept : qui m’a fait prendre conscience du potentiel des bundles de Symfony 2. Je devais migrer un site qui avait été développé sur CodeIgniter mais qui était plus prisonnier de ce framework que utilisateur. J’ai moi même eu du mal ? faire la jointure des deux projets et ça s’est soldé par un échec relatif (non respect de la deadline). J’ai essayé de reprendre par la suite Symfony2 pour un projet personnel mais le manque de temps et surtout une erreur de conception dans le projet initial m’ont fait un peu arrêter, surtout que j’avais une idée en tête à côté.

-Mon projet de seconde année, Hackenbush pour le petit nom. Ce projet était uniquement en JavaScript + un peu d’ajax. Deux contraintes majeur cadraient ce projet : MVC et POO. Et l? ça a été la catastrophe. Autant notre enseignant nous avait très bien expliqué la POO et une grande partie de la classe maîtrisait les grands concept, puis, ils a réussi ? recadrer et relancer eux qui avaient juste utilisé la POO comme une contrainte supplémentaire (donc des setters/getters pour faire “style” par exemple), autant il s’est lui même emmêlé les pinceaux sur le MVC. Je dois clairement l’avouer, bien que certains points ont été parfaitement maîtrisé par @qfrery et moi, autant nous nous sommes enfoncé (en partie ? cause de moi) dans des contraintes assez lourdes qui nous ont pris du temps de conception tout en ne séparant pas correctement certains morceaux de nos contrôleurs. Nous avons été sanctionnés ? ce propos (assez durement d’ailleurs) mais pour autant, notre code était très lisible. Au moins un objectif d’atteint, vous ne croyez pas?

-Une application androïd que je développe pour et avec des amis dans l’optique du jeu Guild Wars 2. On ne parle plus tout ? fait de développement web, mais il faut savoir que j’arrive sur android avec… zéro connaissance dans le truc. Tout juste la lecture (vitesse grand V parce que au fur et ? mesure que vous avancez, les tutos, ça énerve) d’un tutoriel. Pour le coup j’ai abandonné totalement l’idée d’aller sur le site du zéro depuis que j’ai été déçu par le cours sur le C++ que mon prof a largement dépassé autant en contenu qu’en pédagogie, ce même si la pédagogie est sensée être la force du site du zéro.

Je disais donc, j’ai commencé de manière totalement autodidacte, avec pour connaissance en JAVA que le fais que :

-on peut faire de l’overloading (contrairement ? PHP)

-tout est typé

-il faut faire “import” de tout ce qui n’est pas dans notre package au début du fichier

-on peut dire qu’une méthode peut lancer une exception via throws (comme en C++)

Bien aidé par mon IDE, la doc en ligne et pour un problème en particulier par la communauté du sdz (tout compte fait, la communauté reste cool), j’ai entamé ? tâtons le développement de cette application. J’avais quelques schémas de principe, mais je me suis rapidement buter aux problèmes des AsyncTask, du layoutInflater etc. Au résultat, mes schémas ont totalement changé et j’ai décidé de faire un MVC. Comme ce dernier ne m’étais pas imposé, je n’ai eu aucun complexe ? l’utiliser comme bon me semblait. Eh bien ça a clairement bien fonctionné. Mon code est peut être un peu lourd aux yeux d’un pro. Mais j’ai clairement séparé toutes les tâches entre un modèle/couche métier, une vue/widget et un contrôleur qui fait le lien logique entre les deux.

Je sais exactement où mettre chaque code. Une grande partie de mes codes est totalement générique et donne (enfin ai-je envie de dire) tout son intérêt aux concepts de classes abstraites et d’interfaces. Je retrouve dans le développement de cette application les mêmes sensations que lors du premier projet (et ça fait un bien fou !!) avec en plus le pouvoir et la clarté de la POO !

>TL;DR

Ecrit par : tl;dr

Si tu es mal ? l’aise avec ton patron de conception c’est qu’il est gênant pour ton application.

Les canvas HTML5 : chapitre 2 les calques

Ainsi continue la suite d’articles que j’avais commencée a propos des canvas html5 il y a deux semaines.

Je suis très heureux de constater que cet article est déjà bien référencé dans Google. Cela ne fait que renforcer ma motivation.

Ainsi, ce second chapitre portera sur la possibilité de créer des calques avec des canvas.

Le concept de calque :

Le concept des calques est très utilisé dans les logiciels de traitement d’image complexes style photoshop ou gimp.

Il s’agit de séparer votre images en plusieurs sous-images que vous superposerez ensuite selon un mode que vous choisirez, par exemple via un xor…

Les canvas permettent d’émuler ce genre de comportement assez intuitivement.

En effet , en créant plusieurs calques avec un fond transparent, puis en les superposant via CSS, on a autant de calques que de canvas.

Ce sera par la suite grâce ? la propriété z-index que vous pourrez switcher entre deux calques.

Pour gérer l’opacité il faudra utiliser le système rgba qui vous permet de renseigner une couleur sur 32bits avec un canal alpha.

Par exemple pour créer une ligne estompée de moitié et qui permet de voir au travers une partie du fond, vous aurez ce code :
[cc lang=”javascrip”]
context.strokeStyle=’rgba(255,0,0,0.5)’;
context.moveTo(0,0);
context.lineTo(100,100);[/cc]
En parlant de l’opacité un problème auquel j’ai dû faire face est qu’habituellement, je stocke mes couleurs sous forme d’entier, puis avec un jeu de masque/décalage de bit je pouvais obtenir les composantes rouge vertes et bleues facilement.

Le problème ici, c’est que le canal alpha est représenté par un flottant, pas un entier de 0 à 255.

En fait, il suffit alors de stocker la couleur sur un entier 32 bits, de récupérer la composante de poids faible et de la diviser par 255.
[cc lang=”javascript”]/**
*convertit un entier en couleur rgba
*@param integer l’entier à convertir
*@return la couleur rgba désirée
*/
var getRGBAColorFromInteger = function(integer){
return ‘rgba(‘+(integer>>24) +’,’+((integer>>16) & 255) +’,’+((integer >> 8) & 255) +’,’+((integer & 255)/255)+’)’;

}[/cc]

Obtenir les dessins faits sur un calque :

Une fois que vous avez travaillé sur votre calque, il peut être intéressant de connaître tous les pixels qui y ont été dessinés, notamment pour coder une fusion spéciale ou tout simplement pour déplacer le calque par exemple.

Pour faire cela, il vous faudra utiliser la fonction getImageData qui vous retourne un objet/structure composé de :

  1. un champ length = 4*nombre de pixel
  2. un champ data = un tableau où sont rangés vos pixel. Un pixel équivaut ? quatre cases dans ce tableau ([4n]=>Rouge, [4n+1]=>Vert, [4n+2]=>Bleu, [4n+3]=>alpha)

La fonction getImageData vous demande quatre arguments :

  1. x = L’abscisse ? partir de laquelle on commence
  2. y = L’ordonnée ? partir de laquelle on commence
  3. width = La largeur du rectangle qu’on désire sélectionner. Cette largeur peut être positive ou négative selon qu’on veuille aller ? droite ou ? gauche.
  4. height = La hauteur du rectangle qu’on désire sélectionner. Cette hauteur peut être positive ou négative selon qu’on veuille aller en haut ou en bas

Notons que si vous sélectionnez un pixel en dehors du canvas, il sera mis en tant que noir transparent dans le imageData (rgba(0,0,0,0)) cela est très courant avec les canvas. Par exemple la méthode fillRect() remplit le canvas de pixels noirs transparents.

Cela peut être gênant puisque le noir transparent se confond avec le background sur lequel est posé le canvas. Ainsi, si vous ne prenez pas peine d’initialiser correctement votre canvas, il se peut que vous ayez des comportement inattendus, par exemple pour des algorithmes de remplissage.

Mettre des pixels dans un canvas :

Cette fois ci il suffira d’utiliser la fonction putImageData. Les paramètres de cette dernière sont ;

  1. imageData = l’objet ImageData ? copier
  2. x = L’abscisse ? partir de laquelle on commence
  3. y = L’ordonnée ? partir de laquelle on commence
  4. width = La largeur du rectangle qu’on désire copier. Cette largeur peut être positive ou négative selon qu’on veuille aller ? droite ou ? gauche.
  5. height = La hauteur du rectangle qu’on désire copier. Cette hauteur peut être positive ou négative selon qu’on veuille aller en haut ou en bas

Cette méthode est apparemment très optimisée pour remplir des canvas, d’après le MDN.