fr.romain:blog:3.0

Un blog qu'il est bien pour le Java

Yo, Man

| Comments

yeoman

yo, qu’est-ce que c’est ?

Aujourd’hui, quand on fait du développement web, et donc en particulier du JavaScript, il n’est plus possible de se passer de bons outils pour développer correctement. Yeoman est l’un d’entre eux. Cet outil est en fait une composition de trois outils :

  • grunt, le ”Ant” du JavaScript, c’est-à-dire un exécuteur de tâches ;
  • bower le gestionnaire de dépendances ;
  • yo dont on va parler ici.

Yo est ce que l’on appelle un project scaffolder, que l’on pourrait traduire en français par “échaffaudeur de projet”. Ok, on n’est pas trop aidé. L’idée derrière ce genre d’outils est de générer le squelette d’une application en fonction d’un contexte donné. Un exemple tout bête : je souhaite démarrer une application avec AngularJS. Plutôt que de passer quelques minutes / heures à configurer les bases de mon projet, je vais utiliser un générateur yo pour me faire ce travail. Une fois exécuté, je n’aurais alors plus qu’à développer mon projet, toutes les bases étant mises en place.

Installation de yo

L’utilitaire yo s’installe via npm, ce qui signifie qu’il vous faudra installer NodeJS si ce n’est déjà fait. Une fois installé, il suffit de lancer la commande npm install -g yo (l’option -g assure une installation globale au système) pour que yo soit installé. Un petit yo -v nous assurera de sa bonne installation.

Utiliser un générateur yo

Concrètement, yo va faire appel à un générateur spécifique pour générer le squelette de notre application. Si je tape simplement yo dans ma console, celui-ci va me propose quelques options (le nombre d’options va dépendre de ce qui est installé sur ma machine) :

1
2
3
4
5
6
7
8
9
10
$> yo
[?] What would you like to do? (Use arrow keys)
> Run the Generator generator (0.4.4)
  Run the Webapp generator (0.4.9)
  Run the Karma generator (0.8.1)
  Run the Mocha generator (0.1.3)
  Update your generators
  Install a generator
  Find some help
  Get me out of here!

Comme vous le voyez, les choix qui s’offrent à moi sont soit l’exécution d’un générateur, soit la mise à jour ou l’installation de nouveaux générateurs. Normalement, seuls les deux premiers générateurs (générateur de générateur yo et générateur d’applications web) sont disponibles initialement.

Admettons que nous voulons créer une application AngularJS. Nous allons donc faire appel au générateur Angular. Deux options s’offrent à nous :

  1. Passer par la commande npm install -g generator-angular, qui installera le générateur ;
  2. Passer par la ligne de commande de yo :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$> yo
[?] What would you like to do?
  Run the Generator generator (0.4.4)
  Run the Karma generator (0.8.1)
  Run the Webapp generator (0.4.9)
  Run the Mocha generator (0.1.3)
  Update your generators
> Install a generator
  Find some help
  Get me out of here!


$> yo
[?] What would you like to do? Install a generator
[?] Search NPM for generators: angular
[?] Here's what I found. Install one? (Use arrow keys)
> generator-angular
  generator-angular-axiom
  generator-angular-beego
  generator-angular-bootstrap
  generator-angular-bootstrap-less
  generator-angular-browserify-express
  generator-angular-caveman2
  generator-angular-cmelion
(Move up and down to reveal more choices)

Dans les deux cas, c’est bien npm qui va s’exécuter pour installer le générateur. Pour lancer la génération, c’est la même chose : soit nous exécutons la commande yo angular (le nom du générateur, sans le generator- devant), soit nous passons par la commande yo et on se laisse guider par l’outil. Attention, yo génère les sources de l’application dans le répertoire courant, pensez donc à créer un sous-répertoire avant.

Là, en fonction du générateur, un certain nombre de questions vont nous être posées, par exemple pour savoir si nous voulons utiliser SASS ou Bootstrap :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$> yo angular

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include Bootstrap and some AngularJS recommended modules.

