Mix-it 2016 – Jour 2

Et c’est parti pour la seconde journée du Mix-it ! Avant de démarrer le résumé de cette journée, sachez que Infoq, partenaire du Mix-it a filmé la plupart des conférences et vous pouvez ainsi les voir (ou les revoir) à cette adresse.

The Impact of Code on Society

Joel SPOLSKY
La première keynote de la journée a démarré avec Joel SPOLSKY! Fondateur de stackoverflow.com, de trello.com, créateur du test de Joel, etc…. pour ne citer que ses productions les plus connues. Il est venu nous parler de l’impact du code sur la société, et par conséquent que peuvent avoir les développeurs. Le code que nous produisons est présent partout. Ils nous entourent. Dès le matin, nous l’avons dans nos smartphones, nos montres connectées, etc. Tout les appareils, les applications que nous utilisons tous les jours embarquent du code.

Yes, @spolsky is at #mixit16! Impact of Code on Society. pic.twitter.com/PgJLAPY4iA

— MiXiT (@mixitconf) April 22, 2016

Quelques lignes de code peuvent nous faire gagner énormément de temps. Il cite par exemple un salarié d’Amazon qui est chargé de préparer les commandes dans un entrepôt. Tout ces déplacements lui seront dictés par un algorithme. De plus, le code que nous produisons n’est pas binaire ni dénouée d’humanité. Joel SPOLSKY prend pour exemple les algorithmes de Facebook qui décident ce que l’on va voir sur sa timeline et comment cela peut influencer notre humeur.
Pour terminer cette keynote, l’auteur a présenté pourquoi il a décidé de créer StackOverflow et quel est son business model. Plutôt que de faire payer au développeur l’aide technique en ligne, son idée a été de mettre en place une plateforme d’entraide gratuite mais où les entreprises peuvent payer pour diffuser des offres d’emplois et rencontrer les meilleurs développeurs.

100% Stateless avec JWT (JSON Web Token)

Hubert SABLONNIÈRE
Les problèmes liés à la gestion de l’authentification des utilisateurs sont nombreux. Pour introduire les JWT, Hugo SABLONNIÈRE nous a rappelé les inconvénients des session_ids liés au load balancing, des sticky sessions, la gestion d’un cache distribué, d’un cache partagé, etc. Avec les JWT, la session est géré côté client.
La RFC 7519 stipule qu’un JWT est composé de trois parties : le header, le payload et la signature concaténées par des points.

header.payload.signature

Le header contient l’algorithme d’encodage utilisé par le serveur pour signer le JWT et il est encodé en base64Url.

{"alg": "HS256", "typ": "JWT"}

Le payload va contenir les informations utiles pour le client et le serveur. On trouve par exemple la date de création du token, la date d’expiration du token et l’utilisateur connecté. On peut également ajouter dans ce payload des champs propres à l’application. Le corps du JWT est également encodé en base64Url.

{
   iss : "zenika" (issuer),
   exp : Date d'expiration (expiration),
   iat : Date de création (issued at),
  "sub": "Mon JWT" (subject),
  "name": "Victor Gallet",
  "admin": true
}

Enfin, la troisième partie du JWT est la signature. Pour créer cette dernière, il suffit de concaténer le header et le payload avec un point, puis d’appliquer l’algorithme d’encodage avec un secret.

signature = HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

Voilà! Une fois le JWT émis par le serveur au client, ce dernier doit utiliser un système de stockage comme les cookies ou le localStorage pour échanger le JWT au serveur et donc pour authentifier ses appels au serveur. La signature du JWT garantit son intégrité et la clé secrète utilisée garantie que c’est bien le serveur qui a émis ce token.
Les avantages des JWT sont :

• un load-balancing facile puisque tous les serveurs ont juste à connaître le secret utilisé,
• pas de cache distribué ni même partagé,
• une spécification polyglotte avec une implémentation dans la plupart des langages.

