Liens de la semaine – Édition #23

Web

.NET

Technologie

Société

Liens de la semaine #20

Web

.NET

Développement

Sécurité

Technologie

Société

Javascript : Apprentissage de concept du prototypage

Je me suis levé ce matin avec une idée en tête. Cette idée est littéralement la première chose qui m’est venue en tête.

Il y a de cela un bon moment que j’ai laissé de côté la certaines notions avancées du langage de programmation Javascript. Force est d’admettre que la tendance au Javascript est loin de s’arrêter et progresse sans arrêt. C’est alors que je me suis dis qu’il est temps de prendre le taureau par les cornes et le maîtriser si on veut avancer.

C’est donc pour cette raison que je me suis dis qu’aujourd’hui serait une journée parfaite pour apprivoiser la bestiole qu’est le prototypage dans Javascript. Quoi de mieux que de l’écrire pour le retenir?

Allons y pour la théorie. Le code suivra par la suite, naturellement. D’accord? Oui? Allons-y!

Prototypes

Un prototype, avec Javascript, est ce qui permet de recréer le concept d’héritage dans un langage comme JavasScript qui n’a pas de notions de classes.

En premier lieu, un prototype est ce qui permet de recréer le concept d’héritage dans un langage comme JavasScript qui n’a pas de concept d’héritage. De plus, une fonction qui a des propriétés de créées sous la propriété prototype va transmettre ses fonctions à ses objets instanciés.

Un exemple de ceci est le suivant :


var x = function func(){
//rien, juste pour l'exemple
}
x.prototype.log = function() {
console.log("2");
}
var a = new x();
a.log(); //retourne "2"

view raw

prototype.js

hosted with ❤ by GitHub

Une fonction x est créée et une fonction log a été associée en prototype. L’objet a ensuite accès à la fonction log comme si elle lui appartenait.

Ce simple bout de code introduit quelques concepts qui peuvent être nouveau lorsque vous provenez d’un monde orienté objet comme moi. C#, en occurence.

Il va de soi que l’objet x est une fonction. Elle agit aussi comme le constructeur de a. Par exemple, si on exécute a.constructor(), le résultat affiché à l’écran sera « constructor ».

Lorsqu’un objet est instancié comme l’est, il obtient en référence les fonctions et proprités du prototype de son objet constructeur. Une autre image pour ce concept est que l’objet construit obtient un pointeur vers le prototype du constructeur.

À ce moment là, Javascript met à notre disposition deux utilitaires permettant de déterminer où se situe notre objet dans la hiérarchie de prototypage.

  • isPrototypeOf : Détermine si un objet donné est le prototype d’un autre. Par exemple, exécuter x.prototype.isPrototypeOf(a) retourne true.
  • La propriété constructor : Retourne l’identité du constructeur d’un objet. Par exemple, exécuter a.constructor === x va retourner true.

Annexe 1 – Création d’objets

En lisant la définition annotée du standard ECMAScript, j’ai appris que je ne savais pas vraiment comment créer un objet. Lorsqu’on vient d’un monde statiquement typé comme C#, les objets s’instancient avec le mot clé new.

Depuis la version 5 du standard ECMAScript, il est possible de créer des objets à la main avec l’aide de la fonction Object.Create. Cette fonction permet de créer l’objets désiré en spécifiant son prototype et ses propriétés.

Conclusion

L’objectif que je m’étais fixé a été atteint. Je voulais apprendre et, finalement, bien saisir le concept de prototypage avec le langage de programmation JavaScript.

Cette question, pendant les deux premières journées où j’ai planché sur la question, a même été jusqu’à me réveiller la nuit et occuper mes rêves. J’avais une réelle intention d’aller jusqu’au bout. Je dois même avouer que c’est la première fois que je me donne autant pour un article.

Ce billet se veut comme la documentation de mes apprentissages sur le sujet. Espérant que cela puisse être utile à quelqu’un, un jour.

Découverte de la semaine : Glimpse