[?] Would you like to use Sass (with Compass)? No
[?] Would you like to include Bootstrap? Yes
[?] Which modules would you like to include? (Press <space> to select)
>[X] angular-resource.js
 [X] angular-cookies.js
 [X] angular-sanitize.js
 [X] angular-route.js

Une fois la commande terminée, nous diposons d’un répertoire bien configuré. Il est parfois requis d’exécuter les commandes npm install (pour installer les contributions Grunt) et bower update (pour télécharger les dépendances de l’application) afin d’être tout à fait prêt, mais normalement le générateur va se charger de cette opération. Voici les principaux éléments de structure de l’application générée :

1
2
3
4
5
6
7
8
9
bower.json                     -> Déclaration des dépendences pour Bower
Gruntfile.js                   -> Définition des tâches pour Grunt
package.json                   -> Description de l'application
  +- app                       -> Répertoire des sources
  |    +- bower_components     -> Dépendences téléchargées par Bower
  |    + *                     -> Sources de l'application
  +- node_modules              -> Modules NodeJS nécessaires à l'application (essentiellement pour Grunt)
  +- test                      -> Répertoire des tests (Karma et Jasmine)
       +- *                    -> Sources des tests

Comme on peut le voir, yo fait appel à ses deux copains de yeoman pour travailler : Bower et Grunt. En tapant par exemple grunt serve, Grunt va exécuter quelques tâches et démarrer un serveur :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$> grunt serve
Running "serve" task

Running "clean:server" (clean) task

Running "bowerInstall:app" (bowerInstall) task

Running "concurrent:server" (concurrent) task

Running "copy:styles" (copy) task
Copied 1 files

Done, without errors.

Running "autoprefixer:dist" (autoprefixer) task
Prefixed file ".tmp/styles/main.css" created.

Running "connect:livereload" (connect) task
Started connect web server on 127.0.0.1:9000.

Running "watch" task
Waiting...

Grâce à la tâche livereload de Grunt, chaque modification du code va entraîner le rechargement automatique de la page :

1
2
3
4
5
Waiting...OK
>> File "app\views\main.html" changed.

... Reload app\views\main.html ...
Completed in 0.001s at Sun Jun 01 2014 11:02:17 GMT+0200 (Romance Daylight Time) - Waiting...

Comme je le disais plus haut, cela prend à peine une minute, et au final, nous disposons d’une application prête pour le développement.

Créer son propre générateur

Bien qu’il existe tout un tas de générateur, il peut arriver le besoin d’en créer un soi-même. C’est le rôle du generator-generator, qui comme son nom l’indique, génère le squelette d’un générateur. Je vais faire un peu ma faignasse, mais je vais profiter de l’excellente présentation réalisée par Thierry Lau sur ce sujet :

http://lauterry.github.io/prez-yeoman-generator/

Pour résumer, si vous devez vous lancer dans un projet, plutôt que de perdre du temps, passez vite à yo !

Hackathon Société Générale

| Comments

Le mois dernier, la Société Générale était sponsor de la conférence Devoxx France. Une chose assez inhabituelle pour le signaler ! Hé bien ce n’est pas fini, car la Société Générale, avec l’aide de BeMyApp organise ce week-end un Hackathon.

Hackathon SG

C’est quoi donc ?

Le hackathon, à ne pas confondre avec le hackchaton (qui doit sans doute consister à coder avec des petits chatons) est un événement destiné à créer des applications sur un laps de temps assez court, généralement un week-end. Ainsi, pendant près de 48 heures, plusieurs dizaines d’équipes vont concourir pour créer la plus belle application. Le thème est d’”inventer la DSI de demain”. Quoi ce n’est pas clair ? Ok, pour être plus précis, il s’agit de créer des applications ou des services pour aider les développeurs de la SG. Bon, je vous rassure tout de suite, le code est et restera la propriété de leurs auteurs. L’idée n’est certainement pas de faire travailler des gens à l’oeil, mais plutôt de montrer que nous sommes des développeurs sympa et modernes à la SG !

