Faites de l’asynchrone synchrone en Javascript !

Après plus de six ans sans améliorations au langage JavaScript, la nouvelle version EcmaScript 2015 a apporté un vent de fraîcheur pour le développeur. Mûrement réfléchie et résolument orientée vers la Developer Experience, elle offre une toute nouvelle gamme d’outils adaptés à des problématiques récurrentes de la vie du développeur.

Lors de Devoxx France 2016, j’ai présenté un live-coding se concentrant sur les nouveaux outils permettant une meilleure gestion de l’asynchrone – une composante essentielle du développement JavaScript. Cet article est une adaptation de cette présentation.

Lire la suite

Session Devoxx France : Développeurs JS, oubliez les migraines !

Logo Devoxx FR

Du 20 au 22 avril 2016 aura lieu la cinquième édition de Devoxx France, qui se définit comme “La conférence pour les Développeurs Passionnés“. Cet évènement rassemble 2500 participants sur une période de trois jours pour assister à plus de 220 présentations.

La conférence s’articule en deux temps. Une première journée nommée University est constituée de conférences au format long permettant d’explorer en profondeur des sujets précis, que ce soit des présentations théoriques ou des ateliers pratiques. Les deux journées suivantes sont dédiées à des formats de talks plus courts, sous la forme de présentations de cinquante minutes, de séances de live-coding d’une trentaine de minutes ou de quickies d’une quinzaine de minutes.

Les sujets évoqués couvrent un périmètre très vaste ; si la plateforme Java est le nerf central de ce rassemblement, on trouve cependant des présentations sur des thèmes aussi variés que le web, l’agilité, le cloud computing, le développement mobile et l’accessibilité. Et cette année, j’y serai également présent pour vous parler de la gestion de l’asynchrone en JavaScript.

Lire la suite

La validation de formulaires dans Angular

La validation de formulaires dans Angular

La validation de formulaire est une problématique récurrente dans la vie d’un développeur front-end. Dans les versions d’Angular inférieures à la 1.3, il n’y avait pas de mécanisme dédié à la validation, et la manière de procéder conseillée tenait alors plus du bricolage que d’une vraie solution.

Heureusement, depuis la v1.3, Angular intègre toute une pipeline de validation ; pipeline encore trop ignorée du grand public, alors même que la v1.2 est très loin derrière nous ! C’est ce à quoi nous allons tâcher de remédier dans cet article, en mettant en place une validation de formulaire sur un exemple concret.

Généralités

Pour commencer, mettons en place un formulaire très simple, par exemple pour créer un nouvel utilisateur :

http://jsfiddle.net/tz8ordr1/19/

Nous allons devoir effectuer quatre types de vérifications différentes :

Lire la suite

Paris Web 2015 : webperfs, CSP et microservices

Paris Web 2015 : webperfs, CSP et microservices

Paris Web

Ceci est la suite de mon compte rendu sur Paris Web. Lisez la première partie en cliquant ici.

Dans ce second article, nous allons parler des sujets Webperf 2.0, Content Security Policy, et microservices, abordés par certains orateurs.

Webperf 2.0

Stéphane Rios nous présente dans sa conférence un état des lieux des performances web, essentiellement du point de vue du chargement des pages web. Son conseil principal est le suivant : il faut sans cesse se tenir informé, car les règles en matière de web performance peuvent changer radicalement et rapidement.

Lire la suite

Paris Web 2015 : ses valeurs, les outils du développeur, OpenID

Paris Web 2015 : ses valeurs, les outils du développeur, OpenID

Paris Web

 

Paris Web est l’un des grands rassemblements annuels et se définit comme étant “le rassemblement francophone de ceux qui font le web”. Ayant eu la chance d’y assister cette année grâce à Viseo, je fais part ici de mon expérience durant ces deux journées.

Impressions générales

Difficile de décrire l’ambiance Paris Web à quelqu’un qui n’y a pas été. J’en ai d’ailleurs fait l’expérience le vendredi soir, en essayant de décrire ce que j’avais vécu (n’ayons pas peur des mots) ces deux jours au Beffroi de Montrouge ! Je vais pourtant essayer une nouvelle fois de le faire, sans virer à la mièvrerie débordante.

Se rendre à Paris Web, c’est un peu comme abandonner son quotidien pour plonger pendant deux jours dans un bain bouillonnant de connaissances, de savoir, d’énergie, d’empathie, d’optimisme et de bonne humeur (oui, pour la mièvrerie, c’est raté…).

Lire la suite

Rest World à Best of Web 2015

J’ai récemment eu l’occasion d’assister à la conférence Best of Web, la réunion de tous les plus grands meetup parisiens. Vous pouvez retrouver le déroulement et le programme global de cette journée sur cet article de Stéphane Blanchon.

Dans cet article, je vais parler d’une conférence qui m’a particulièrement intéressé, étant très sensible au sujet des API Rest. J’en développe en effet quotidiennement dans mon travail au sein de Viseo. Il s’agit de la conférence de Virginie Bardales intitulée – vous l’aurez deviné – Rest World. Lire la suite

Le présent et l’avenir de JavaScript à dotJS 2014

J’ai eu l’occasion de participer à la conférence dotJS 2014, centrée autour de l’écosystème JavaScript. Bien que la conférence dure une journée, des workshops étaient organisés les jours précédents, dont notamment un workshop Polymer encadré par le très connu Addy Osmani (créateur notamment de Yeoman, TodoMVC, Aura), Ewa Gasperowicz et Sérgio Gomes, auquel j’ai eu la chance d’assister.