Mais quels sont ses inconvénients ? Et bien, si un secret est partagé entre plusieurs machines….ce n’est plus un secret ! Pour pallier à cela, on peut très bien imaginer un système asymétrique où l’on distribue la clé publique aux différentes machines pour qu’elles soient capables de recalculer la signature. De plus, un autre inconvénient est qu’il n’est pas possible de faire de la révocation de token. Pour corriger ce souci, on inclut dans le payload de notre JWT un JWT-ID, c’est à dire un identifiant. On peut alors avoir côté serveur une black-list des JWT révoqués ou à révoquer.
Ce fût une conférence vraiment bien menée et joliment illustrée par les lemmings. Je ne connaissais pas le système des JWT et j’ai beaucoup apprécié.

Random Talk : Data-Journalism @ RTSinfo – a technical approach

Frederic VERGEZ
Un talk un peu particulier puisqu’il s’agissait d’une nouveauté au Mix-it : le random talk. Sur notre badge était inscrit le nom d’une salle et durant ce créneau horaire, les participants ont du se rendre dans cette salle pour assister à un talk sans en connaître le sujet.
Frederic est développeur, administrateur système, web-designer,….pour la Radio Télévision Suisse. Véritable couteau suisse en informatique, Frederic est venu nous présenter en quoi consistait le travail des data journalistes. Ces derniers recueillent la donnée, la préparent, la stockent, l’analysent et enfin la représentent. Selon le speaker, un des meilleurs en la matière n’est autre que le New-York Times. Il donne pour exemple la visualisation du budget prévisionnel du président Barack Obama. Le travail de data journalist est vraiment touche à tout et demande d’être prêt à tout moment en fonction de l’actualité! Frederic nous a partagé son épanouissement dans son travail, sa soif de nouveauté pour les technologies et sa curiosité pour l’actualité.
Un random talk qui a plutôt bien fonctionné pour moi car personnellement, je me serais sans doute orienter vers une conférence plus technique et pas forcément vers quelque chose de généraliste comme le data journalisme. J’ai également interrogé mes amis qui m’ont donné le même retour. Je trouve que le principe des random talks est une super idée. Les slides de cette présentation sont disponibles ici.

Du produit au business model, en passant par le pivot

Alexis JAMET

Alexis JAMET décide avec ses amis de créer sa propre solution de présentation : bunkr. Leur idée est de révolutionner le monde des outils de présentation. Ce n’est qu’une fois après avoir développé une solution qu’ils se sont posés la question du business model. Comment peuvent-ils gagner de l’argent à partir de leur produit ? Ils pensent dans un premier temps qu’ils peuvent monétiser son utilisation. Malheureusement pour eux, il existe en ligne plusieurs solutions de création de présentation et gratuites! Pour pouvoir vendre l’utilisation de bunkr, ils se tournent alors vers les entreprises pour comprendre leurs besoins. Ils comprennent alors que les entreprises réalisent assez régulièrement des présentations. Des supports qui se ressemblent mais où la seule chose de différente sont les chiffres qui y sont présentées. Voilà! L’idée est née! Ils décident de mettre en place un service de génération de présentation personnalisé pour les entreprises. Aujourd’hui, bunkr est un outil qui a trouvé son public et qui est présent dans plus de 90 pays.

HTTP/2 pour le développeur Web

Brian CLOZEL
Après un rappel des problèmes que pouvaient avoir HTTP 1 et des workarounds pour contourner ces limitations. Le speaker a réalisé une démonstration du multiplexing d’HTTP 2 avec une application Spring Boot embarquant un serveur Jetty. Avec HTTP 2, les communications client / serveur utilisent une seule connexion TCP. On peut facilement visualiser cela dans le navigateur Chrome avec l’outil chrome://net-internals.
Durant cette conférence, on a pu découvrir la prioritization qui permet de donner un poids aux ressources pour prioriser leur téléchargement. Le speaker nous a également présenté la fonctionnalité “server push”. Cette fonctionnalité permet au serveur d’envoyer des ressources sans que le client ait à la demander, typiquement un script, une ressource CSS, une image, etc. La présentation s’est terminée par une seconde démonstration de ces fonctionnalités.
Les ressources utilisées sont disponibles ici.

“Mais tu vas m’écouter, oui ?”

Bertrand COCHET

• la conversation, régit par des codes,
• l’interaction médiée : les interfaces visuelles.