Toutes les informations sur l’événement sont ici : http://hackathonsg.bemyapp.com/

Si vous venez à ce Hackathon, n’hésitez pas à me faire un petit coucou, j’y serais le vendredi soir, où je donnerais d’ailleurs une présentation sur les web components (il s’agit de celle de Devoxx France 2014, mais améliorée).

Retour Sur Devoxx France 2014

| Comments

Devoxx France 2014

Devoxx France 2014

Habituellement, pendant et juste après un Devoxx, je pourri gentillement mon blog avec des billets expliquant en détail les sessions que j’ai suivi, ainsi qu’un billet récapitulatif. Cette année, je vais me contenter du billet récapitulatif, et avec un mois de retard en plus ! Tout se perd…

A vrai dire, tout cela a une raison bien précise : je n’ai vu presque aucune session, car la Société Générale était sponsor cette année, et ça m’a pris un temps fou ! Commençons tout d’abord justement par ces quelques sessions.

Conférences

Créons un web component avec Polymer

Forcément, en tant que co-présentateur (avec une fois de plus Julien Jakubowski), j’étais obligé d’y assister. Le titre n’était pas très vendeur, surtout que Julien a eu l’idée géniale d’utiliser l’API Marvel, mais seulement après le CFP. On aurait ainsi pu proposer le titre Créons un <super-héro> avec Google Polymer. Ca aurait été plus vendeur, mais d’un autre côté, notre salle était pleine ! Petit bémol, la salle était plutôt petite et notre session - pourtant un Tools In Action - n’a pas été filmé. J’ai l’impression que l’équipe des organisateurs a voulu optimiser les salles du sous-sol du Marriott pour avoir plus de TiA et ainsi contenter plus de monde, mais faisant l’impasse sur la vidéo pour certaines. Pas très grave, si vous l’avez manqué, je proposerais bientôt ce sujet sous forme d’un brown bag lunch

Des SSII aux SS3I : Sociétés au service des individus de l’ingénierie informatique

3/5

Ma première vraie conférence est une conférence donnée par deux femmes, Aude Amarrurtu et Betty Moreau, qui sont RH de surcroit ! Le message qu’elles ont voulu faire passer, c’est qu’en France, une très grosse part du développement informatique est gérée par des SSII (enfin, ESN pour ”Entreprise de Service du Numérique”). Je n’ai plus les chiffres en tête, mais le nombre de SSII en France est très important (plus de 10000, allant de 1 employés à plusieurs dizaines de milliers) et leur part de marché tournait autour de 80%. Le tableau des SSII était assez noir, mais comme toujours, il y en a toujours quelques unes qui se démarquent du lot. Une session intéressante, mais qui, j’ai l’impression, donnait plutôt envie de devenir freelance au final…

Au secours, mon code AngularJS est pourri !

2.5/5

Thierry Chatel, formateur sur AngularJS, nous propose une session dédiée aux bonnes pratiques lorsque l’on développe une application avec AngularJS, ainsi que les différentes choses à éviter. J’ai été déçu pour deux raisons. Déjà, Thierry manquait un peu d’énergie comme présentateur, mais surtout cela s’est borné à une énumération de bonnes ou mauvaises pratiques. C’est bien, mais il manquait vraiment du concret, des exemples de code. Je crois avoir attendu 15 minutes avant de voir la première ligne de code Angular ! C’est dommage, le sujet était forcément très intéressant et aurait mérité mieux. En tout cas, ça m’a rassuré sur ma pratique d’Angular, qui n’est pas si pourri que ça :o)

Etendre le Web avec les Web Components

2.5/5

Sur le CFP, j’avais fait deux propositions concernant les web components. Un Tools In Action (retenu) et une conférence. Cette dernière n’a été retenue, sans doute parce que ce sujet a été proposé aussi par Christophe Jolif d’IBM. Il nous a donc expliqué le principe des web components, ce qui était intéressant. J’ai cependant trouvé que la présentation a beaucoup (trop ?) tourné autour de l’implémentation d’IBM des web components, Delite.

