Le Devfest Nantes s’est achevé, et force est de constater que nous nous sommes régalés de nouveau ! Et quoi de mieux que de partager avec vous cette superbe expérience que nous avons vécue avec cet article ? Nous vous souhaitons une très bonne lecture 😉

Start using css grid layout today

Rachel Andrew
Le présentation débute sur les raisons qui ont conduit à mettre en œuvre un nouveau mécanisme de positionnement des objets graphiques dans une page web.
Aujourd’hui, la position la plus souple est l’utilisation de flexbox (doc ici ou là) mais le défaut majeur de cette approche vient de la contrainte de positionnement ne s’effectuant que sur une seule dimension : la largeur. C’est pratique pour afficher des miniatures de photos mais pour une page d’article, l’ordre vertical des éléments ne sera pas respecté.
Rachel introduit alors le “css grid layout” qui permet de définir des contraintes horizontales et verticales de positionnement des éléments graphiques (spécification W3C). Cela permet de distribuer automatiquement les éléments sur une largeur sans avoir à connaître leur nombre ou à éviter d’utiliser plusieurs hacks en fonction de la taille de l’écran.
Cette propriété se définit dans l’attribut “display” :

.monElement {
   display: grid
}

De nombreux exemples ont été énumérés dont voici un codepen illustrant ces nouveautés.
Il est également possible de nommer la zone dans laquelle un bloc doit être positionné en valorisant les attributs grid-template-columns et grid-template-rows :

#grid {
 display: grid;
 grid-template-columns: 150px [item1-start] 1fr [item1-end];
 grid-template-rows: [item1-start] 50px 1fr 50px [item1-end];
 }

Un élément “item1” sera alors créé et accessible en CSS via “#item1”
Cette fonctionnalité étant très récente (les outils de dev de Firefox sont les plus aboutis sur sa prise en compte), il est possible d’utiliser le “feature query” : une annotation css pour connaître si une fonctionnalité est supportée par le navigateur : @supports.

Rachel explique également comment normaliser des nouvelles fonctionnalités dans les navigateurs et au W3C : ce travail est long, très long…
Ressources :

• https://github.com/w3c/csswg-drafts
• https://rachelandrew.co.uk/speaking/event/gdg-nantes
• https://www.slideshare.net/rachelandrew/devfest-nantes-start-using-css-grid-layout-today

📽️ Revivez la session en vidéo

Découvrir Android Things, et exterminer les reptiliens

Gautier Mechling
Quand on est un super-héros, le plus dur finalement est de repérer le super-vilain. À ce sujet, Gautier Mechling est bien organisé. Découvrez qui sont les méchants, comment il nous ont infiltrés, et comment les détecter grâce à sa super camera ! (tensorflow inside)
Et que faire quand vous les avez repérés ? les exterminer pardi ! Gautier configure son raspberry PI pour tester différentes solutions, certaines très enflammées. Avec un budget minimal, un peu de code, quelques périphériques Android, Gautier vient sauver le monde grâce à Android Things.
Vous pouvez refaire tout ça à la maison et devenir un super-héros vous aussi. Android things is super easy.
📽️ Revivez la session en vidéo

La place du numérique dans l’hôpital de demain

Yannick Dautcourt / Anthony Gorson
Yannick et Anthony nous présentent les travaux en cours à l’hôpital de Nantes et la raison qui les motive.
L’hôpital de Nantes c’est neuf établissements répartis sur toute la ville. Il faut donc développer des systèmes afin d’améliorer la prise en charge des patients et de leur dossier médical.
Les contraintes budgétaires demandées aux hôpitaux les incitent à privilégier la prise en charge de jour. Toutefois, il faut dans ce cas que le parcours de santé soit efficace et cohérent car dans une même journée, un patient peut rencontrer plusieurs spécialistes.
Un ERP est utilisé afin de permettre aux professionnels d’accéder au dossier du patient de façon centralisé.
Il faut savoir, que la réglementation oblige les médecins à rédiger un compte-rendu pour chaque patient rencontré. Jusqu’ici, les médecins les enregistraient sur dictaphone et une secrétaire médicale les retranscrivait sur papier, ce qui pouvait prendre plusieurs mois. Or, dans le cas des urgences, les patients doivent ressortir avec ce compte-rendu, chose impossible actuellement. C’est pourquoi une expérimentation est menée avec SpeechMike, un micro qui permet de retranscrire directement les comptes-rendus que dicte le médecin dans l’ERP.
Afin d’accéder au dossier médical, les médecins sont obligés d’utiliser un PC fixe car le logiciel n’existe qu’en desktop. Cela implique d’installer des PC partout dans les salles de consultation, d’en mettre sur des chariots… Une expérimentation est en cours pour développer une version mobile pour pouvoir utiliser une tablette.

