Archives mensuelles : janvier 2014

Présentation de Bower

CSS, Developpement Web, JavaScript, ,

La gestion des librairies externes (javascript, css, font, …) d’un projet front end peut rapidement devenir contraignant. Il faut aller sur le site de chaque librairie pour télécharger les fichiers nécessaires et les copier dans votre arborescence projet. Sans compter sur la gestion des mises à jour et des dépendances.

Bower est un outil de gestion de librairies pour le web (NuGet est le pendant pour le monde .NET sachant que celui-ci n’est pas restreint aux librairies .net mais aussi les librairies front end comme jquery par exemple). Développé à l’origine par les équipes de Twitter, il est utilisé par de nombreux projets open source comme Bootstrap, Normalize, AngularJS, ….

La récupération des librairies se fait majoritairement sur Github via git, il faut donc que git soit installé sur votre poste.

Installation

Bower est basé sur Node.js et npm qui doivent également être installés sur votre machine. L’installation de Bower se fait via la commande suivante :

npm install -g bower

Bower est à installer en global via l’option -g afin de pouvoir l’utiliser sur tous vos projets.

Utilisation

Bower se base sur un fichier JSON, bower.json, qui va définir, à la manière d’un package.json en node.js, la liste des dépendances de votre projet.

Voici par exemple, le fichier bower.json pour ma page de gestion de score de volley, avec les dépendances vers jQuery, knockout et modernizr :

{
  "name": "Volley",
  "version": "0.2.0",
  "description": "Application de gestion de score de match de Volley",
  "main": "volley.html",
  "keywords": [
    "volley",
    "game"
  ],
  "authors": [
    "Julien Roy"
  ],
  "license": "MIT",
  "dependencies": {
    "modernizr": "~2.7.1",
    "jquery": "~1.7.2",
    "knockout.js": "~2.3.0"
  }
}

Bower va récupérer dans la plupart des cas, le projet entier de la librairie et le copier dans le répertoire des dépendances (par défaut bower_components).

Liste des commandes