Extremist Programming : l’art de s’amuser avec du code

5/5

Une présentation décaléee faite par Eric Lefevre-Ardant et Cyrille Martraire, cela ne peut pas se manquer. Et clairement, ça a été mon gros coup de coeur sur cette édition 2014 de Devoxx France. Tout comme la conférence Boucles étranges : étranges boucles (puzzlers et curiosités) d’Eric lors de Devoxx France 2013, difficile de retranscrire ici le contenu de cette session, qui essayait de nous montrer comment l’art et le développement peuvent cohabiter. Tous les ingrédients d’une excellente présentation étaient présent : présentateurs plein d’énergie et parfaitement complémentaires, des informations intéressantes, de l’humour et des cookies (très bons d’ailleurs). Je recommande sur Parleys, même si la vidéo sera sans doute un peu moins bonne que le live…

Pourquoi vous devriez essayer sérieusement les Object Calisthenics

Un Quickie très intéressant par Guillaume Duquesnay qui nous parle de la programmation avec des objects calisthéniques. Mais qu’est-ce que c’est ? Hé bien ce n’est rien de plus que de la programmation en s’infligeant des contraintes fortes qui sont les suivantes :

  • un seul niveau d’indentation par méthode (pour éviter les if imbriqués par exemple) ;
  • pas de else ;
  • encapsuler tous les types primitifs et String ;
  • un seul point par ligne ;
  • pas d’abréviation (pour les noms des variables) ;
  • limiter la taille des entités (petites classes par ex.) ;
  • pas plus de deux variables d’instance par classe ;
  • utiliser des collections “first class” (pas sûr de trouver une bonne traduction pour ça), c’est-à-dire de ne pas utiliser par exemple des List<String> usernames mais plutôt une classe plus explicite, comme par exemple Usernames.
  • pas de getter / setter / properties

Bon, malheureusement j’ai dû m’eclipser avant la fin de la session, je n’ai donc pas pu entendre ce que ce type de programmation a pu apporter à l’orateur dans sa façon de développer. Mais en tout cas, j’aimerais bien m’y frotter, plus par défi intellictuel qu’autre chose. Peut-être lors d’un coding dojo ?

Sponsoring SG

Grosse nouvelle, la Société Générale (plus exactement le département ITEC de la banque d’investissement) est devenue sponsor de la conférence. Une première, puisqu’habituellement ce sont plutôt des éditeurs ou des SSII qui sont présentes sur ce genre d’événements. Si je n’ai pas initié ce sponsoring (merci aux Alexandres, ils se reconnaitront), j’ai du gérer près de 80% de la préparation de notre sponsoring. Ceci explique aussi que je suis resté les 3/4 de mon temps à proximité du stand SG.

Notre présence dans ce milieu très geek a été plutôt bien vue, même si beaucoup en était étonné. Nous avons pu montrer que nous avons effectivement un esprit geek, et que la banque - du moins la notre ;o) - sait proposer des challenges intéressants et actuels : Big Data, Continuous Delivery, développement web et mobile, Software Craftsmanship, ainsi que d’activités attrayantes comme des Coding Dojo, des Brown Bag Lunches, etc.

Nous avions également un jeu très sympathique, le Trading Challenge (le site ne sera pas forcément disponible encore très longtemps). Le principe est de jouer en bourse (avec des données réelles, bien que légèrement décalées) avec un portefeuille virtuel. A la fin de la journée, quand la bourse ferme, les comptes sont calculés, et les trois meilleurs boursicoteurs repartaient avec de jolis cadeaux : Raspberry Pi, Amazon Kindle et caméra GoPro ! Seul bémol : le dernier jour de Devoxx était le vendredi saint, et donc les marchés étaient fermés. Donc pas de jeu. Dommage ! Autre intérêt non négligeable du jeu : c’est un développement interne, une application web responsive développée avec de l’AngularJS et proposant des dashboards Kibana. Bref, une belle vitrine technologique pour la SG ! Comme quoi on ne fait plus du Cobol :o)