“Mais la technologie ne s’arrête pas là„

Des chirurgiens utilisent les casques VR Hololens de Microsoft afin de préparer les opérations. Ainsi, afin d’utiliser une prothèse à l’épaule, les médecins n’ont plus besoin d’installer un guide car il peuvent anticiper la meilleure façon de placer la prothèse. Cela permet de réduire le temps d’hospitalisation ainsi que les risques.
Combiné à l’ERP, cela permet au patient de rentrer plus rapidement chez lui en ayant un accès via un portail (télé-expertise) aux professionnels qu’il a rencontrés. Cela lui permet également de prendre rendez-vous ou d’avoir un rappel de ses prescriptions médicales.
L’hôpital de Nantes lance tous les ans Digital for life, un appel à défi public pour trouver de nouvelles idées et accompagner les projets retenus. Les moyens nécessaires sont alors mis en place comme par exemple le prêt de matériel médical ou biologique.
Il y a aussi la problématique permanente de la sécurisation et de l’anonymisation des données…
📽️ Revivez la session en vidéo

Développeur et protection de la vie privée

Erwan Richard
Erwan a sondé l’audience pour connaître le taux de personnes ayant déjà dû implémenter une fonctionnalité éthiquement non acceptable voire illégale. Il en ressort que la moitié des sondés (~140) n’ont pas eu à réaliser cela mais que 10% auraient implémenté du code illégal.
(Trop ?) peu de monde constatent que beaucoup de sites internet demandent de nombreuses informations personnelles, comme la date de naissance, le sexe ou encore la profession, au moment de l’inscription sans que cela soit indispensable au bon déroulement de la navigation et de l’achat qui en découle. Généralement, ces informations ne sont pas nécessaires pour la finalité même du site mais sont exploitées à des fins marketing.
Généralement, l’utilisation de ces données reste pour le moins flou et elles circulent beaucoup à l’insu de l’utilisateur. La vie privée de l’internaute n’est pas préservée.

“Les dev sont souvent le dernier rempart aux pratiques non éthiques„

Pour mieux cadrer ces différentes dérives, le cadre législatif évolue avec la mise en place de la GDPR pour encadrer l’utilisation des données collectées par les différents site internet en imposant un consentement sur la capture des données de navigation, une durée de rétention, un droit à l’oubli, une pseudonymisation et des sanctions (jusqu’à 4% du CA mondial).
📽️ Revivez la session en vidéo

Les API gateway avec Kong

Mathieu Humbert
Une API Gateway est un reverse proxy permettant de masquer l’architecture applicative derrière une façade tout en ajoutant divers traitements comme par exemple l’ajout de logs, la gestion de l’authentification ou un cache de requêtes / réponses.
Kong est un projet libre et open source implémentant ce type de fonctionnalité.
Il est basé sur NGINX dopé avec des plugins écrits en LUA et s’interface avec Apache Cassandra lors d’une utilisation maitre / esclave.
Les fonctionnalités de base de Kong sont les suivantes :

• Logs
• Authentification (Basic, OAuth 2.0, JWT…)
• Prise en charge de CORS
• Cache
• Mesure des temps de réponses
• Répartition de charge
• Contrôle de trafic (limitation de l’utilisation de bande passante, filtrage sur IP…)
• Adaptation de protocoles (par le biais de l’utilisation de plugin spécifique XML vers JSON)

