Même lorsque l'on sort des technologies Microsoft, VSTS peut s'avérer être un allié de poids dans la réussite de vos projets.

Voyons aujourd'hui comment profiter de cet outil pour déployer automatiquement, à chaque modification de code, une application Angular sur Azure.

(lire plus…)

Fin 2015, j'ai écrit un article expliquant comment écrire du code AngularJS en utilisant TypeScript. On avait vu comment déclarer un contrôleur, un filtre, une directive, etc. En reprenant un ancien projet AngularJS, je me suis rendu compte que je n'avais pas expliqué la syntaxe permettant de créer un composant (pour ma défense, cette notion n'existait pas encore et a été apportée par AngularJS 1.5).

On va voir dans cet article comment faire.

(lire plus…)

Lorsque l'on créé des applications avec AngularJS, on se rend vite compte que la dynamicité du langage JavaScript (typage dynamique et langage interprété) rend la maintenabilité du code difficile (notamment les phases de refactoring qui se révèlent très compliquées), et ce malgré les patterns apportés par AngularJS (MVC/MVVM, IoC).

TypeScript résout ce problème en apportant une phase de compilation et un typage statique qui va permettre d'améliorer grandement la maintenabilité de vos applications (et votre productivité par la même occasion). Si vous avez l'habitude d'utiliser AngularJS en JavaScript, le pas pour passer à TypeScript peut paraître difficile à franchir. En JavaScript, on fournit des fonctions factory à AngularJS alors qu'en TypeScript, on travaille avec des classes.

On va voir dans cet article comment chaque type d'élément AngularJS se déclare en TypeScript.

(lire plus…)

De nombreuses études ont démontré que le taux de satisfaction d'un visiteur est fortement lié au temps de chargement d'un site Web (plus de 50% des utilisateurs abandonnent le site après plus de 3 secondes d'attentes, selon des études de Akamai ou de Google). Malgré ce constat et malgré nos connexions de plus en plus puissantes (fibre, 4G, etc.), de nombreux sites sont aujourd'hui encore très lent à charger.

Pourtant, il existe de nombreuses optimisations relativement simple à mettre en place et permettant de réduire ce temps de chargement (cache côté serveur, bundle et minification des fichiers js et css, chargement différé du JavaScript non critique, etc.).

Je vous propose dans cet article de découvrir une de ces optimisations, basée sur le chargement différé d'images.

(lire plus…)

Recently, some of Microsoft guys (some frenchies in addition) released a new tool for web developers: VorlonJS. In a few words, VorlonJS is "an open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript". You can find more information directly on its website : http://vorlonjs.com/ or here Why we made vorlon.js and how to use it to debug your JavaScript remotely.

Because we love this kind of tool, that help us everyday by simplify difficult tasks, and because we love AngularJS too, @PaGury and I (@SebastienOll) decided to participate to this project by creating a new plugin : NgInspector.

The idea behind this plugin is to be able to easily visualize the scopes hierarchy of an angular application and inspect scopes content.

(lire plus…)

Cette année, j'ai eu le plaisir de co-animer une session avec Adrien S. aux Techdays sur les Frameworks JavaScript en environnement Microsoft. Si vous souhaitez voir ou revoir cette session, la vidéo est disponible ci-dessous :

Les vidéos des autres sessions (cette année uniquement pour les sessions en amphi) des Techdays 2015 sont également disponibles : https://techdays.microsoft.fr/programmes/2015/recherche-sessions.aspx

Bon visionnage !

(lire plus…)

Depuis Visual Studio 2012, on peut profiter de la fonctionnalité de publication d'un site Web, directement depuis l'IDE, en faisant simplement clic droit sur un projet Web puis Publish...

Visual Studio Publish Command

De cette manière, on peut déployer un projet Web directement sur un IIS, sur un système de fichier, sur un FTP, etc., en quelques clics. L'un des éléments très appréciable de cette fonctionnalité est de pouvoir lier un profil de publication, représentant la configuration d'une publication, à une configuration Visual Studio (Debug, Release, etc.). Cela permet notamment de profiter du mécanisme de transformation du fichier web.config pour déployer un fichier web.config différent en fonction du profil de publication.

Tout cela fonctionne très bien quand on développe une application Web classique, mais lorsque l'on développe une SPA la configuration de l'application ne se trouve plus dans le fichier web.config, situé sur le serveur, mais généralement dans un fichier JavaScript, situé côté client. Du coup, le mécanisme de transformation du web.config ne peut pas être utilisé pour mettre à jour la configuration de la SPA et donc on perd un gros avantage de la fonctionnalité de publication.

L'objectif de ce post est de montrer comment est-ce que l'on peut profiter de cette fonctionnalité dans le cadre du développement d'une application SPA.

Cette solution ne vient pas de moi, mais de mon collègue Adrien S.. Comme (malheureusement) il ne blog plus, je me suis permis (avec son accord et après relecture) de publier sa solution à sa place.

(lire plus…)

Voilà une bonne nouvelle pour tous les développeurs Web : WinJS devient compatible pour le Web ! Ce qui veut dire que désormais, WinJS pourra être interprété par tous les navigateurs et tous les devices.

Pour rappel, WinJS est une librairie Javascript qui a été créée pour Windows 8. Cette librairie, associée aux langages HTML et CSS, permettent aux développeurs Web de pouvoir créer facilement des applications Windows 8, en utilisant un langage proche du langage Web (même s'il y a quelques spécificités compte tenu du contexte).

Ensuite, on a pu deviner la volonté de ne plus uniquement se limiter à Windows 8 avec l'arrivée de la version WinJS pour Xbox One, puis la version 2.0 ciblant Windows 8.1 et la version 2.1 ciblant Windows Phone 8.1.

Et maintenant, WinJS devient disponible pour le Web.

Pour essayer, rien de plus simple, il suffit de vous rendre sur http://try.buildwinjs.com/ et de tester chaque contrôle (il est même possible d'éditer le code à la volée).

(lire plus…)

Suite aux retours que j'ai eu après avoir posté mon plugin jQuery AjaxWebGrid, j'y ai apporté quelques optimisations :

  • Utilisation du pattern Revealing Prototype
  • Application de quelques Best Practices Javascript

J'en ai aussi profité pour ajouter le support de plusieurs grilles Ajax sur la même page. L'utilisation du plugin n'a pas changé, pour plus d'informations : http://sebastienollivier.fr/blog/javascript/plugin-jquery-ajaxwebgrid/

J'attends vos nouveaux retours.

Breaking change ! Les options refreshGridSuccessCallback et refreshGridFailedCallback ont été respectivement renommées en refreshGridSuccess et refreshGridFailed.

En attendant, vous pouvez trouver la nouvelle version du fichier ici : sor.ajaxWebGrid.1-1-0.js

Le package nuget AjaxWebGrid a aussi été mis à jour : AjaxWebGrid.

(lire plus…)

Dans la série post concernant Javascript, je vais vous parler aujourd'hui de jQuery Validation et plus particulièrement de Unobtrusive Validation.

jQuery Validation est un plugin jQuery permettant de gérer la validation d'un formulaire côté client. Pour chaque input (ou select ou textarea) du formulaire, le plugin va stocker dans un objet JS toutes les règles de validation et les vérifier au submit. Si le formulaire n'est pas valide, le submit est annulé.

Unobtrusive Validation est utilisé pour charger toutes les règles de validation d'un formulaire de manière non intrusive (unobtrusive), c'est à dire sans avoir de JS dans la page HTML. Ce plugin se sert des attributs data-val-* pour déduire les règles de validation au chargement de la page (évènement document ready de jQuery).

Lors d'un projet où l'on modifiait dynamiquement les règles de validation en fonction des choix de l'utilisateur (ajout de nouvelles zones du formulaire, ajout / suppression de champs requis, etc.), on s'est rendu compte qu'une fois les règles de validation chargées, il n'était pas possible de demander le rechargement de ces règles.

Voici deux solutions pour forcer ce rechargement.

(lire plus…)

Anciens Posts »