![Qu’est-ce qu’une application web ? Définition [2019]](https://ouidou.fr/wp-content/uploads/2019/04/Quest-ce-quune-application-web-Définition-2019.png "Qu’est-ce qu’une application web ? Définition [2019]")
Article écrit par Victor Darras
Bonjour à tous, bienvenue dans le monde magique de l’illusion et des faux-semblants, où un background peut souvent en cacher un autre. Que le rideau se lève le temps d’apercevoir ce qui se cache derrière le mystère Houdini.
En une phrase, Houdini est un projet du W3C visant à définir une API CSS/DOM qui permettra aux développeurs de comprendre, recréer ou étendre les fonctionnalités de CSS.
Maintenant en plus d’une phrase, parce que là c’est pas sérieux.
Nous avions les mains liées… mais plus pour longtemps !
C’était pas bien les polyfills ?
Bien sûr qu’ils nous ont rendu service, pendant des années ces scripts JavaScript nous ont permis d’utiliser les balises HTML5 avec les fallbacks adaptés, d’utiliser les border-radius à une époque ou le PNG transparent existait à peine ou encore d’avoir à disposition une méthode fetch correcte en lieu et place d’XmlHttpRequest (même le nom fait peur).
Malgré tous ces services rendus, les polyfills ont mauvaise réputation. Souvent très lourds, totalement décorrélés du rendu initial de la page, nous nous retrouvions avec des ralentissements ou des crashs, dans le seul but d’avoir plus de possibilités (visuelles principalement). Ajoutons à cela le fait qu’il faille optimiser les polyfills, adapter les links à tel ou tel navigateur et nous voilà avec une balise <head> plus complexe qu’une application Angular 1.
Qu’est-ce que ça apporte de plus ?
Une nouvelle manière de penser ! Exit les polyfills et Bonjour les scripts de rendu. Plutôt que d’appeler un script en fin de chargement de page, nous avons maintenant la main sur le moteur de rendu de notre navigateur. Associés à différentes APIs (layout, paint, font metrics…) il est donc possible de revoir ou créer des propriétés, des effets, des unités, etc.
Et surtout, est-ce qu’Houdini est amené à disparaître ?
Houdini est le nom de code de l’ensemble de la spécification. Il y a fort à parier que ce nom disparaîtra aussi vite que le fameux intitulé « CSS3 ».
Ah et du coup faut attendre que tous les navigateurs le supportent, non ?
Eh bien oui, comme toujours nous allons avoir droit à une longue période de transition. Celle-ci devrait probablement être l’une des dernières en ce qui concerne le rendu visuel. En effet, une fois cette spécification adaptée aux différents navigateurs, nous pourrons réutiliser des scripts standardisés pour leur ajouter des fonctionnalités. Il n’y aura donc plus besoin d’attendre leur mise à jour.
C’est pas justement ce qu’Houdini tente de résoudre comme problème ?
Évidemment ça parait paradoxal, mais nous avons besoin de cette période de transition. Si je devais faire un parallèle, imaginons que nous voulions vivre dans une ville sans voiture (le Web idéal). On commence par créer des pistes cyclables et des garages adaptés (Houdini), pour que les gens changent de comportement (script de rendu). On peut ensuite virer les vielles voies pour autos (polyfill).
Ok, et niveau compatibilité du coup ?
Il ne faut pas se leurrer, pour le moment (Février 2019) c’est le néant. Disponible pour Chrome Canary ou d’autres navigateurs sans public, on est clairement sur un outil précurseur que l’on pourra éprouver dans les années à venir. Mais c’est justement le moment de s’intéresser aux implémentations, aux propositions — toujours en cours — du W3C. Parce que lire les spécifications et donner son avis, c’est aussi un peu ça « travailler dans le Web ».
Voici un très bon résumé des plate-formes compatibles ainsi que de leur avancement dans l’implémentation des spécifications que nous allons découvrir ensuite.
Détails
Maintenant qu’on a fait un petit tour des choses à savoir, allons plus en détail. J’ai pris le temps de faire un tour des spécifications complètes (en brouillon, évidemment) afin de vous résumer rapidement l’impressionnant travail du W3C.
Layout API
display: block, grid ou encore table, voilà ce qui est concerné par la Layout API. C’est l’outil qui nous permettra de définir de nouvelles manières de positionner et dimensionner nos structures de documents et révolutionner leur mise en page.
Paint API
Cette nouvelle API nous permet d’appeler une fonction JavaScript à partir d’une nouvelle propriété paint(). Nous aurons par exemple des facilités à appeler la Canvas API afin de créer des éléments visuels novateurs, indépendamment des possibilités intrinsèques de CSS (un background généré par exemple).
Properties & Values API
L’idée ici est d’étendre le fonctionnement des variables CSS actuelles. Nous aurons donc la possibilité de typer les variables, leur définir une valeur par défaut ou même modifier leur comportement d’héritage.
AnimationWorklet
Permet de créer des animations complexes à base de JavaScript exécuté dans un thread isolé pour optimiser au maximum leurs performances.
CSS Typed Object Model
La manipulation du CSS passait jusqu’à aujourd’hui par une gestion complexe de chaînes de caractères, lourde à l’usage autant qu’en termes de performance. Cette nouvelle interface nous permet d’utiliser un ensemble d’objets JavaScript avec des méthodes adaptées à ses types.
Parser API
Permet d’utiliser le CSS Typed OM (ci-dessus) avec JavaScript pour ne pas avoir à implémenter de méthode personnalisée de parsing. Permet aussi d’étendre le parser existant pour ajouter des propriétés ou valeurs (poyfill).
Font Metrics API
Permet une récupération très fine des informations de texte ; en fonction du type de police, de sa taille et de son contexte dans le document.
Pour ça au moins, vos enfants vous remercieront
Sûrement l’un des chantiers du W3C les plus sympas à suivre depuis que je fais du Web, Houdini est une solution qui vise à libérer le Web (des contraintes des navigateurs) et j’ai l’impression que la direction prise est la bonne. Toute la spec est encore amenée à changer (parfois drastiquement), je vous invite donc à suivre les évolutions de leur travail, et surtout à participer ! On oublie souvent que le Web est comme un gros projet Open Source et que l’avis de chacun peut être pris en compte pour peu qu’il soit pertinent.
Pour continuer avec Houdini je vous invite à visiter ces impressionnantes démos ou même ces explications étapes par étapes des différentes spécifications.
À lire aussi
Fresque du Numérique
Ouicommit – L’intelligence artificielle en entreprise, on y est !
Hackathon Women in Tech : un engagement pour une tech plus inclusive