La configuration de Kong s’effectue via une API Rest, utilisable via curl par exemple. Il existe des interfaces graphiques d’administration mais ce n’est pas la priorité du projet.
L’API de management de Kong est très riche et permet par exemple d’ajouter une API sur une route (mapping d’un context root sur une ressource en aval), d’activer ou de désactiver un plugin par route ou globalement, de mettre à jour l’ip d’une ressource, etc.
Kong peut être placé en frontal devant des serveurs d’applications pour fixer une interface cliente mais également au milieu d’une architecture micro service pour prendre en charge facilement les déploiements blue / green, l’ajout de Correlation IDs…
📽️ Revivez la session en vidéo

Documentation as Code (expliqué à mon père)

Hubert Sablonnière
Hubert présente l’approche la plus pragmatique pour écrire un livre sans être perturbé par la notion de mise en forme : un outil tel que Word ne permet simplement pas de reporter la mise en page à l’étape finale de la rédaction. Les langages à balises tels HTML voire LaTeX sont d’un autre côté trop verbeux.
Un parallèle est effectué entre un auteur vis-à-vis de son livre avec un développeur vis-à-vis de son code.

“Mon père est agnostique de la documentation as code„

La rédaction d’un papier peut être déclinée en trois étapes : écriture, collaboration, publication.
Écriture
D’abord écrire le contenu sans se soucier de la mise en forme, notion de “Separation of concerns”. Exemple avec HTML et CSS (voir CSS Zengarden qui présente un HTML mais avec une feuille de style différente), ou docbook (xml trop verbeux) voire LaTeX (trop complexe, [N.D.L.R, et faut que ça compile !])
AsciiDoc : très peu de métadonnées autour du contenu pour la mise en forme
Une phrase par ligne, une ligne vide un nouveau paragraphe ⇒ la rédaction est plus facile. La syntaxe est proche du markdown.
Le speaker explique qu’en utilisant les raccourcis de son éditeur de texte comme nous le faisons avec notre IDE favoris, nous devenons alors plus productifs.
Doc as Code permet de faire du DRY
⇒ Définition de variable (version du manuel utilisateur de l’application)
⇒ include de fichier
Collaboration
AsciiDoc ❤️ git : une phrase par ligne permet de faciliter les diffs, le rich diff de github permet de visualiser les différences plus facilement.

“Le futur est de pouvoir collaborer avec des gens„

Comme dans une équipe de dev où un lead dev s’occupe, entre autre, de l’homogénéité du code, le “lead éditeur” se porte garant du ton et du choix des mots.
Dans le mode de la publication, la revue de code se nomme “revue de contenu”.
Publication
Asciidoctor = moteur de transformation convertissant des fichiers asciidoc en plusieurs formats.

Intégrer son contenu asciidoc à une chaîne de CI et CD pour le publier dès que les PR sont validées.
De nombreux projets utilisent ce format pour produire de la doc :

📽️ Revivez la session en vidéo

L’UX a sauvé mon Devops

Estelle Landry / François Teychene
François rappelle ce qui gravite autour du mot “DevOps” : “mot hype, c’est une culture”, mais attention, “DevOps != NoOps” où il ne faut pas chercher à supprimer les Ops.

Estelle décrit l’UX en utilisant la métaphore du menhir d’Obélix qu’il emmène partout, en expliquant que l’UX accompagne tous les projets. L’objectif de l’UX est que les utilisateurs puissent prendre en main facilement une application en en profitant au maximum et sans encombre.

La peine éprouvée par l’équipe Ops de François est que les Devs ne se soucient pas de leurs travaux et qu’ils sont en permanence à traiter de l’événementiel (demande de travaux par tickets) et sur de l’urgence plus que sur des problématiques de fond.
Estelle a facilité la collaboration des deux équipes en mettant en place plusieurs ateliers de travail et actions.
Le pendant avec l’UX qui permet un engagement de l’utilisateur au niveau d’une application a été transposé aux devs, utilisateurs de la démarche devops.

Voici les différents points abordés :

• Afficher la trajectoire : un tableau explicitant qui travaille sur quel sujet et quand la date de MEP est prévue ;
• Atelier pour comprendre les problématiques des devs ;
  • Les 5 pourquoi
  • Speed boat
  • 6 chapeaux de Bono : neutralité, émotions, créativité, pessimisme, optimisme, organisation
  • Les personas

