ParisWeb 2015 - Jour 1

Aujourd'hui, je reviens du premier jour des conférences ParisWeb 2015, qui avaient lieu au Beffroi de Montrouge. ParisWeb c'est 3 jours de conférences, j'y vais presque tous les ans et je me suis rendu compte que même si j'avais pris des notes à la session de l'année dernière, je n'avais jamais pris le temps de remettre mes notes au propre pour poster sur ce blog.

Pour éviter que cela se reproduise cette année, j'ai décidé d'écrire mon résumé dès la fin de la journée. C'est à chaud, pas forcément bien construit, mais le voici:

Internet et libertés: pour un engagement des acteurs du numérique

La conférence d'ouverture commence directement par la Quadrature du Net, représentée par Adrienne Charmet. Adrienne nous rappelle que même si notre métier est de travailler dans le milieu du web, une grosse partie de notre vie privée se passe aussi sur le Web. Et même si on pouvait encore croire il y a quelques années qu'on pouvait faire du Web sans s'intéresser à la politique qui tourne autour, ce n'est aujourd'hui plus possible.

Il semble que le monde politique ne comprenne pas le milieu qu'il tente de légiférer, il essaie de calquer des modèles qui marchaient ailleurs sur le modèle international décentralisé qu'est le net. Les aberrations que sont les lois et leur absurdité nous saute au yeux (quand on nous dit qu'on va utiliser une adresse IP pour identifier une personne... Ça nous parait tellement gros et stupide et débile et absurde qu'on ne relève pas, et pourtant...), mais des lois, qui vont réellement influer sur notre existence et celle de nos enfants sont fondées sur ces incompréhensions.

Adrienne nous fait donc un rapide récapitulatif des 4 grosses lois qui touchent au numérique de l'histoire de France récente. Elle appuie sur le fait que nous sommes encore assez gentils aujourd'hui, à nous élever publiquement sur nos sites persos en changeant le fond en noir où en écrivant à quel point nous ne sommes pas d'accord avec ces projets de loi (ce qui est déjà pas mal), mais que nous pouvons aller plus loin.

Si on passe rapidement sur les 4 lois en question on a d'abord la Loi Renseignement, qui à la suite des évènements de Charlie Hebdo, légalise et élargit les pratiques des agences de renseignement. Ces pratiques vont bien trop loin, et il n'est pas possible d'accepter tout et n'importe quoi sous prétexte de lutte contre le terrorisme. Même si la loi est passée, elle est passée en douleur, et ce qui était présenté comme une loi de sécurité, est finalement devenue une loi de liberté publique.

Là encore, la vision du développeur que je suis, quand on me parle de surveillance de masse de la population, on a beau me dire que la surveillance sera effectuée en masse, sans ciblage, et uniquement sur les metadatas, au lieu de me rassurer ça m'inquiète encore plus. Il suffit qu'on dise "metadata" et "algorithme" à un politique et tout à coup ça parait moins dangereux. Que la surveillance soit effectuée par une machine codée par un humain ou par un humain directement, la seule différence c'est la puissance de calcul, qui est des ordres de grandeur plus importante par la machine.

L'argument évident du "si j'ai rien à me reprocher ça ne me pose pas de problème" m'énerve toujours autant. Déjà le simple fait de savoir que tu es surveillé va te faire agir différemment. Ce n'est pas parce que tu n'as rien à te reprocher que tu souhaites étaler ta vie privée, celle de ta femme et celle de tes enfants à n'importe qui. Et toutes les victimes des dictatures, elles non plus elles n'avaient rien à se reprocher, et pourtant c'était tellement plus facile quand on pouvait savoir ce qu'elles disaient à tout moment.

Bref, les arguments généralement évoqués pour faire changer les politique d'avis ont rarement à voir avec ces considérations humaines. Généralement on parle de profits perdus, de compétitivité du pays qui baisse, etc. On prends l'exemple des USA où les GAFA ont fait pression contre le gouvernement pour qu'il se rétracte de SOPA, arguant que si les citoyens savent qu'ils sont épiés, ils auront moins confiance, et que s'ils ont moins confiance ils achèteront moins. En France on argue que surveiller les communications va faire fuir les business qui se basent eux aussi sur la confiance. Ces arguments, aussi véridiques soient ils me dérangent toujours autant comme n'étant pas le vrai fond.