Glimpse est un outil permettant au développeur ASP.NET d’avoir une vue client sur se qui ce passe du côté serveur. Il agit comme l’équivalent de Firebug pour votre code côté serveur.

Installation

L’inclusion de Glimpse à votre projet se fait par NuGet, bien évidemment. La spécificité est reliée à sa configuration dans celui-ci.

Une fois l’installation complétée, votre projet contiendra tous les éléments nécessaires à la mise en action. Il y a notamment votre fichier web.config qui sera modifié pour son utilisation.

En ce qui concerne l’activation, il s’avère que l’outil n’est pas activé par défaut dans votre projet. Il faut visiter l’adresse /glimpse.axd pour accéder à la page de configuration. Avec cette page, vous pouvez l’activer, le désactiver et même personnaliser le nom de session utilisé.

config
La page de configuration /glimpse.axd

Il est à mentionner que les liens présents dans cette page sont, en fait, des bookmarklets pouvant être ajoutés à votre barre de favoris afin qu’ils soient encore plus accessibles.

L’autre utilité de cette page est de vous permettre de réviser vos paramètres de configuration. Bref, un guichet unique pour tous vos besoins.

Utilisation et remarques d’utilisation

En assumant que Glimpse est activé pour votre navigateur, vous devriez y voir une petite icône à l’image de celui-ci apparaître dans le coin droit de votre fenêtre. C’est par là que vous pourrez activer la fenêtre d’inspection de requêtes.

Avec cette fenêtre, il y a un paquet d’informations qui peuvent être consultées. Chaque onglet contient des informations qui vous permettre d’analyser un volet de la requête qui vient d’être exécutée.

Timeline de Glimpse
Timeline de Glimpse

Par exemple, l’onglet Timeline permet de consulter le détail du fil d’exécution de la requête détaillant le temps d’exécution pour chaque étape ainsi que les informations sur les fonctions qui ont été exécutées.

Une autre fonctionnalité très utile est l’onglet permettant d’identifier à quelle route appartient votre requête. Vous pouvez savoir, en quelques clics, si vous avez des routes qui sont inutilisées.

Conclusion

La beauté de tout cela est que Glimpse est un projet open source présent sur Github. Cela veut aussi dire que vous pouvez contribuer au projet si cela vous le dit.

Au moment d’écrire ce billet, le mot a même couru sur la liste de distribution du projet qu’ils étaient à la recherche de contributeurs afin de rehausser la documentation des différentes fonctionnalités de la librairie. Cela peut être une bonne façon de se mouiller et d’apprendre le fonctionnement d’un projet.

Dans ce billet, j’ai présenté uniquement la partie ASP.NET MVC de la librairie. Sachez qu’il y a aussi une adaptation pour Rack (le serveur web Ruby), PHPWSGI (Python Web Server Gateway Interface) et même ASP.NET. Alors, pour moi, il est hors de tout doute que Glimpse va maintenant faire partie de chacun de mes projets à partir de maintenant.

Liens de la semaine #9

Je vous souhaite de passer un agréable temps des fêtes. Profitez de l’occasion pour décrocher de votre ordinateur et profiter du bon temps avec votre famille!

Développement

  • Intéressant : Firebase, une base de données destinée à une utilisation côté client. Est hébergée totalement dans le cloud.
  • Qu’est-ce qui se passe lorsqu’on vous oblige à utiliser MSBuild pour votre intégration continue. Amusante et très drôle prise de positions agencée d’images sur certains sujets associés au développement web.
  • De quelle façon vous vous y prenez pour lire du code? Une expérimentation avec une visualisation des interactions entre le sujet de test et le code en question.
  • Un bogue? À qui la responsabilité? Une belle histoire d’un développeur de longue date ayant même développé sur le jeu Stat Craft.

Web

.NET

  • this.Log(), une extension C# permettant le logging sans trop de friction et fonctionnant avec une majorité de frameworks de logging comme log4net, par exemple. Disponible sur NuGet, aussi.
  • La mise à jour ASP.NET and Web Tools 2012.2 arrive à grand pas. La Release Candidate a été dévoilée cette semaine.

Informatique

Science