Au final, ces différentes démarches ont permis un rapprochement des cultures dev et ops et a illustré le fait de ne pas se fier aux apparences ni de se mettre des barrières en terme d’idée sur les besoins.

📽️ Revivez la session en vidéo

Curiosité dans les stands

Le devfest est également l’occasion de voir des curiosités atypiques. en voici quelques photos.
Stand Epitech : un fauteuil de conduite immersif de formule 1 avec des lunettes RV

Le staff du devfest s’offre une petite pause 🙂

Compteur de tweet sur le stand Zenika (animé par un raspberry pi zero et quelques moteurs pas à pas)

Bras robotisé qui aurait pu servir la bière sur notre stand !

Robot collaboratif IIWA

Maxence Labusquière / Marija Goranovic
Le début de la conférence rappelle les différentes révolutions industrielles pour terminer sur le fait que nous vivons la 4^e révolution industrielle : le monde du tout numérique avec l’omniprésence des objets de type IoT.

• Industrie 1.0 : machine à vapeur
• Industrie 2.0 : électricité
• Industrie 3.0 : révolution industrielle des années 70
• Industrie 4.0 : smart house, IoT industriel, Mass customisation (exemple : écriture personnalisée sur des chaussures de série)

L’industrie 4.0 et en particulier le phénomène de « mass customisation » nécessite une accélération de l’innovation robotique pour rendre les usines et lignes de production de plus en plus agiles et configurable. Non seulement avec de nouveaux produits, mais aussi en permettant a de plus nombreuses personnes de développer des applications robotiques en concevant par exemple des API avec des languages non propriétaire (Java) ou en favorisant « l’easy programming »- programmation par blocs fonctions. Maxence rappelle qu’un programme qui plante peut être la source d’un accident mortel et que le développement d’un robot est sujet à de nombreuses normes de sécurité.
Le robot présenté, L’IIWA est le premier robot collaboratif respectant les normes industrielles . L’IIWA est capable de ressentir son environnement grâce à trois capteurs d’effort sur chaque axes (7 Axes en tout). Sa forme et son poids léger permettent, qu’un humain ne se coince ni une mains ni un bras lorsqu’il bouge ou de pouvoir s’arrêter rapidement en cas d’urgence.
La production de bras robotisé a sérieusement augmenté ces dernières années et leurs installations éparpillées sur les sites industriels ne facilite par leur mise au point. En effet, les industriels sont habitués à se déplacer avec une machine munie d’un câble ethernet pour le déboguer, puis démarrer un eclipse, uploader le programme et repartir. L’objectif est de mettre en place une centralisation des accès.
Ce robot est capable de ressentir l’effort comme un humain ce qui permet de ne plus seulement travailler par asservissement en position mais par asservissement en effort. Cette innovation permet au robot de s’arrêter si il touche quelque chose d’imprévue et est donc indispensable pour développer des applications collaboratifs. Elle permet aussi d’inventer des nouveaux process ; par exemple des insertions précises de pièces que l’on arrive pas à automatiser, en simulant le tâtonnement comme un humain.
Désormais, les robots travaillent avec des algorithmes d’asservissement par l’effort (exemple : mécanisme de ressort codé logiciellement) à la différence de l’asservissement en position qui s’attache coûte que coûte à atteindre la position (avec les risques de cogner un objet lors de la trajectoire sans s’en rendre compte).

Le développement en Java s’effectue au travers d’appels de composants OSGI masquant la complexité d’appel et s’assurant que le dev ne contourne pas les règles de sécurité (même par réflexion). De plus l’application Java tourne sous Windows et communique avec le module de pilotage du robot s’exécutant sous VXworks (OS temps réel dur).
Lorsqu’un scénario de manipulation d’un robot échoue, plusieurs sources matérielles peuvent en être la cause et seulement en dernier se trouve le logiciel.

📽️ Revivez la session en vidéo

Docker for developers and ops : what’s new and what’s next

Patrick Chanezon
Patrick explique que l’approche Docker peut être assimilée au Tao : son utilisation doit se faire sans effort.
Plusieurs annonces faites à la DockerCon 2017 sont re-transcrites :