La prochaine bataille sera sans doute sur le chiffrement, qui est attaqué avec le sophisme idiot comme quoi le chiffrement est utilisé par les méchants, alors il faut interdire le chiffrement. Ça empêchera pas les bad guys d'utiliser du chiffrement, mais ça supprimera simplement l'anonymat.

On enchaine donc sur la neutralité du net, sur le principe fondamental de ne pas filtrer les paquets en fonction de leur type ou leur provenance. Envoyer du texte, des vidéos ou des mails fait appel aux même couches sous-jacentes, leur prix ne doit pas être différent. Et surtout, personne ne doit être en mesure de pouvoir payer plus cher pour avoir un accès privilégié.

S'ensuit le classique débat sur le modèle publicitaire en ligne. Celui qui dit que c'est mal de bloquer les publicités parce que c'est le seul moyen qu'ont les créateurs de site de gagner leur vie et qu'en faisant ainsi on les vole. Non, non et non. Je n'ai pas envie qu'un site vienne vomir sur mon écran ses publicités qui clignotent et font de la musique, m'empêchent de lire mon contenu, me piquent de la data sur mon forfait, ralentissent mes pages et vont sniffer mon parcours. Tout ça sans m'avoir à aucun moment demandé mon avis. Donc non, tes pubs tu te les mets où je pense et ne viens pas me faire la morale, merci.

C'est extrêmement intrusif, à la fois sur la partie visible de l'iceberg (une pub qui clignote et vient gêner ma lecture), mais aussi sur toute la partie qu'on ne voit pas et sur toutes les informations que le tracker récupère. La législation européenne qui demande qu'on prévienne quand un cookie est mis me fait bien rire quand on voit tout ce que les régies pubs enregistrent dans des formats bien plus difficile à supprimer que des cookies, sans qu'on ne leur demande rien.

BREF. Le but de la conférence d'Adrienne était de faire réagir, et là dessus je peux dire qu'elle a réussi, je pensais pas écrire autant sur le sujet. Elle nous incite à parler de ces sujets autour de nous, à notre famille, nos amis, nos collègues, poster des articles, montrer que c'est une préoccupation importante, pour que cela devienne une cause politique.

Dev front à mach 1 au quotidien