Pour améliorer les interfaces machines, le but est de concevoir son interface comme si un humain se trouve derrière l’écran. On peut reprendre les codes des conversations humaines comme le fait que deux personnes vont discuter tour à tour pour les adapter en tant qu’action utilisateur de notre système. Il est également important de savoir orienter l’utilisateur sur notre IHM, comme dans une conversation lorsqu’on oriente les thèmes abordés ou les réponses. Il est aussi avantageux de retranscrire, d’utiliser au maximum les ressources de la conversation comme le ton de la voix, les non-dits, la posture, la proximité, le silence, etc…. Le déclenchement d’erreurs dans l’application amène à une “production inattendue” dans la conversation. Pour ne pas déstabiliser l’utilisateur,  le système doit répondre par une séquence de réparation. Enfin pour l’auteur, une mauvaise interface est une interface dénouée d’orientation conversationnelle, d’accompagnement utilisateur. Les popups intempestives sont un bon exemple de rupture dans la conversation qui nuisent à l’expérience utilisateur.

Comment un navigateur affiche une page Web

Mehdi LAHMAM
Mehdi LAHMAN s’est intéressé à comment un navigateur affiche une page web. Pour ce faire, il a décortiqué le moteur de rendu WebKit. Ce dernier est utilisé par le navigateur Safari tandis que le navigateur Chrome utilise un fork de WebKit qui est Blink.
En réalité, les moteurs de rendu sont quelque chose de compliqués et de mal documentés. Pour bien comprendre son fonctionnement, le speaker s’est intéressé directement au code source. Il a pu s’appuyé sur une grande force du projet open source Webkit : 80% de tests.
On a pu apprendre par exemple pourquoi il est important d’injecter  les scripts Javascript à la fin de sa page. C’est du au fait que le moteur de rendu va s’arrêter lorsqu’il tombe sur un script car ce dernier peut potentiellement modifier l’arbre HTML ou encore les styles. Cela va bloquer la construction de l’arbre ainsi que le chargement d’autres ressources. Plutôt que de placer son script à la fin de la page, on peut également utiliser les attributs defer ou async.

<script src="code.js" defer></script>
<script src="code.js" async></script>

Ces attributs indiquent au navigateur qu’il peut charger les scripts en parallèle sans bloquer le rendu. On peut les utiliser pour l’injection de librairies externes qui ne modifient pas les éléments de notre page. La différence entre ces attributs est que defer conserve l’ordre de chargement des scripts. A noter que le moteur de rendu du navigateur Chrome est un peu plus malin puisqu’il ne va pas arrêter la construction du RenderTree uniquement dans le cas où le script va modifier le DOM ou le style des éléments.
Pour terminer sur un fait amusant. Quelle est la différence en CSS entre les balises visibility: hidden; et display: none; ? Simplement qu’avec la balise display:none;, l’élément ne sera pas ajouté au RenderTree.
Ce fût une conférence très technique avec un speaker qui connaissait son sujet sur le bout des doigts! Pour ma part, j’ai eu un peu de mal à suivre car il s’agissait de la dernière conférence de la journée. Je commençais à ressentir les effets de la fatigue dans une salle comble où il faisait très chaud. Néanmoins, il est possible de se remémorer ce qui a été dit puisque les slides de la présentation sont disponibles à cette adresse.

De CDO au CODE : l’éducation numérique, la seule véritable transformation digitale ?

Youmna OVAZZA
Durant cette keynote, Youmna OVAZZA est venu nous parler de son virage professionnelle : de comment elle a décidé d’enseigner la programmation aux plus jeunes et pourquoi.
De nos jours, il existe un décalage technologique entre les différentes générations. Les plus jeunes, souvent qualifiés de “digital native” sont familiers avec les nouvelles technologies mais ils ont appris sur le tas sans vraiment comprendre le fonctionnement de leurs outils. Tandis que pour les personnes de plus de 40 ans, l’adoption des nouvelles technologies peux s’avérer difficile.
Par ailleurs, les enjeux du numérique sont multiples. D’une part, le numérique est un facteur d’emplois et malheureusement la France connaît un retard sur ces sujet. Cela s’explique par un problème d’éducation : il y a un décalage entre les programmes de l’éducation nationale et le monde du travail. D’autre part, l’éducation devient de plus en plus un marché. Les jeunes se tournent de plus en plus vers des organismes privés pour leur étude supérieure et les plateformes de formation en ligne se multiplient. Alors comment mariez éducation et numérique ? L’auteur nous propose l’enseignement du code comme solution. Pourquoi ? Car c’est une base commune à toute sortes d’activités. Cela peut permettre aux personnes de comprendre l’arrière plan des applications qu’elles utilisent. Son idée est de se mettre au niveau de l’utilisateur, de créer des projets autour de l’utilisateur dans un contexte agile et tout en s’amusant.
Vous pouvez retrouver les slides de cette keynote à cette adresse.