• MTA : Effortless action : faire rentrer une vieille application dans des conteneurs sans aucune modernisation de l’application. Docker est maintenant en mesure d’intervenir sur des projets en entreprise pour monter un POC en mettant une application dans un conteneur sans aucune modification de celle-ci. Le résultat attendu est une mise en œuvre rapide de la solution avec une mise en perspective sur le parc de la société auditée.
• Patrick revient sur les 3 grands principes de Docker :
  • “Independance” : ne pas être lié à une solution sous-jacente ni à une société externe
  • “Openness” : l’intégralité du code de Docker est disponible en licence libre
  • “Simplicity” : des concepts compliqués comme l’orchestration des conteneurs doivent rester une opération à la portée de tous
• En écoutant la communauté, Docker s’est rendu compte que tout le monde n’utilisait pas l’orchestrateur Swarm mais plutôt Kubernetes. La prochaine version de Docker supportera l’intégration avec Kubernetes en parallèle de Swarm !! 👍 ✌️ La livraison est prévue pour Q1 2018 mais est déjà disponible en bêta.
  Ainsi, il sera possible de démarrer une stack docker-compose soit sous Swarm soit sous Kubernetes.

📽️ Revivez la session en vidéo

Past, Present, and Future of Web Assembly

Alexandre Morgaut
Vous êtes un super-héros sans super pouvoir ? Le Web Assembly est fait pour vous ! Grâce au wasm, les plus beaux codes C ont un bel avenir sur le web. La performance est désormais au rendez-vous.Alexandre Morgaut vous explique votre nouveau super pouvoir : d’où il vient, les pionniers (asmJS, EMScripten), sa forme actuelle de standard W3C, des exemples de code…
wasm est désormais supporté par les navigateurs populaires. Qu’attendez-vous pour l’utiliser ?
Alexandre imagine même les utilisations futures du Web Assembly, histoire de ne laisser aucune chance au mal. Vous êtes prévenus.
📽️ Revivez la session en vidéo

On the path to WebAR

Alexandra Etienne / Jerome Etienne
Vous connaissez beaucoup de couples de super-héros ? Je vous présente Alexandra et Jerome Etienne, spécialistes de réalité augmentée, et plus particulièrement dans le contexte mobile et web. Oui, faire de l’AR dans le web, c’est possible et facile !
Où en sommes-nous aujourd’hui ? Comment passer les contraintes du web et des smartphones ? Qu’est-ce que AR.js, LA librairie pour faire de l’AR web ?
Alexandra et Jérôme vous livrent tout : l’historique de la techno, le code minimal pour en faire aujourd’hui, des exemples décoiffants, la technique du canard…
Tout ça risque de s’accélérer, Apple venant de sortir ARKit, et Google ARCore.
📽️ Revivez la session en vidéo

Reactive Brain Waves

Uri Shaked
Professeur Xavier est impressionnant. Mais Uri Shaked, lui, est ébouriffant ! En live, il va vous montrer ses super pouvoirs de télépathe. Devant vous, il va changer la couleur d’une ampoule en clignant de l’œil !
Belle démonstration d’Uri avec du web bluetooth, un casque encéphalographique, une ampoule connectée, du live coding RxJS et Angular, et beaucoup de clins d’œils !
Faire du bluetooth en web est désormais une réalité.
📽️ Revivez la session en vidéo

La blockchain du crétacé à l’an 3000

Benjamin Fontaine
Les crypto-monnaies et la blockchain sont sur toutes les lèvres. Avec le succès technologique du bitcoin, l’aventure blockchain ne fait que commencer. En attendant de créer la Krypton-monnaie, Benjamin Fontaine décrit les secrets de cette nouvelle technologie, algorithmes de consensus inclus.
Un héros peut rester masqué comme Satoshi Sakamoto, mais la blockchain, elle, allie transparence, sécurité et fiabilité. Alors, effet de mode ou véritable révolution ? Les dinosaures ont-ils eu raison de disparaître ? Peut-on désormais se passer de tiers de confiance ?
Benjamin balaie l’historique de la blockchain et présente un futur qui n’est pas si éloigné que ça.
Retrouvez les slides de la conférence ici.
📽️ Revivez la session en vidéo