On continue avec une conférence ultra-rapide de Christophe Porteneuve (comme d'hab). C'était la suite du talk DevAvengers qu'il avait déjà fait à ParisJS, en version à peine updatée.

Je vous invite à lire le CR que j'avais fait sur le sujet car le fond est le même. Christophe nous incite à perdre le moins de temps possible, à profiter des outils qui sont là pour nous faciliter la vie.

À commencer par le browser, dans lequel on peut faire du live edit du CSS, JS et HTML et qui nous propose une completion dynamique de ce qui est chargé au runtime. Le tout marche même en mobile avec un simple câble USB. Ça marche même avec les fichiers minifiés/compilés du moment qu'on fournit les sourcemaps, et on peut même lier les fichiers chargés avec un workspace sur notre disque pour que les changements faits en live soient changés aussi sur disque. Bref, bonheur.

Les DevTools proposent des tas de fonctions comme ça qui ne sont pas forcément très connues, mais qu'on peut apprendre sur codeschool, youtube ou sur html5rocks. Il nous conseille aussi d'utiliser les DevTools dédiés à nos frameworks (React, Angular, Ember ou Redux.

Il nous montre ensuite BrowserSync qui utilise des websockets pour faire du hot-reload de CSS/JS/HTML et même de synchroniser browsers ensemble. Niveau build, lui qui chantait les louanges de Brunch il n'y a pas si longtemps s'est récemment converti à Webpack, cumulé à jspm. J'ai pas encore bien cerné ce que ces deux outils faisaient, il va falloir que je me penche dessus. Par dessus (ou à coté, en dessous, j'ai pas suivi) il propose de rajouter SystemJS qui permet de charger n'importe quel type de module (AMD, CommonJS, Global ou ES6) de manière compatible.

Les deux derniers slides sont allés très vite, j'ai pas eu le temps de tout noter, dommage c'était ceux qui m'intéressaient le plus. J'ai eu le temps de noter qu'il conseillait Chai, Sinon, Mocha pour les tests et BabelJS pour tester de l'ES6 dès maintenant. Ça tombe bien, c'est déjà ce que j'utilise.

CSS Grid Layout

On a ensuite enchainé sur une conférence technique sur le CSS Grid layout et sur cette spec qui n'est aujourd'hui accessible qu'en mode experimental dans Chrome. En quelques mots, l'idée est de pouvoir définir notre layout directement dans le CSS sans avoir besoin de gérer un markup à base de rows et de cols.

Ça va donc plus loin que les vieux float et leur hacks, les table (en HTML ou en CSS) ou même les flexbox. L'idée est de passer un display: grid à un parent, et ensuite tout un nouveau monde de grid-template-columns et grid-template-rows s'ouvre à nous sur les enfants.

La syntaxe est assez complexe et j'ai décroché de l'explication à plusieurs moments. C'est le genre de choses que j'ai envie de tester par moi-même plutôt que d'écouter en conférence. Tous les exemples qu'elle citait sont de toutes façons disponibles sur http://gridbyexample.com.

Au final j'en retiens qu'il y une toute nouvelle terminologie à apprendre pour ce système, mais qu'il permet de définir facilement un layout, même en RWD. Et il permet de définir combien de cells, en hauteur comme en largeur, chaque partie de notre layout doit prendre. On peut même positionner plusieurs cellules au même endroit et joueur sur leur ordre de stack avec zindex. On peut même faire de l'ASCII art pour dessiner notre layout, et une nouvelle unité de mesure, le fr, fait son apparition.

Ça semble extrêmement puissant, j'ai hâte que cela soit mieux supporté pour commencer à tester. C'est un grand pas dans la bonne direction. On s'affranchit des hacks de CSS pour avoir un vrai système de layouting, sans devoir noyer son markup sous un tas de classes pour gérer le RWD.

RGAA 3

Aurélien Levy de Temesis nous a ensuite fait un récapitulatif de ce que la norme RGAA 3 implique. Pour rappel, RGAA signifie Référentiel Général d'Accessibilité pour les Administrations.

N'ayant jamais du l'implémenter sur aucun site, les changement par rapport à la version précédente ne m'ont pas passionné.

OpenID Connect

François Petitit nous a ensuite parlé de FranceConnect et de son implémentation du protocole OpenID Connect. La présentation était très claire, mais on voit bien comment FranceConnect se place au centre d'une interaction où il est à la fois fournisseur d'identité et fournisseur de données.

L'exemple donné était le jeune parent qui souhaite faire une demande à la CAF pour son enfant. La CAF a besoin de son identité et de quelques infos supplémentaires pour faire les papiers. Deux organismes possèdent ces infos: les impôts ou AMELI. L'utilisateur peut choisir de s'identifier avec un de ces deux services, il rentre ses login/pass sur l'un ou l'autre et il est ensuite redirigé vers le site de la CAF avec tous les champs déjà remplis.

En arrière plan, FranceConnect s'est identifié auprès des impôts, a redirigé l'utilisateur, effectué un échange de tokens et récupéré les infos demandés. Ça parait super simple et j'ai hâte que cela arrive plus fortement dans nos administrations.

Webperf 2.0

En début d'aprem, Stéphane Rios de Fasterize nous a fait un état des lieux de la Webperf aujourd'hui. Je m'attendais à apprendre pas mal de choses et j'ai été plutôt déçu. Rien de bien neuf sous le soleil, surtout qu'on avait déjà eu une conférence sur le sujet l'année dernière qui disait à peu près la même chose.

Je sais bien que les bonnes pratiques Webperf ne changent pas tous les ans, et heureusement, mais je m'attendais à en ressortir avec plus d'éléments. On a commencé par voir pas mal de graphiques pour voir pourquoi la webperf c'était bien, puis on a attaqué les points pratiques.

J'ai pas été tout à fait d'accord avec tous les points soulevés d'ailleurs. Dire que la concaténation de CSS est contre-productive car il a un client qui a inliné l'ensemble de ses fonts en base64 dans un fichier, ou qui a atteint la limite des sélecteurs CSS de IE9, c'est se tromper de bataille. La concaténation de CSS est pour moi une bonne chose, à condition qu'on ne mette pas n'importe quoi dedans comme dans cet exemple.

J'ai pas réussi à suivre l'argument qu'il avait contre le lazyloading, comme quoi cela cassait le parseur HTML spéculatif, ni pourquoi mettre les js en bas de page ou minifier ses assets était inutile.

Ensuite on est parti sur quelques techniques de sioux pour charger des fonts en évitant le FOUT (à base de loadCSS), de mettre le CSS du critical path en inline dans le head ou encore de jouer avec les pre-fetch.

Un petit rappel rapide que HTTP2 ça va être mieux dans l'absolu, mais qu'on n'y est pas encore et que ça va casser toutes les bonnes pratiques qu'on connaissait (qui deviendront sans doute même contre-productives).

Point intéressant sur webp, qui est un format d'image supérieur à jpg, mais qui nécessite un lecteur spécial hors browser si les utilisateurs veulent sauvegarder l'image pour la voir plus tard. Coté compression, mozjpeg et lossygif sont toujours les meilleurs.

J'attendais peut-être un peu trop de cette conférence, mais je n'ai pas appris grand chose de neuf. Comme toujours il n'y a pas de silver bullet, plein de choses fonctionnent bien, mais même les bonnes pratiques les plus éprouvées méritent d'être testées en condition réelles sur chaque projet pour voir ce qui est vraiment pertinent.

Creating a culture of code quality

David West de Pinterest nous a ensuite parlé de code de qualité. Sortant d'un an et demi d'Octo, je suis assez familier avec le sujet. Là encore, je n'ai pas appris grand chose, si ce n'est des arguments intéressants pour convaincre d'autres personnes des bienfaits du code de qualité.

Tout d'abord sa définition de la qualité avec laquelle je suis tout à fait raccord:

Quality is pride of workmanship

Quand le code est de qualité, on lui fait confiance, et quand on fait confiance au code on peut le modifier facilement et le faire évoluer rapidement.

Chez Pinterest, ils ont des linters et des tests partout. Ils peuvent refactorer sans crainte et sont même allé plus loin en écrivant un script qui modifie automatiquement leur ancienne codebase en React, et en s'assurant que tout marche bien car les linters et les tests passent toujours!

Il nous a parlé de flow, qui est un type checker statique. Je ne connaissais pas et je vais me pencher là dessus, ça me semble très intéressant. Coté CSS il nous parle de csslint qui permet de checker les propriétés inconnues (souvent dues à des fautes de frappe), les sélecteur vides (sans doute du à un refacto), les propriétés connues pour causer des soucis de perf ou d'accessibilité ou tout simplement pour faire respecter les conventions.

Coté Javascript, ils utilisent eslint et Jest qui utilise le virtual DOM de React et qui du coup leur permet de faire des tests qui vont encore plus vite.

REX Styleguide

On a ensuite eu une présentation du chef de projet front de la refonte du site Relais & Chateaux sur l'importance du styleguide dans une équipe.

Ce document (sous forme HTML/CSS/JS) permet de partager au sein de l'équipe, et avec le client le langage visuel du projet. Il évolue dans le temps et sert à la fois de référentiel et de documentation.

Pour ce projet, ils ont suivi le principe de l'Atomic Design et le document présente donc les différents atomes, leurs groupements en molécules et des exemples d'organismes et de templates.

Il fournit des exemples de code HTML avec le rendu à coté ainsi qu'une liste exhaustive des couleurs et des fonts utilisées, avec un nom unique pour chacune et une représentation de celle-ci. Cela permet à toute l'équipe de parler le même langage.

Êtes-vous au top ?

Et la conférence WTF de ParisWeb, celle qui ne parle pas de Web mais qui en reste extrêmement intéressant quand même. Ici, Nattacha Hennocq d'Orange, nous explique comment rentrer dans un mode de pensée qui favorise la créativité.

On peut par exemple faire des side projects à coté, pour tester des choses nouvelles, mais bien souvent on ne termine pas les side projects commencés. On peut faire des choses plus simples chaque jour par contre, comme essayer d'écrire de la main gauche si on est droitier ou chercher à apprendre quelque chose de nouveau mentalement ou physiquement.

Cela peut être aussi simple que se forcer à se souvenir d'une réunion, qui a dit quoi. Ou compter les mots quand on lit, dessiner les réunions, bref faire des choses pas très compliquées mais qu'on ne fait pas, bien qu'elles soient à notre portée.

On peut se forcer à penser à des scénarios absurdes, écrire des listes de choses sur un sujet précis, faire une mind-map de n'importe quoi, se donner quelques minutes pour dessiner 30 symboles différents dans des cercles, cartographier un problème complexe qui ne comporte pas forcément de solution, mais juste se forcer à trouver des liens et des imbrications.

Beaucoup plus dur c'est faire attention à nos biais cognitifs, qui par définitions nous sont inconscients. Les deux plus flagrants sont celui qui nous fait penser que ce qui me ressemble est mieux, ou que les effets néfastes d'un changement surpassent ses effets positifs.

Ne pas hésiter à montrer son travail, à le partager, à en discuter. Avoir conscience de soi, de ce que l'on fait, de ce que l'on va faire, même dans les quelques secondes suivantes.

J'ai bien aimé l'idée et le coté décalé du reste des autres conférences de la journée.

Hybride

La dernière conférence de la journée a été une des très bonnes surprises. Un bon overview de ce qu'est le web hybride aujourd'hui, les différentes technos et leurs différences. Je me souviens avoir vu un talk à la TakeOffConf qui faisait un état des lieux des bases de données NoSQL général dans le même genre et c'est vraiment un type de talk que j'affectionne beaucoup.

L'histoire du monde hybride a commencé avec Phonegap, qui s'est ensuite fait racheter par Adobe. Puis Facebook a annoncé que le HTML5 était mort et qu'ils partaient en tout natif.

En fait, le soucis du HTML5, c'est qu'il n'existait pas de SDK pour faire des applis mobiles, alors que ceux-ci sont bien présents en iOS et Android. Pour un développeur hybride, il faut partir de rien.

Il y aujourd'hui pas mal de frameworks pour aider à faire ça, avec des méthodes très différentes. D'un coté on a les applications hybrides à base de webview avec HTML/CSS/JS et de l'autre on a celles qui ne font que du JS qui pilote des composants natifs (comme ReactNative). Cette deuxième version est encore assez jeune donc peu stable encore mais prometteuse car elle a l'avantage de ne pas demander de recompilation de l'app.

Coté Webview, il nous a parlé rapidement de Famous, qui est un moteur de rendu à base de CSS Transform3D. Il n'y a aucun élément de UI avec, c'est plutôt réservé à des applications événementielles. On a sinon Onsen UI, qui est le "Bootstrap du mobile".

Mais surtout on a Ionic, qui est un mix entre Angular, Gulp, Sass et Cordova (pour packager le tout en une application standalone). Le projet parvient à lever des millions, est bien suivi, avec une doc bien complète, une communauté active et un écosystème de tooling complet. Il propose même des thèmes qui s'adaptent au device sur lequel ils tournent (iOS ou Android).

Ionic ne supporte que iOS6+ et Android 4.1+, mais avec les dernières versions d'Android il profite de la mise à jour automatique de Chrome. Pour accéder aux fonctionnalités natives des téléphones, il propose son propre système de plugin (qui nécessite de coder la fonctionnalité en iOS ou en Android, et ensuite d'y déléguer l'appel depuis l'appli Ionic).

