Jacques Couvreur nous accueille pour cette session 2013 de la conférence Soft-Shake. Ce sont 2 jours de conférences, neuf tracks en parallèle, une centaine d’orateurs, et 300 participants. A noter qu’environ un tiers des présentations se fait en anglais. Une bonne petite conférence donc !

Je vais faire comme Nicolas Martignole (a.k.a. le touilleur express), à savoir que je vais donner pour chaque session mon ROTI, le Retour sur le Temps Investi, autrement dit une note de 0 à 5 qui dénote l’intérêt que j’ai eu à suivre la présentation.

Keynote

Robin Cornelius

Difficile de résumer cette keynote. C’était plus un discours de Robin Cornelius sur sa vie et celle de sa société, Switcher. Mais c’était tout de même agréable de l’écouter parler. Robin fait partie des gens passionnés par son travail, sa société, et que l’on pourrait écouter pendant des heures. Bon démarrage donc…

Votre première application iOS

Marc-Henri Primault

Présenter un langage en l’espace de 45 minutes, c’est compliqué, il y a forcément beaucoup de concepts à montrer. Je pense que Marc-Henri a bien montré les bases, mais il est vrai que la lisibilité du code dans les slides n’était pas extraordinaire. La coloration de certains mots clés en violet sur fond noir n’est jamais bien rendue par un vidéoprojecteur.

Personnellement, j’ai eu du mal à accrocher car malheureusement le format de présentation ne se prête pas très bien à un tel apprentissage, en particulier pour des personnes comme moi qui n’y connaissent pas grand chose en développement iOS. Un ”Hands On” s’y prêterait tellement mieux !

Generating tests from code, or how to test better and faster

Renault John Lecoultre (@renajohn)

Tester une application JavaScript, c’est compliqué. Il existe deux types d’analyse de code : l’analyse statique et dynamique.

La première se concentre à vérifier syntaxiquement si le code est correct. On détectera ici l’utilisation de mauvais patterns, ou du code qui peut présenter un risque fort de bug, comme par exemple l’utilisation du == au lieu du === en JavaScript. Des outils comme JSLint, JSHint ou encore SonarQube sont tout à fait adaptés pour ce type d’analyse. Mais cela a quand même des limites.

L’analyse dynamique va exécuter le code pour en vérifier certaines règles, le cas le plus courant étant l’exécution de tests (unitaires, fonctionnels, etc.).

Renault nous parle toutefois d’un troisième type d’analyse, à savoir l’analyse symbolique. Une rapide recherche sur Google me dit que ”L’analyse symbolique de données consiste en un mode d’analyse de tableaux de données statistiques arbitraires par perception cognitive de la surface expressionnelle du médium.” Bon, je crois qu’on va laisser tomber la définition et voir directement comment Renault l’illustre dans sa démonstration.

Il nous parle de l’outil Unite de sa société BugBuster. L’idée derrière cet outil est de lui fournir une fonction en entrée, et lui va essayer de trouver un jeu d’entrées (inputs) afin de pouvoir tester tous les chemins possibles dans la fonction. Prenons l’exemple suivant :

1
2
3
4
5
6
7

// params : {x: Number}
function puzzle(x){
  if(x)
    return true;
  else
    return false;
}

On le voit, pour parcourir les deux branches de cette fonction, nous devons faire en sorte d’évaluer à true la condition if, puis également à false. C’est là qu’intervient Unite. Il va analyser le code de la fonction pour nous trouver les deux valeurs d’entrée, ici x = 0 puis x = 1. Là où l’outil devient plus intéressant, c’est quand on a du code plus complexe. Prenons un nouvel exemple, avec une fonction de validation d’email (avec une expression régulière simple) :

1
2
3
4
5
6
7

// params : {email: String}
function puzzle(email){
  if(email.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/))
    return true;
  else
    return false;
}