Linuxkit: le Linux façon IKEA

Éric Briand / Pierre-Yves Aillet
Prenez des morceaux de Linux (kernel, init), des morceaux de runtime docker (containerd, runc), et des images docker pour personnaliser votre OS.
Mélangez le tout dans un shaker LinuxKit… ET PAF : Un OS minimaliste, sécurisé et fonctionnel. Le tout en respectant les principes d’infrastructure immuable.
Vous pouvez réutiliser les plans déjà disponibles, ou imaginer les vôtres.
Dans tous les cas vous pouvez consulter les slides de la présentation et n’hésitez pas à vous lancer !
📽️ Revivez la session en vidéo

Pipeline de déploiement continu dans Kubernetes

Pascal Sauliere
Pascal commence son talk par un bref rappel sur l’orchestration de conteneurs, utile si on ne veut pas perdre le fil de la suite, car il nous propose de mettre en place un pipeline de déploiement continu dans Azure sur un cluster k8s (kubernetes) en utilisant Jenkins 2, programme pour le moins ambitieux… Et tout ça en moins de 50 minutes !
Il nous présente ensuite l’outil az élément essentiel puisqu’il s’agit de la CLI Azure permettant d’interagir avec Azure. Elle permet d’effectuer la quasi-totalité des actions disponibles sur la page d’administration Azure, mais Pascal précise qu’il préfère utiliser la CLI, et ce n’est pas le public essentiellement constitué d’ops qui va le contredire.
Puis il entre dans le vif du sujet en créant un cluster ACS (Azure Container Service) basé sur k8s (il est aussi disponible avec Swarm et Mesos) le tout en quelques lignes de commande. Il nous montre ensuite comment interagir avec ce dernier en installant tout simplement le plugin kubernetes de az. Il continue avec la mise en place d’un ACR (Azure Container Registry) qui nous permettra de stocker des images Docker produites dans notre pipeline. Vient le tour de Helm, le package manager de k8s, qui permet de déployer des services sur un cluster k8s en une seule commande : helm install stable/nginx-ingress. Magique ! De la même façon, il déploie un jenkins dans lequel il ajoute un projet github qui est buildé et déployé sur le cluster en toute simplicité.
Retrouvez les slides de la présentation ici ainsi que toutes les commandes.
📽️ Revivez la session en vidéo

Mobx-state-tree, ne vous mettez plus dans tous vos états !

Fabien Juif / Delphine Millet

La gestion d’états dans une application frontend peut parfois être compliquée.
Implémenter un store qui va centraliser les données est une bonne solution pour répondre à ce besoin. Inutile de réinventer la roue, de nombreuses bibliothèques JavaScript existent pour nous faciliter la tâche.
Redux et MobX ont réussi à tirer leur épingle du jeu (pas facile dans le monde JS 😜) et ont pourtant deux approches différentes : Redux propose de gérer un store immutable et se base sur la programmation fonctionnelle alors que MobX propose un store mutable et réactif et reprend les principes de la programmation orientée objet.

Dans la première partie de cette conférence, Fabien et Delphine confrontent ces deux librairies pour en tirer leurs avantages et inconvénients, et ainsi nous introduire une toute nouvelle bibliothèque : mobx-state-tree, qui tente de tirer parti du meilleur de ces deux approches !
Ils enchaînent alors par un livecoding drôle et instructif autour du thème des Super Nanas qui montre la facilité de prise en main de mobx-state-tree et donne envie d’essayer !
Pour retrouver toutes les ressources liées à cette conférence, vous pouvez suivre le répertoire github que Delphine et Fabien ont ouvert : Pimp my Powerpuff. Il contient :

• le lien vers les slides (en français, et bientôt en anglais)
• les différentes étapes du livecoding (en pull requests)
• et le lien vers l’application Pimp my Powerpuff !

Le tout en open source, trop beau 💜
📽️ Revivez la session en vidéo

Auteurs

Cet article a été rédigé avec la contribution de Johan Bonneau, Pierre-Yves Aillet, Julien Landuré, Delphine Millet, Yoan Rousseau, Emeric Martineau et Guillaume Membré.