Voici la liste des principales commandes de bower :

  • install : installer toutes les dépendances du projet définies dans le fichier bower.json
  • install package-name : installer une dépendance via son nom (il est possible de spécifier une version spécifique via #1.2.3 ). Utilisez l’option –save ou -S pour que la dépendance soit rajouté dans votre fichier bower.json
  • update : mettre à jour les dépendances d’un projet
  • search : rechercher des dépendances dans le répertoire de bower (possible de rechercher sur bower.io/search/).
  • uninstall package-name : supprimer une dépendance du projet (avec –save ou -s pour supprimer du fichier bower.json).
  • list : affiche la liste des dépendances

Configuration

Bower peut être configuré en utilisant un fichier JSON .bowerrc. Il permet de configurer par exemple le dossier dans lequel seront installées les librairies, le proxy à utiliser, ….

Voici mon fichier .bowerrc qui redéfinit le dossier dans lequel seront téléchargé les dépendances :

{
  "directory": "libs/"
}

Voici le lien vers la documentation.

Liens

Conclusion

Bower est un puissant outil de gestion de dépendances de projet web permettant de facilement installer un nombre impressionnant de librairies (prés de 7900 actuellement). N’hésitez pas à le coupler avec Grunt sur vos projets (déplacer vos dépendances dans un dossier build, concaténation, …).

.NET / Unity : Récupérer un type parmi plusieurs implémentations

.NET, ,

Une application est souvent séparée en plusieurs couches, chacune ayant une responsabilité bien définie :

  • Présentation
  • Accès aux données
  • Gestion des règles métiers
  • …

Afin d’avoir une application maintenable et testable il est nécessaire d’avoir un faible couplage entre les différentes briques de votre application.
Ce découplage passe par des interfaces qui vont définir le rôle de chaque brique et ce quelles sont capable de faire. Ainsi une brique ne sera pas dépendante d’une implémentation mais d’une interface. Par exemple, la couche présentation est liée via des interfaces à des services. Elle ne sait pas qui implémente ses services. La couche de présentation n’a pas de référence à une implémentation particulière des interfaces des services. On pourra ainsi facilement bouchonner (mock : renvoi de données de test) afin de tester plus facilement son application.

C’est la qu’intervient Unity.

Présentation de Unity

Unity est un conteneur d’injection de dépendances. Il fait partie des patterns & pratices de Microsoft. Unity va vous permettre de définir dans votre application qu’elle est la classe qui implémente une interface et va vous retourner pour vous une instance de cette classe.

La configuration de Unity peut se faire de 2 façons :

  • par code (via le méthode RegisterType)
  • par fichier xml

Je préconise de passer par un fichier XML qui lui permet de ne pas recompiler l’application.

Voici un exemple de configuration qui permet de définir qu’il faut utiliser la classe MonService lorsque l’on a besoin d’une interface IMonService.

<unity xmlns="http://schemas.microsoft.com/practices/2010/unity">
    <containers>
      <container>
        <types>
          <!-- Business services -->
          <type type="MyInterfaces.IMonService,MyInterfaces" mapTo="MyServices.MonService, MyServices"></type>
        </types>
      </container>
    </containers>
</unity>

La résolution par code se fait via la méthode Resolve sur le conteneur :

myContainer.Resolve<MyInterfaces.IMonService>();

Implémentation multiples d’une interface

Dans certains cas, il est possible que vous ayez besoin de plusieurs implémentations d’une même interface. (exemple : communication avec des machines ayant un protocole différents. On va ainsi utiliser le design pattern Commande qui va nous permettre d’avoir une seule interface de communication. Les implémentations permettent de masquer les différences de protocoles).
Il est possible de différentier les implémentations d’une même interface en spécifiant lors de la configuration de Unity un nom via l’attribut name.

Configuration par xml

<type type="MyInterfaces.IMonService, MyInterfaces" mapTo="MyServices.MonService1, MyServices" name="MonInterface1"></type>
<type type="MyInterfaces.IMonService, MyInterfaces" mapTo="MyServices.MonService2, MyServices" name="MonInterface2"></type>
<type type="MyInterfaces.IMonService, MyInterfaces" mapTo="MyServices.MonService, MyServices" name="MonInterface3"></type>

Configuration par code

myContainer.RegisterType<MyInterfaces.IMonService, MyServices.MonService1>("MonInterface1" ) ;

La résolution se fera via le code suivant :

myContainer.Resolve<MyInterfaces.IMonService>("MonInterface1");

Liens

SideWaffle : Des templates pour Visual Studio

.NET, Developpement Web,

SideWaffle Template Pack est une extension Visual Studio (lien vers la galerie) qui rajoute des  :

  • Template de projects (extension Browser Link, extension chrome, thème chrome, …)
  • Templates de fichiers (robots.txt, fichiers angulars (directive, controllers, …), fichier de configuration grunt, JSHint Ignore File, Package.json pour NodeJS, plugins jQuery, …)
  • Snippets (Angular Controller, Angular Directive, Angular Service, …)

Cela permet de gagner en productivité avec des fichiers prêt à l’emploi.

Cette extension est open source et il est donc possible de contribuer pour ajouter des templates.

La vidéo de présentation :

EditorConfig : Partager les conventions de codage

Developpement Web,

Afin d’avoir un code cohérent et homogène, un projet doit définir des conventions de codage (type d’indentations, taille de l’indentations, fin de lignes, …) . Celles-ci peuvent être différentes d’un projet à un autre et il peut être chronophage de reconfigurer son éditeur à chaque changement de projet. Le projet EditorConfig permet de définir ces conventions dans un fichier .editorconfig à inclure dans votre projet et fournit un ensemble de plugins qui permettent de mettre à jour votre éditeur automatiquement en fonction de ce fichier. Ainsi, les personnes impliquées dans le projet (développeurs, intégrateurs, …) pourront utiliser facilement les même règles tout en utilisant leur éditeur préféré.

Il existe des extensions/plugins pour la plupart des éditeurs dont :

De nombreux projets l’utilisent tel que jquery, modernizr, ruby, … pour ne citer que les plus connus. A vous maintenant …

Mes Addins/Extensions Visual Studio 2013

.NET,

Cet article est la mise à jour de mon précédent article concernant mes addins Visual Studio que j’avais fait pour la Version 2010 de Visual Studio.

Voici une petite sélection des extensions que j’utilise :

Mes indispensables

  • Productivity Power Tools 2013 : Addin Microsoft qui permet de rajouter pas mal de petit outils pratique. A tester !!
  • Web Essentials 2013 : Ajout de fonctionnalités liées au développement web. Un MUST HAVE pour les développeurs web !!. (Cette extension inclus Emmet (ex-Zen Coding) et JsHint. Je n’utilise donc plus les extensions dédiées)
  • NuGet Package Manager : NuGet est un addin indispensable pour tout développeur .Net qui se respecte (il est inclus par défaut dans Visual Studio). Il s’agit d’un gestionnaire de paquet comme on peut en trouver sur Linux par exemple. Vous sélectionnez une librairie à installer (Log4net par exemple) et NuGet se charge de tout (installation / dépendances / configuration de base). Il permet également de faire des mises à jour facilement.
  • Indent Guides : permet d’afficher les lignes d’indentations dans votre code.

Utilitaires

  • CodeMaid : Une extension qui rajoute pas mal de fonctionnalités permettant d’avoir un code plus propre (Nettoyage de code, Réorganisation, Formatage, …). Je vous invite a regarder la doc pour voir ce qu’il est possible de faire avec.
  • SideWaffle Template Pack : des templates de projets, fichiers et snippets (la présentation de l’extension)
  • File nesting : permet de regrouper automatiquement les fichiers selon leur noms (par exemple : un fichier toto.min.js sera mis sous le fichier toto.js)
  • Trailing Whitespace Visualizer : permet de repérer facilement les espaces inutiles en fin de lignes
  • Outils de génération automatique de documentation
    • GhostDoc : Existe en version Pro payante et en version gratuite. Téléchargement sur le site en laissant son @ mail. J’utilise cette extension à mon boulot.
    • Atomineer Pro Documentation : Je viens de découvrir cette extension qui est très configurable (trop ?) et permet de générer de la documentation dans différents formats : XML, Doxygen (Qt ou Java)
  • Unit Test Generator : Permet de retrouver l’entrée de menu, au clic sur une méthode, permettant la génération d’une classe de test unitaire liée à cette méthode.
  • JScript Editor Extension : Améliore le support du JavaScript dans Visual Studio en ajoutant la fermeture automatiques des parenthèses, accolades, la surbrillance du mot courant, possibilité de réduire une partie du code en créant des régions,…)
  • MultiEdit : Une extension qui permet de faire de l’édition à plusieurs endroits en même temps
  • Pretty Paste : Permet de coller proprement du code dans Visual Studio (mon article de présentation)
  • Regex Editor : Éditeur d’expression régulière.
  • Image Optimizer : optimisez vos images sans perte
  • Entity Framework Power Tools Beta 4 : Outils liés à Entity Framework. Pratique notamment pour générer les entités d’une base existante pour partir sur une approche Code First
  • node.js Tools for Visual Studio : Toutes la puissance de NodeJs sans quitter Visual Studio
  • AutoT4MVC : Une extension qui permet de compiler automatiquement vos fichiers T4 à la compilation
  • Mexedge Stylesheet Extension : améliore la gestion des CSS (affichage des différents style dans un treeview, recherche, …)
  • GruntLauncher : Lancer des taches Grunt sans quitter Visual Studio
  • Chutzpah : Lancer de test JavaScript (gère les principaux framework de test JavaScript comme Mocha, Jasmine, QUnit)

Et vous, quelles extensions utilisez-vous ?