21st Century Activists Need 21st Century Skill-sets

Idalin BOBÉ
Pour cette dernière keynote de clôture, Idalin BOBÉ nous a parlé de tech-activism. Qu’est-ce que le tech-activism ? C’est mettre au service ses connaissances, ses capacités technologiques à des fins de changement social et ou politique. Cette définition est très large, mais les moyens d’action le sont également. Il s’agit de la nouvelle version du militantisme.

Collaboration happening! Working on the code to make our @littleBits lights blink! #BGCWorkshop @salesforce pic.twitter.com/PLuWIF8YAb

— Black Girls CODE (@BlackGirlsCode) May 21, 2016

Les moyens de protestation ont changé, évolué. Les réseaux sociaux jouent une grande place dans la diffusion d’un message. Savoir les utiliser, savoir créer son propre site web, créer une pétition en ligne sont devenus les nouvelles armes de protestation de notre ère. Suite à l’affaire Mike Brown, une opération de fond avaient été lancé sur une plateforme de financement participative pour mettre en place des cours de programmation et de développement web au sein de la communauté de Ferguson. Les enjeux sont multiples : instruire des jeunes issus d’un milieu défavorisé et développer l’économie locale,
Durant son intervention, l’auteur nous a laissé 30 secondes pour discuter et s’interroger sur comment nous pourrions nous investir dans un mouvement ? De part l’éducation, la transmission aux plus jeunes, la création d’outils, etc… les moyens sont nombreux. Pour ma part, j’ai eu à ce moment là une discussion avec mes voisins sur la vie privée, le scandale de la NSA et les outils d’encryptions.
On a pu ressentir durant cette keynote la passion et l’engagement d’Idalin BOBÉ. En ce qui me concerne, je trouve cela super de voir une personne mettre à profit ses compétences pour aider les autres, s’investir dans sa communauté sans avoir des objectifs vénaux.

Clôture de Mix-it

Le Mix-it c’est aussi le Mix-teen, où de jeunes enfants sont invités à découvrir la programmation, l’intelligence artificielle, les objets connectés, etc.

Les enfants de @MixTeen_Lyon sur la scène pour la clôture de #mixit16! pic.twitter.com/bsm5dqXNqB

— MiXiT (@mixitconf) April 22, 2016

Et voilà, c’est la fin du Mix-it! Comme l’année précédente, se fût une belle réussite. Un grand merci aux organisateurs, aux bénévoles, aux speakers, à la communauté du goût et à toutes les personnes qui ont œuvré pour réaliser le Mix-it. Comme l’année précédente, j’ai trouvé que le mélange technique et agilité a été très bien dosé. C’est agréable de pouvoir voir des conférences poussées techniquement mais aussi de pouvoir soufflé en se rendant à une conférence qui nous invite à réfléchir sur l’analyse conversationnelle, le processus de recrutement où encore l’IA. J’ai beaucoup apprécié le système des random talks : une façon originale de s’ouvrir à d’autres sujets.
Aujourd’hui, les places pour le Mix-it sont chères. Non pas à cause du prix : 50€!! Un tarif plus qu’abordable pour ces deux jours. Mais à cause de la vitesse à laquelle elles sont vendues! Les organisateurs sont conscients que la popularité du Mix-it est grandissante. C’est pourquoi ils recherchent un espace plus grand pour pouvoir accueillir plus de personnes pour les prochaines éditions. On croise les doigts! Encore merci et à l’année prochaine!