Bilan général

Bien que je n’ai vu que très peu de conférences - j’ai même raté l’enregistrement des Cast Codeurs pour démonter note stand - j’ai encore apprécié cette édition de Devoxx France. L’ambiance, les rencontres, le partage est toujours le point fort de cette conférence,

Le rendez-vous est donc pris pour l’année prochaine, mais cette fois-ci au Palais des Congrès ! Le Marriott - et sa magnifique moquette - va sans doute nous manquer, mais la taille critique de 1500 développeurs était atteinte et il devenait urgent de viser plus haut. C’est donc chose faite !

Si vous souhaitez un compte-rendu bien plus complet, je vous invite à lire celui réalisé par l’équipe de Developpez.com, qui est l’oeuvre de Thierry Leriche-Dessirier et auquel j’ai participé, visible ici

Introduction Aux Web-components Avec Google Polymer

| Comments

Lors de Devoxx France 2014, j’ai présenté avec mon ami Julien Jakubowski un “Tools In Action” sur la création de web component avec Google Polymer.

Peut-être que vous n’avez pas eu la chance de venir y assister. Je vous propose donc une initiation à Google Polymer et aux web components.

Les web components, qu’est-ce ?

Un site internet, c’est un ensemble de pages écrites en HTML (dans la plupart des cas du moins). Aujourd’hui, ces sites sont de plus en plus riches, de plus en plus dynamiques. Les composants qui structurent une page web sont de fait plus complexes. Paradoxalement, le langage HTML est un langage assez pauvre, puisqu’il ne dispose que d’un peu plus d’une centaine de “mots”, les balises. Résultat, il faut généralement bidouiller pour créer un vrai composant. Ainsi, avec Twitter Bootstrap, la création d’un panneau d’onglets va nécessiter d’utiliser les balises de liste (<ul> et <li>) comme cela :

1
2
3
4
5
6
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

Ce n’est pas trop moche, mais cela reste moins lisible que quelque chose de ce genre :

1
2
3
4
5
6
<tabs-pane>
  <tab title="Home" active="true">...</tab>
  <tab title="Profile">...</tab>
  <tab title="Messages">...</tab>
  <tab title="Settings">...</tab>
</tabs-pane>

Or la lisibilité est un critère très important quand on sait que l’on doit passer 80% du temps à lire du code et 20% à en écrire.

Dans le même genre, est-ce qu’il ne serait pas plus pratique d’écrire ceci pour embarquer un tweet dans une page :

1
<tweet tweetId="123456789"></tweet>

Hé bien c’est le but des web components que de proposer de créer ses propres balises HTML et de pouvoir les exporter facilement.

Le standard web component

Finalement, créer ses propres tags HTML n’est pas quelque chose de nouveau, on peut le faire grâce à différents frameworks - comme par exemple avec une directive AngularJS - voire même en pur JavaScript. Mais les web components sont en réalité un standard en cours d’élaboration par le W3C, et c’est là sa force première. Pour être plus précis, il s’agit d’un ensemble de standards, comprennant les briques nécessaires à l’élaboration d’un composant web. Je pense par exemple au shadow DOM ou encore au HTML template.

Ces standards sont toujours à l’étude, mais il existe quelques implémentations pour pouvoir jouer dès à présent avec les web components. Celui qui va nous intéresser plus particulièrement c’est celle de Google, à savoir Polymer.

Google Polymer

Let’s start!

Assez parlé, codons ! Je vous propose de coder une balise progress-bar, basée sur celle proposée par Twitter Bootstrap. Le code HTML est le suivant :

1
2
3
4
5
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>

