Cette année encore, Xebia était au rendez-vous annuel du meilleur des meetups web parisiens : Best of Web. Nous avons cherry-pické quelques uns des talks que nous avons appréciés.
Web animation performance
Freddy Harris @HarrisFreddy
Freddy est un habitué des talks sur les webperfs et l’animation web. Pendant sa présentation, il creuse en détail une feature CSS du futur (proche) : will-change. Grâce à ce paramètre, il est possible d’indiquer au moteur de rendu des navigateurs qu’un élément html va être animé. Le navigateur placera l’élément dans un layer séparé et utilisera le GPU pour calculer sa position et merger le résultat avec le reste de l’image de la page. En séparant ainsi les layers animés des autres, on bénéficie de la vitesse d’exécution du GPU et on optimise le calcul de l’image finale. Durant une animation, cela permet de faire grimper le framerate à 60 fps, nouvelle norme de vitesse pour une animation fluide. On attend plus que le navigateur Edge implémente la RFC pour pouvoir utiliser cette feature en production !
Audrey Neveu <(Streamdata.io) @Audrey_Neveu
Fini les boutons “rafraîchir” sur nos sites ! Aujourd’hui on veut du temps réel !
Dans ce talk, Audrey Neveu nous présente les différentes façons de faire du streaming d’API en 2016. Le but étant d’afficher sur votre site ou application des données toujours à jour, sans que l’utilisateur n’ait à faire d’action particulière (comme rafraîchir la page ou cliquer sur un bouton par exemple).
Pour interroger une API et recevoir les changements au fil de l’eau Audrey nous présente trois façons de faire : utiliser le Long-polling, les WebSockets ou le Server-Sent Events.
Comme Audrey pendant sa conférence, nous ne nous attarderons pas trop sur le Long-polling dans cet article : cela consiste à interroger régulièrement une api pour récupérer des données fraîches, c’est gourmand car beaucoup d’appels réseaux sont effectués. A bannir sur une appli mobile par exemple (pour laquelle il est important de ménager la bande passante).
Elle nous a ensuite parlé des WebSockets. C’est un protocole réseau qui se base sur un socket TCP et qui offre un lien bi-directionnel entre une application et un serveur. C’est à dire que l’api peut pousser en direct les changements et inversement, l’application peut aussi envoyer des données.
Les WebSockets gèrent le texte et le binaire et sont supportés par tous les navigateurs actuels.
Le petit bémol c’est qu’il n’y a pas de système de reconnections automatique. Néanmoins, on peut pallier ce problème en codant nous même la reprise de la connexion.
Audrey enchaîne avec la description du Server-Sent Events.
Le SSE fourni un lien unidirectionnel. C’est le serveur qui pousse de la donnée en temps réel vers l’application, l’inverse n’est pas possible. Le protocole utilisé est HTTP et SSE n’accepte que du texte.
Au niveau de la prise en charge des navigateurs, il n’est pas supporté par Internet Explorer et pour Edge c’est “Under consideration”, on ne sait pas encore…
Audrey termine sa présentation par le live coding d’une petite application qui permet d’afficher en temps réel la position de l’ISS (Station spatiale internationale) sur une Google Maps. Elle nous montre la facilité avec laquelle on peut mettre en place un Server-Sent Events en vraiment juste quelques lignes de code.
Vous pouvez retrouver cette application sur son compte github
CSS, compagnonnage et vexillologie (css flags)
Tim Carry (Algolia) @pixelastic
En voyant ce titre, on se posait tous pas mal de questions. « CSS je connais, mais vexillololologie… Vexillologie !? Mais qu’est ce que c’est ?? Et compagnonnage ? Qu’est ce que ça à voir avec le web ?? ».
Tim nous a tout de suite expliqué le pourquoi du comment. C’est après avoir visité le musée du compagnonnage de Tours qu’est venue l’idée à notre présentateur de faire comme les compagnons, et de réaliser ce que l’on appelle dans leur jargon un « chef d’oeuvre ». C’est ce qui permet à l’Apprenti de passer Maître. Ce chef d’oeuvre est une réalisation dans laquelle son créateur utilise toutes les techniques acquises et qu’il a maîtrisé durant sa carrière, l’occasion parfois d’innover et d’en trouver de nouvelles. C’est de là qu’est venu l’idée à Tim d’appliquer ces principes à son métier.
C’est la qu’intervient la Vexillologie, qui signifie « Collection de drapeaux ». Tim décide de reproduire les drapeaux des différents pays du globe uniquement en CSS. Travail fastidieux, dans lequel il se met quelques challenges suppllémentaires, tel que de n’utiliser qu’une seule `div` par drapeaux et faire le reste en propriétés CSS, de n’avoir qu’une seule série de font-icons d’une seule couleur (pour les éléments vraiment trop complexes tel que le cèdre du Liban). Il nous explique ainsi les diverses techniques (plus ou moins poussées) et les astuces qu’il a du utiliser pour pouvoir réaliser son oeuvre.
Le résultat est spectaculaire, mais ce qu’il faut retenir c’est sa réflexion sur le travail du développeur : l’apprentissage des drapeaux (fonctionnel) et le fait de pouvoir utiliser pleinement toutes les techniques CSS mises à disposition par le langage (technique). J’achèverai en citant sa phrase de conclusion : « Le voyage compte plus que la destination, et j’espère avoir pu, au travers de ma présentation, vous faire voyager ».
Vous pouvez retrouver son travail sur le repository de Tim Carry et voir le résultat sur son site de démonstration
Progressive Web Apps
Florian Orpelière @florpeliere
Les progressives Web Apps (ou PWA) était l’un des sujets phares de Google I/O 16 et ça faisait plaisir d’avoir un talk dessus. Les quelques chiffres annoncés donnent à réfléchir : 80% des utilisateurs suppriment une application lors des trois premiers jours d’utilisation. Ce qui laisse 20% d’utilisateurs qui finiront par vraiment l’utiliser. Avec les PWA, le nombre d’utilisateurs est doublé (soit 40%) en raccourcissant le parcours “d’obtention” de l’application. Florian nous passe en revue les aspects techniques à prendre en compte :
Cache et sécurité
Grâce notamment à l’utilisation de Service Workers pour gérer les appels dans des workers séparés, en asynchrones et en HTTPS. Ils permettent également une gestion fine du cache pour une utilisation off-line (https://developer.mozilla.org/fr/docs/Web/API/ServiceWorker).
Performance
Pour avoir une expérience comparable au natif, la performance devient primordiale. Toutes les couches doivent y passer : CSS, appels réseau (HTTP2), gestion de l’asynchronisme, etc.
Ré-engagement
Une bonne application est celle qui vous tient automatiquement au courant des informations importantes en les faisant remonter sur votre smartphone. L’utilisation de la push API permet à une PWA de couvrir ce besoin (https://developer.mozilla.org/en-US/docs/Web/API/Push_API).
Installation
Afin de pouvoir installer véritablement une PWA, un manifeste doit être rédigé, il décrira votre application, son nom, etc. (https://developer.mozilla.org/en-US/docs/Web/Manifest)
Bien que certaines briques techniques ne soient pas encore bien supportées par tous les navigateurs, c’est pour bientôt. Les PWAs sont une nouvelle opportunité pour le web d’opposer au “tout natif” une alternative sérieuse. L’avenir nous dira si le défi sera relevé.
Allez voir le Pokédex en PWA, la plus performante du moment.
Mixité dans le monde des web components
Horacio Gonzalez @LostInBrittany
Le web est plus que jamais tourné vers les composants : React, Angular2, WebComponents, Polymer, pour ne citer qu’eux sont autant de réponses possible pour les implémenter. Nageant à contre courant du “new is always better”, Horacio nous démontre comment il est possible de faire cohabiter toutes ces formes de composants, ensemble, sur une même application. Sa bonne parole : ne pas constamment tout jeter pour tout refaire avec la nouvelle techno à la mode, mais embrasser les webcomponents afin d’être résistant au changement.
Pour lui, c’est Polymer qui apporte la juste dose de facilité d’utilisation au dessus des WebComponents natifs et qui permet de prendre de la distance avec les implémentations particulières. Il nous a présenté une démo à la promiscuité étonnante : Angular 1, React, Polymer, Xtag partageant différentes couches de l’application en bon voisinage. Une présentation très convaincante et pleine d’espoir pour l’avenir de nos applications web.
Retrouvez la démo d’Horacio Gonzalez sur son repository
Du web au mobile, les technos multiplateformes qui changent les standards en 2016
Florian Rival @Florianrival
Yann Leflour @yleflour
Dans ce REX, nous avons pu bénéficier de détails très intéressants sur les deux grandes solutions mobiles “non natives” du moment : React Native et Ionic. Chacune présente des avantages et des inconvénients. Ionic (avec bientôt sa version 2) tire son épingle du jeu grâce à une très grande bibliothèque de composants. React Native, quant à lui, offre une intégration native accrue mais souffre d’un choix limité de composants, d’une intégration à Windows Phone pas encore disponible et parfois de composants n’existant que sur l’une des plateformes. Avec l’arrivée d’une solution permettant d’utiliser Angular 2 avec React Native, la scène web / native promet de continuer à faire parler d’elle dans l’année à venir.
En Conclusion
C’était bien, détendu et avec du super fromage ! On garde l’esprit meetup, un niveau technique assez conséquent, avec une nouveauté : quelques guest-stars qui sont venues pimenter cette édition. La conférence proposait également des formations la veille à un prix imbattable. Vous pourrez retrouver photos et croquis sur le site de Best of Web Paris.
Pour nous l’objectif est atteint : partager les connaissances hors des frontières des meetups, sans trop de corporate, pour un prix abordable par tous. Chapeau aux organisateurs et aux speakers et à l’année prochaine !
Thomas Carvalho, Paul-Guillaume Dejardin et Antoine Le Taxin