La conférence est quant à elle assez différente des conférences traditionnelles puisqu’elle regroupe de nombreux talks très courts (une vingtaine de minutes). J’ai pour ma part été mitigé sur cette édition. Adepte des TED Talks – des sessions de 20 minutes sur des sujets variés en général très inspirants – je m’attendais à des interventions du même acabit : innovantes et orientées vers ce qui pourrait être. De fait, la plupart des interventions s’attachaient à dresser un état des lieux d’un aspect de l’écosystème JavaScript actuel, sans pour autant vraiment apporter de pistes nouvelles.

Cela n’est pas une critique sur les interventions en elles-même qui étaient de très bonne qualité, mais plutôt une déception personnelle sur les sujets abordés. Parmi les interventions qui m’ont particulièrement plu, je vais en détailler certaines après être revenu plus en détails sur le contenu du workshop.

Lire la suite

Créez vos tâches personnalisées avec Grunt

Introduction

Dans les deux précédents articles de cette série, nous avons effectué un tour théorique de Grunt et nous avons ensuite mis en place un workflow personnalisé du build d’un projet en utilisant des plugins (ou tâches) Grunt déjà existants. Nous allons maintenant aller plus loin dans la prise en main de Grunt et créer nos propres tâches personnalisées !

Attention ! Dans l’article précédent, nous avions créé des tâches (notamment la tâche build), mais celles-ci n’étaient alors qu’un alias pour exécuter plusieurs autres tâches. Ce que je vous propose à présent, c’est de pouvoir mettre en place de nouvelles tâches lorsque vous ne trouvez pas de plugin pouvant répondre à votre besoin. Comme fil rouge de cet article, nous allons réaliser une tâche Grunt qui servira à définir des variables de configuration suivant l’environnement sur lequel nous souhaitons livrer notre projet.

Imaginons en effet que nous ayons deux environnements sur lesquels nous souhaitons livrer, par exemple un environnement de pré-production et un environnement de production. Imaginons que, pour une raison quelconque, l’adresse courante ait besoin d’être renseignée dans un fichier de configuration. Comme les différents environnements sont situés à des adresses différentes, il peut être intéressant d’automatiser le remplacement de ces paramètres dans une tâche Grunt.

A travers cet exemple, nous allons voir deux façons de déclarer des tâches Grunt, une simple puis une plus évoluée. Lire la suite

Configurer Grunt pour votre premier build en javascript

Introduction

Dans le précédent article, je présentais Grunt d’un point de vue fonctionnel, sans rentrer dans les détails techniques. Ce second article va donc s’intéresser plus directement à l’installation et à la configuration de Grunt pour parvenir à réaliser ses tâches et workflows personnalisés afin de faciliter au mieux le développement du projet. Plus tard, un troisième article vous apprendra comment définir vos propres tâches complexes.

Pour des raisons pratiques, nous allons utiliser comme fil rouge la mise en place des workflows d’une application web présente sous la forme d’une unique page index.html avec du javascript et du CSS.

 

Mise en place

Prérequis

Pour ceux qui n’ont jamais eu l’occasion de travailler avec Node.js / npm, nous allons voir comment les installer. Le mieux serait de l’installer en téléchargeant la dernière version sur le site officiel. Cependant, vous pouvez également l’installer rapidement via votre gestionnaire de paquets si vous être sous un OS Debian-like (pour les autres, voir ce tutoriel), même s’il ne s’agira pas forcément de la version la plus à jour :

Le package npm sera installé automatiquement avec. Il s’agit du gestionnaire de paquets de Node.js. Il va nous permettre d’installer très simplement des tâches Grunt qui sont pour la quasi-totalité référencées sur npm. Il faut savoir qu’il existe deux façons d’installer un package :

  • en global avec npm install -g nomDuPackage, ce qui le rend accessible partout sur votre ordinateur
  • en local avec npm install nomDuPackage, ce qui va l’installer dans un sous-dossier node_modules.

Pour exécuter un fichier javascript avec Node.js, il suffit d’utiliser la commande node monFichier.js.

Lire la suite

Automatisez vos workflows avec Grunt

Introduction

Un bon développeur est un développeur fainéant, c’est un dicton bien connu ! Il nous est tous arrivé d’avoir à effectuer de nombreuses tâches répétitives, ou de devoir enchaîner un certain nombre d’opérations dans un ordre précis et de façon récurrente. Qu’il s’agisse de compiler votre CoffeeScript, votre Sass, ou bien de préparer un projet pour une livraison en production, toutes ces opérations entraînent une perte de temps précieuse et surtout une énorme frustration ! Mais c’est là qu’on réalise la magie du web : pour tout ce qui vous énerve, d’autres ont déjà trouvé une solution !

Grunt à la rescousse

GruntC’est là qu’intervient Grunt. Derrière ce nom étrange se cache un lanceur de tâches Javascript. Si cela est peu parlant pour certains, il faut comprendre par là que cet utilitaire en ligne de commande permet tout simplement d’automatiser toutes les tâches possibles et imaginables ! Grunt peut par exemple minifier automatiquement vos fichiers CSS ou Javascript, lancer vos tests, compiler un projet, vérifier la qualité de votre code, … Et pourquoi ne pas faire tout cela en une seule commande ? Telles sont les possibilités offertes par cet outil basé sur Node.js.

Lire la suite