Commençons par créer une application web toute simple. On va donc s’appuyer sur yo, qui permet grâce à un générateur spécifique de nous créer une application blanche, préconfigurée pour un contexte particulier. On exécute ainsi la commande yo webapp. Une fois la structure générée, un petit npm install puis bower install nous permettent d’être prêt à coder. Pour nos besoins, j’ai un peu épuré le projet, en supprimant quelques éléments inutiles et en enlevant jQuery, qui n’est pas toujours utile.

Grâce à sa pré-configuration grâce à yo, nous disposons d’une tâche Grunt (une sorte de Apache Ant, mais pour JavaScript) serve, qui va nous permettre de modifier notre code et de voir automatiquement le navigateur se recharger pour prendre ces modifications en compte. Il nous suffit donc d’exécuter grunt serve, et c’est tout ! Notre page sera dès lors visible à l’adresse http://localhost:9000.

Première étape, il nous faut ajouter la librairie Polymer à notre projet. On va donc utiliser bower pour gérer notre dépendance, on exécute donc la commande bower install polymer --save (l’option --save permet d’ajouter la dépendance dans le fichier bower.json). Nous disposons maintenant de Polymer dans le répertoire bower_components, mais aussi de platform. Comme je l’ai expliqué, les web components se basent sur un ensemble de briques qui ne sont aujourd’hui pas toutes supportées nativement par les navigateurs. Il faut donc les émuler, via des “polyfills”. Et c’est précisément le rôle de platform.

Voilà notre HTML de base pour bien démarrer :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Polymer</title>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
        <!-- Nos dépendances pour utiliser Polymer -->
        <script src="../bower_components/platform/platform.js"></script>
        <script src="../bower_components/polymer/polymer.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <h3 class="text-muted">Google Polymer</h3>
            </div>
            <div class="footer">
                <p><span class="glyphicon glyphicon-heart"></span> Polymer</p>
            </div>
        </div>
  </body>
</html>

Commençons par créer un élément Polymer pour le composant progress-bar. A noter qu’un composant Polymer doit être composé de deux mots séparés par un - (sans doute pour éviter la confusion avec les “vrais” tags HTML) :

1
2
3
4
5
6
7
8
9
<polymer-element name="progress-bar">
    <template>
    </template>
    <script>
        var module = (function() {
        })();
        Polymer('progress-bar', module);
    </script>
</polymer-element>

On voit trois choses intéressantes :

  • le tag polymer-element qui prend le nom du composant (progress-bar) ;
  • le tag <template> qui va nous permettre d’ajouter le code HTML ;
  • la partie script qui nous permet d’initialiser un objet module qui correspond à notre composant Polymer, ainsi que la ligne Polymer('progress-bar', module); qui permet de l’enregistrer pour l’utiliser par la suite.

On injecte alors le code HTML de la barre de progression dans le <template>, comme suit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<polymer-element name="progress-bar">
    <template>
        <div class="progress progress-striped">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                <span class="sr-only">20% Complete</span>
            </div>
        </div>
    </template>
    <script>
        var module = (function() {
        })();
        Polymer('progress-bar', module);
    </script>
</polymer-element>

C’est bien, mais il faudrait pouvoir définir le pourcentage de progression dynamiquement, dont acte :

1
2
3
4
5
6
7
8
9
10
<polymer-element name="progress-bar" attributes="percentage">
    <template>
        <div class="progress progress-striped">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: %">
                <span class="sr-only">% Complete</span>
            </div>
        </div>
    </template>
</polymer-element>
<progress-bar percentage="42"></progress-bar>

On voit plusieurs choses :

  • il faut définir les attributs passés au composant via l’attribut attributes="percentage" ;
  • dans le code HTML, on peut accéder à cette information via la syntaxe “double moustaches”, “. Les habitués d’Angular ne seront pas perdus !

Changeons un peu notre composant pour donner un min, un max et une value, en laissant à la charge du composant de calculer lui-même le pourcentage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<polymer-element name="progress-bar" attributes="min,max,value">
    <template>
        <div class="progress progress-striped">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="" aria-valuemin="" aria-valuemax="" style="width: %">
                <span class="sr-only">% Complete</span>
            </div>
        </div>
    </template>
    <script>
        var module = (function() {
            return {
                get percentage() {
                    return ((this.value - this.min) / (this.max - this.min)) * 100;
                }
            }
        })();
        Polymer('progress-bar', module);
    </script>