Aujourd'hui, Ionic est le clair vainqueur du monde de l'hybride, mais si un autre système voyait le jour en remplaçant la couche Angular par du React, il lui prendrait sans doute sa place.

Conclusion

Au final je ressors mitigé de cette première journée de ParisWeb. Je me souviens de mon premier ParisWeb en 2006, où j'avais appris plus en deux jours de confs qu'en 6 mois de veille technologique. Je suis revenu chaque année depuis (sauf en 2012, où je vivais en Nouvelle-Zélande). Je m'étais déjà fait la réflexion l'année dernière, mais c'est encore plus flagrant cette année : je n'ai pas le sentiment d'avoir appris grand chose cette année.

Sans doute parce que j'ai plus d'expérience et que du coup je prends plus mon pied en nouvelles découvertes dans des confs comme dotScale, qui touche quelque chose d'encore neuf pour moi.

Je pense que je ne suis plus forcément la cible de ParisWeb, ou que j'ai mal choisi mes conférences aujourd'hui mais entre celles que j'avais déjà vu et celles qui ne m'ont rien appris, j'ai plus autant cette magie de l'événement qui reste en moi après la fin de la journée.

Mais il reste deux jours d'événement, et j'ai quand même pas l'intention de les rater :)

Tags : #parisweb

Want to add something ? Feel free to get in touch on Twitter : @pixelastic