Et c’est reparti pour cette seconde (et dernière) journée du DevFest ! Nous arrivons assez tôt sur place afin de pouvoir prendre tranquillement notre petit-déjeuner pour être en pleine forme pour toutes les conférences qui nous attendent !
> Pour ceux qui l’auraient loupée, la première journée est disponible par ici.
Back in Black Hat: Comment se faire pogoter (hacker) bien comme il faut !
Julien Topçu – @JulienTopcu
Pour cette première conférence de notre deuxième journée, Julien va nous faire une démonstration d’un grand nombre de failles de sécurité qui peuvent être présentes sur un site web et comment s’en protéger.
Pour cela, il a créé un site web assez basique, un peu type site de e-commerce. Et il commence par nous montrer l’une des failles les plus connues: l’injection SQL. Ainsi, il peut se connecter sur le site en tant qu’administrateur. Pour s’en prémunir, il faut notamment utiliser des requètes SQL préparées. Il enchaîne avec deux autres failles classiques: les csrf ainsi que les attaques xss).
Sa présentation était très intéressante et sert de bonne piqûre de rappel! Nous connaissons déjà ces failles de sécurité mais nous avons souvent tendance à oublier à quel point ces dernières peuvent être critique pour un projet. Avoir une démo live nous l’a bien rappelé 😉
Vidéo de la conférence
Slides de la conférence
Bootiful Testing
Josh Long – @starbuxman
Avis aux fans inconditionels de Java et de son écosystème: Vous allez adorer Josh Long! Son objectif au travers de cette conférence est de nous montrer que le Test Driven Development est une énorme valeur ajoutée lorsque plusieurs équipes travaillent ensemble sur une application client/serveur.
Pour la démo, il utilise le framework web Java Spring Boot (fan inconditionnel de JAVA on vous avait dit ;)), mais il souligne le fait que le paradigme qu’il présente peut s’appliquer à n’importe quelle technologie.
Comment faire pour que l’équipe qui développe l’application cliente, consommatrice de l’API de l’application, puisse mocker ses tests et utiliser le même format de données que l’API? Josh a la reponse: utiliser des contrats.
Dans son exemple, l’équipe qui développe l’API utilise une fonctionnalité de Spring Boot qui permet de créer un JAR contenant les contrats de leur API, ainsi qu’un mini serveur web à faire tourner en local. Plus besoin de containeuriser l’API dans un Kubernetes! Le consommateur de cette dernière, l’application client, va utiliser le JAR pour déployer un serveur local http qui contient les routes de l’API avec les formats de données mockés!
L’application client va donc pouvoir effectuer des tests très facilement en se basant sur la même source de verité que l’API développée par l’autre équipe.
Qui a dit que le TDD nous ralentissait?
The Web is on F.I.R.E !!!
Noël Macé – @noel_mace
Que signifie ce sigle ? Encore un nouveau framework JS ? Pas du tout! Il s’agit d’un pattern du web qui, selon Noel, devient à la mode depuis quelques années, et accompagne les progressive web app.
F.I.R.E ou Fast, Integrated, Reliable & Engaging est donc un pattern, un ensemble de pratiques qui font une bonne web app.
Le conférencier nous parle aussi des media query 5 qui sont toujours en draft à l’heure où cet article est écrit, mais qui donneront accès à pas mal de paramètres pour l’accessibilité. Par exemple, les platformes web auront accès à certains paramètres sytème tel que le dark mode.
Selon Noel, bientôt les navigateurs n’annonceront plus la possibilité de télécharger une PWA lorsqu’on navigue sur un site via une banderole. Ils le feront de manière beaucoup plus discrète, via une icone à côté de la barre de recherche par exemple. Les sites voulant mettre en avant leur PWA vont donc devoir intégrer à leur propre interface la possibilité de télécharger la web app, via le menu par exemple, en attendant que les réflexes utilisateurs changent.
Vidéo de la conférence
Slides de la conférence
Svelte, la nouvelle résolution des applications web
Alexis Jacomy – @jacomyal
Svelte est présenté comme le nouveau super framework (et oui, encore un…). Dans son métier, Alexis a besoin d’avoir une interface très réactive / rapide. Pour cela, il a testé beaucoup de solutions et celle qui lui convient le mieux est Svelte.
Svelte a été créé par Rich Harris qui part du constat que les frameworks javascript actuels fonctionnent bien mais sont beaucoup trop lourds. Il a donc créé, à lui tout seul, Svelte.
Contrairement aux fichiers javascript actuels, Svelte demande de créer des fichiers .svelte et ces fichiers doivent ensuite être compilés. Pour tester le rendu, un REPL est mis à votre disposition ainsi, vous pouvez écrire du svelte et voir le rendu (visuel / js / css). Rich Harris utilise une formule bien connue pour résumer ce qu’il souhaite mettre en place : write less, do more. Et honnêtement, le rendu obtenu par rapport au code généré / écrit est assez impressionnant. Via du sucre syntaxique, Alexis nous montre notamment comment faire du data-binding.
Dans votre fichier svelte, vous pouvez appeler d’autres fichiers svelte, vous pouvez écrire du CSS et du JS dans votre fichier et le scope de ce code ne sera applicable qu’à votre fichier. Ainsi, si vous écrivez du CSS en utilisant une balise HTML comme sélecteur CSS, une classe auto-générée sera ajouté sur vos balises HTML afin de ne pas impacter d’autres balises non présentes dans votre fichier.
A travers plusieurs audits, faits aussi bien de son côté que par la communauté, Alexis nous montre que les performances de Svelte sont vraiment impressionantes !
Cependant, rien n’est jamais tout rose. Il pointe du doigt plusieurs défauts de ce nouveau framework. Et oui, qui dit nouveau framework, dit nouvelles habitudes à prendre, nouvelle façon de penser et de structurer ses projets. A l’heure où les frameworks web sont très nombreux et évoluent très vite, c’est un point assez délicat. Là où les communautés des gros frameworks JS comme React ou Vue ont conçus de très nombreux outils non natifs aux frameworks de base (routers, etc…), Svelte n’en possède encore aucun ou très peu.
Dans tous les cas, le conférencier pense qu’il y aura un avant et un après Svelte.js.
Vidéo de la conférence
Slides de la conférence
Data + Art
Kirell Benzi – @KirellBenzi
Kirell Benzi nous invite à un voyage au coeur de notre cerveau, à la frontière entre l’hémisphère gauche, chargé de la logique et du raisonnement de notre pensée, et le droit, responsable de notre créativité et de notre émotivité. Son métier consiste en effet à créer des expériences créatives autour de la data. Avant toute chose, le data art… quésaco ? Il s’agit d’une dérivée de la data visualization. Penchons nous donc sur celle-ci dans un premier temps.
La data visualisation est la représentation graphique de données. Cela permet de faciliter la communication autour de celles-ci, de mettre en lumière certaines informations qui pourrait y être cachées et d’aider à la reflexion pour tirer des conclusions des données ammassées.
Après cette brève présentation des racines du métier, Kirell nous explique que le data art a pour but d’attirer des personnes néophites sur un sujet d’abord par l’émotion afin de pouvoir par la suite aborder le fond. Il s’agit donc d’oeuvre subjective, où le point de vue de l’artiste transparé, mais basée sur du contenu objectif, immuable, le set de données.
La suite de la conférence se fait sur un tour d’horizon des différentes expériences créatives que le conférencier a menées ces dernières années avec des oeuvres basées sur des réseaux de données, du machine learning ou encore des fractales.
En conclusion, une conférence pleine de rêverie, qui nous ouvre les yeux sur un métier jusqu’alors inconnu.
WebAuthn: Le renouveau de l’authentification
Thomas Blaisot – tblaisot
Si vous aussi, vous avez des problèmes de mémoire pour retenir les inombrables mots de passes, et en avez marre de passer par un logiciel tiers pour s’en occuper ? Cette conférence est faite pour vous!
Thomas nous parle de WebAuthn, le prochain successeur de la Crediental API des browsers. A l’heure d’aujourd’hui, les browsers ne sont pas capables de stocker les mots de passes enregistrés de manière très sécurisée, et la double authentication commence à montrer ses limites (SIM swapping, etc…).
C’est ainsi qu’est née en 2014 la norme FIDO, qui proposait une clef usb (dite ubikey) comme second facteur d’authentication. C’est à partir de cette norme qu’a été créée FIDO2, et qui a été reprise par le W3C pour devenir WebAuthn.
Comme le montre le schéma ci-dessous, la WebAuthn apporte un facteur supplémentaire, qui est la partie « Challenge » correspondant à une interaction avec l’utilisateur (ex: empreinte digitale).
JAMstack, ou comment faire des sites statiques modernes et rapides
Konstantin Bifert – @kissu_io
Coiffé de sa belle perruque Rose, Konstantin vient ici nous faire une présentation pas spécialement technique mais il fait un tour des lieux de la JAMStack. La JAMStack (Javascript API Markup), c’est la nouvelle stack à la mode pour créer des sites statiques en Javascript. Elle se compose globalement d’un CDN qui sert un site statique et d’une API. Les vues sont créées au build time et donc les temps de chargement sont très rapides et le SEO est optimisé. Comme il n’y a pas de backend, le site devient, de fait, beaucoup plus sécurisé.
Au niveau de l’hébergement, Konstantin propose d’utiliser Netlify (c’est d’ailleurs ce qu’on utilise pour notre site Attineos) car la plupart des fonctionnalités sont gratuites tant que votre site n’est pas trop gros. Netlify peut également vous servir de backend : si vous avez besoin d’un formulaire, il suffit de faire le lien entre votre formulaire et une configuration de formulaire dans Netlify. Ainsi, quand votre formulaire sera soumis, Netlify récupèrera l’information et vous enverra un mail.
Pour le générateur de site statique, il y’a beaucoup de choix parmi lesquels Gatsby, Nuxt, Gridsome, Hugo, … Tous ces générateurs proposent des sites avec différents templates possibles: pour créer des blogs, des sites vitrines, etc. Quand votre site est créé sur votre site de gestionnaire de version préféré, vous configurez quelques champs dans Netlify et le déploiement se fait de manière automatique dès que vous pushez sur une branche. C’est rapide et c’est magique !
L’idée de la JAMStack c’est aussi de réutiliser tous les services déjà existants et qui peuvent d’intégrer dans un site statique comme Disqus, Stripe, Algolia, etc. Vous pouvez retrouver toutes ces ressources sur ce site. Vous pouvez également utiliser d’autres solutions comme Firebase.
Si vous travaillez dans une plus grosse équipe, par exemple avec des personnes moins techniques qui ont l’habitude de renseigner du contenu, le fait d’utiliser un générateur de site statique peut leur sembler bloquant car il faut quelques notions techniques. Pour pallier à ce problème, la JAMStack propose une solution : les CMS headless. On peut citer Contentful et Sanity notamment. Ainsi, vous renseignez votre contenu dans cette solution et votre site statique requètera ce CMS headless au moment de sa génération pour remplir ses pages.
Konstantin termine sa présentation par quelques mots sur Stackbit. Sur ce site, on choisit un template, un générateur de site statique, un CMS headless et ça génère tout le site via Netlify. C’est très rapide et efficace et il n’y a pas besoin d’avoir de connaissances techniques. Et ce qui est très fort c’est que Stackbit vient de présenter une extension Chrome qui permet d’éditer en live le contenu de son site et lors de la sauvegarde, le site est regénéré automatiquement.
Keynote de fin
Pour cette keynote de fin, c’est Thomas Guenoux, un des fondateurs de Commitstrip qui vient nous faire un petit historique du web depuis la première édition du Devfest.
Sa présentation est parsemée d’humour et pour chaque année, il met en avant des anecdotes, des planches de Commistrip. Ainsi, on a pu apprendre que certaines planches sont dans des manuels scolaires, que d’autres ont été vues des millions de fois partout dans le monde, etc.
Une vraie bonne idée que de l’avoir invité pour terminer en apothéose ces 2 jours !
Conclusion
C’est la seconde fois que nous allons au DevFest Nantes et franchement, tout est très bien. C’est bien organisé, les conférences sont présentées par de bons speakers, le lieu se prête bien à l’évènement, tous les stands présents jouent le jeu du thème du DevFest, les repas sont bons, il y a même une soirée organisée à la fin de la première journée, …
Bref, vivement l’année prochaine et si vous le souhaitez, toutes les vidéos sont disponibles ici !