</polymer-element>
<!-- Utilisation dans ma page du web component "progress-bar" -->
<progress-bar min="0" max="20" value="12"></progress-bar>

On voit ici aussi que les paramètres, min, max ou value sont disponibles également dans la partie <script>.

Et si on souhaite change la valeur courante ? Un web component peut être accédé de la même façon que n’importe quel autre élément du DOM, donc un simple bout de JavaScript suffit :

1
2
3
4
5
6
7
<button class="btn btn-primary" onclick="changeValue()">Change value</button>
<script>
    function changeValue() {
        var bar = document.querySelector('#progression'); // On récupère l'objet
        bar.value = +bar.min + (Math.random() * (bar.max - bar.min));
    }
</script>

Il serait sans doute plus propre de proposer des fonctions, comme par exemple updateValue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<polymer-element name="progress-bar" attributes="min,max,value">
    ...
    <script>
        var module = (function() {
            return {
                get percentage() {
                    return ((this.value - this.min) / (this.max - this.min)) * 100;
                },
                updateValue: function(val) {
                    this.value = val;
                }
            }
        })();
        Polymer('progress-bar', module);
    </script>
</polymer-element>

pour pouvoir l’appeler ensuite :

1
2
3
4
function changeValue() {
    var bar = document.querySelector('#progression');
    bar.updateValue(+bar.min + (Math.random() * (bar.max - bar.min)));
}

Externalisation

C’est bien beau tout ça, mais comment je fournis ce web component tout beau à une autre équipe ? C’est simple. Je déplace tout le code du <polymer-element> dans un fichier séparé, par exemple progress-bar.html, puis je l’importe grâce à cette petite ligne dans mon entête de page :

1
<link rel="import" href="progress-bar.html">

Le reste de ma page initiale ne change pas, je peux du coup utiliser mon <progress-bar id="progression" min="0" max="20" value="12"></progress-bar> sans problème. A la limite, je pourrais même sortir le lien vers la librairie polymer et le mettre directement dans mon fichier HTML :

progress-bar.html :

1
2
3
4
<script src="../bower_components/polymer/polymer.js"></script>
<polymer-element name="progress-bar" attributes="min,max,value">
    ...
</polymer-element>

et dans ma page index.html :

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        ...
        <script src="../bower_components/platform/platform.js"></script>
        <link rel="import" href="progress-bar.html">
    </head>
    <body>
      ...
        <progress-bar id="progression" min="10" max="20" value="12"></progress-bar>
    </body>
</html>

Il est (pour l’instant) encore nécessaire d’avoir un lien vers la librairie platform dans la page principale car le import est lui-même un standard en cours de travail du W3C et n’est donc pas supporté nativement par les navigateurs. Il faut donc avoir recours au polyfill de platform pour l’instant.

Voilà un premier voyage dans le monde des web components avec Polymer. D’autres billets viendront peut-être le compléter…

Une Année De BBL à La SGCIB

| Comments

Happy Birthday BBL

Un peu d’histoire

Tout a commencé en novembre 2012, lorsque David Gageot proposa sur son blog de venir faire des ”BBL” au sein des entreprises. Les BBL, ce sont des Brown Bag Lunches, autrement dit des présentations faites par un intervenant (généralement) externe, durant la pause déjeuner. J’en avais parlé ici il y a un an environ.

Je n’ai donc pas attendu pour l’inviter à la SGCIB faire sa fameuse présentation “Du Legacy au Cloud en moins d’une heure”. Pour être tout à fait précis, c’est un autre David, Pilato cette fois-ci, qui sera le premier invité officiel des BBL à la SGCIB, le 9 janvier 2013 pour être exact. Le sujet ElasticSearch aura donc eu l’honneur d’initier une longue série…