Unite va nous trouver deux entrées possibles : `email = "a" pour l’évaluation négative de la condition, et email = "9@B.PH" pour son évaluation positive.

Je dois dire que l’outil s’avère très intéressant, bien qu’encore à l’état de bêta. Reste la question de l’industrialisation d’un tel outil. Pour le moment, je le vois bien comme utilisation one shot pour trouver un bon ensemble de jeux de données pour tester une fonction. En tout cas, c’est un outil à suivre de près…

Backbone.js et Marionette, le développement JavaScript simplifié

Xavier Bourguignon (@xbourguignon) et Philippe Charrière (@k33g_org)

Backbone est une librairie légère pour faire du single page application (“MVC” / “MVP” côté client). Il se base sur la librarie underscore, pour le templating par exemple. Backbone dispose d’un modèle objet. Son intérêt réside également dans sa facilité d’extension.

Philippe commence à nous montrer des exemples de code avec Backbone. Mais de l’avis de Xavier, ”Backbone c’est bien, sauf la partie vue”. Et c’est vrai que je trouve le code côté vue assez verbeux. C’est pour cela qu’il introduit la librairie Marionette.js, qui joue ainsi le rôle de surcouche à BackBone pour gérer la partie Vue. Ainsi, Marionette permet de faire du vrai Single Page Application avec BackBone.

Xavier et Philippe nous offrent ainsi une vision assez claire de ce framework, en montrant ses atouts mais aussi ses limites. J’avoue que je préfère toujours AngularJS, bien que ce dernier ait un côté un peu plus “magique” que Backbone qui semble plus accessible et plus compréhensible.

Web Components, l’avenir des développeurs web

Julien Vey (@julienvey)

Les applications web sont aujourd’hui de plus en plus riches, et le langage HTML atteint vite ses limites. C’est pour cela que le concept de composants web est arrivé. Il s’agit d’un standard W3C en cours de rédaction, partiellement implémenté par les navigateurs (particulièrement Chrome).

L’idée est de créer des “éléments customs”. Imaginons le bouton “Twitter” que l’on peut ajouter sur son site, afin de permettre au visiteur du site de suivre votre compte Twitter. Si vous regardez le code de ce bouton, vous verrez un truc illisible fait de HTML et JavaScript. Ne serait-ce pas plus simple d’avoir un tag <twitter user="romaintaz"/> par exemple ? De même, un composant pour noter un article n’aurait-il pas plus de sens sous la forme <ranking note="3"/> ?

Eh bien c’est (à peu près) possible aujourd’hui !

Les templates

La première brique à connaître, ce sont les templates. Ils permettent la séparation du fond et de la forme via l’utilisation de <template> :

1
2
3
4
5

<template id="monTemplate">
  // code HTML du template.
  <img src="">
  <div class="comment"></div>
</template>

Ce template est parsé, mais pas affiché. Les balises <script/> ne sont pas exécutées, et les images ne sont pas chargées. Le code ci-dessus est donc parfaitement valide. Pour l’instancier, il suffit d’un peu de code JavaScript :

1
2
3

var t = document.querySelector('#monTemplate');
t.content.querySelector('img').src = "...";
document.body.appendChild(t.content.cloneNode(true));

A ce moment-là, les scripts sont exécutés, les images chargées et le DOM affiché.

Encapsulation

Passons à la deuxième brique : l’encapsulation. Aujourd’hui, on utiliserait des <iframe>. Mais pouah ! Avec les web components, on utilise le principe du ”shadow DOM”, c’est-à-dire du DOM masqué du reste de l’application. Exemple :

1

<video controls src="/ma/video"></video>

Avec Chrome Tools, on peut faire afficher le shadow DOM pour cette balise vidéo, sous un “tag” #document-fragment :

1
2

<div id="host">
</div>

1
2
3

var host = document.querySelector('#monTemplate');
show = host.createShadowRoot();
shadow.innerHTML = '<h2>Hello</h2>';

On peut aussi passer par des templates :

1

shadow.webkitCreateShadowRoot();

Il existe aussi le concept d’Insertion point, avec utilisation de <content></content> dans le shadow DOM. Le contenu de la balise du web component est injecté à la place du <content></content> défini dans le shadow DOM.

On peut aussi utiliser des sélecteurs pour ne récupérer qu’une partie du code HTML du composant web : <content select="h2"></content> qui récupèrera uniquement le code du h2, <content select="h1:first-child"></content> pour le premier élément de h1 ou <content select="*"></content> pour récupérer le reste.

Externalisation

Comment peut-on créer des composants web et les utiliser ailleurs ? Cela se fait grâce à la balise <element> qui permet de créer ces nouveaux éléments :

1
2
3
4
5
6
7
8

<element name="megabutton" extends="button" constructor="MegaButton">
  <template>
      ...
  </template>
  <script>
      ...
  </script>
</element>

Et pour l’utiliser dans une autre page :

1
2
3

<link rek="component" href="megabutton.html">
...
<megabutton>Clique ici</megabutton>

Ces éléments ont également un cycle de vie sur lequel il est possible d’intéragir grâce à des fonctions JavaScript : created, attributeChanged, inserted ou removed :

1
2
3
4

this.lifecycle({
  inserted: function() { ... },
  removed: function() { ... }
})

Mutation Observer

Ces éléments sont utilisés pour détecter des modifications dans le code JavaScript.

Object.observe()

Il s’agit ici du monitoring des modifications des objects JS, bien plus performante que tout autre solution existante aujourd’hui.

1
2
3
4
5
6
7
8

function observeChanges(changes) {
  changes.forEach(function(change) {
      change.name;                  // Name
      change.type;                  // Type
      change.oldValue;          // Ancienne valeur
      change.object[change.name]; // Nouvelle valeur
  });
}

Ainsi, entre le Dirty checking et le Object.observe(), le gain de performances peut être de l’ordre de 20 fois !

Etat actuel

AngularJS apporte sa philosophie, déclaratif plutôt qu’impératif. Les directives d’Angular sont un peu les customs éléments.

Le projet ”polymer.js” vise à intégrer ces nouveautés dans les navigateurs.

Il existe aussi le projet Polymer.Dart pour le langage Dart.

Le site ”Are we componentized yet?”, montre l’état actuel de l’implémentation dans Chrome. Du côté de Firefox, il existe des projets similaires Brick, X-Tag…

Mon avis

Une excellente session où j’ai appris pas mal de choses que je ne connaissais pas !

Du JavaScript propre ? Challenge Accepted!

Romain Linsolas (@romaintaz) et Julien Jakubowski (@jak78)

Présentation tout simplement parfaite, sur un sujet somptueux. Du grand art ! Comment ça, je ne suis pas objectif ?

Bon, si vous voulez en savoir plus, revenez un peu en arrière sur mon blog, j’ai déjà parlé de cette présentation faite avec Julien à Devoxx. Elle a encore plu, ça nous a fait très plaisir !

Make sense of your (Big) Data

David Pilato (@dadoonet)

David Pilato est “évangeliste” (à ne pas confondre avec Eve Angeli !) pour ElasticSearch, un outil très puissant et très sympathique pour faire de la recherche. Associé avec Kibana, David nous montre comment il est possible pratiquement en temps réel de construire un dashboard très complet sur un grand jeu de données - stockées dans des noeuds ElasticSearch. Autrement dit, comment donner du sens à ses données.

J’essaierais de faire un billet dédié, je trouve que cette session est très intéressante car la solution mise en place est fichtrement simple pour un résultat franchement étonnant !