Depuis, en une année, nous avons eu environ une vingtaine d’interventions, dont voici quelques exemples :

  • Eric Lefevre-Ardant et Guillaume Tardif pour Boucles étranges, étranges boucles.
  • Tugdual Grall pour Couchbase.
  • Stéphane Landelle pour Gatling.
  • François Sarradin pour la création d’un serveur web en Scala.
  • Nicolas Martignole sur les bons conseils pour réussir une présentation technique.
  • Mathilde Lemée sur Bitman et l’utilisation avancée des caches.
  • Romain Maton pour une introduction à Node.js et 24 plugins chrono.
  • Frédéric Menou pour devenir un Git Jedi.
  • Julien Biezemans sur Cucumber.js.
  • Etc.

Ce que ça nous apporte

La SGCIB est une (très) grosse société. Il y a également beaucoup de développeurs, le public est donc tout trouvé. En moyenne, on tourne à environ 20 - 25 personnes dans l’assistance, le record est tout de même de 45 personnes ! Beau succès.

Avec 45 personnes, les salles commencent à devenir petites

En tant qu’organisateur des BBL@SGCIB, je suis satisfait de voir que le retour est très positif, et à chaque session, de nouvelles personnes souhaitent s’inscrire. Pourquoi viennent-ils ? C’est un fait, le participant aux BBL est plus intelligent, plus réactif et a le poil plus soyeux. Il se dit même qu’ils ont 23% de chances de plus de gagner au Loto ! Plus sérieusement, les BBL sont un formidable lieu d’échange, mais aussi d’ouverture. C’est l’occasion rêvée de découvrir de nouveaux langages, de nouveaux frameworks, de nouvelles pratiques.

Pour celui ou celle qui présente, c’est l’occasion de faire partager sa passion, parfois aussi de faire connaître son travail (nombreux sont ceux qui présentent un outil dont ils sont committeurs officiels). Au final, c’est du gagnant - gagnant.

Et maintenant ?

Si les BBL se sont démocratisés grâce à l’informatique, cela ne doit pas empêcher d’autres thématiques d’en profiter. Et la bonne nouvelle, c’est que la sauce commence à prendre dans le domaine des Ressources Humaines. Le site rh.brownbaglunch.fr a vu le jour en fin d’année 2013, et nous devrions atteindre la dizaine de présentateurs bientôt. Bravo et bon courage à eux !

Personnellement, j’aimerais beaucoup voir des BBL scientifiques à la SGCIB. Qui sait…

Icone par IconDrawer

Devoxx 2013 - Dernier Jour Et Bilan

| Comments

Devoxx 2013

La dernière journée à Devoxx est toujours un peu spéciale. Beaucoup moins de monde, moins de sessions aussi, on sent que la fin est là ! Pour cette dernière journée, comme habituellement pour chaque Devoxx (France ou Belgique), je termine par l’enregistrement du podcast des CastCodeurs.

Devoxx 2013 - Deuxième Jour

| Comments

Devoxx 2013

Voici la deuxième journée à Devoxx version 2013. Pour commencer la journée, la Keynote de Google annonce la sortie de la version 1.0 du langage Dart. Dart est le langage créé par Google au dessus de JavaScript afin de rendre ce dernier plus utilisable, en offrant pas mal de choses des langages Java ou C# comme les classes, un vrai développement orienté objet, etc.

Il a aussi été question du projet Angular Dart, une implémentation d’Angular sur le language Dart.

Mon Programme Pour Devoxx 2013

| Comments

Devoxx 2013

Et c’est parti mon Kiki !

LA conférence de l’année a débuté ce lundi 11 novembre, je veux bien sûr parler de Devoxx ! Pour la 4e fois d’affilée, et la 2e en ce qui concerne la version “World” en Belgique, j’y serais à partir de demain mercredi.

Mon programme n’est bien sûr pas encore défini, mais j’ai noté quelques sessions qui m’intéressent déjà.