Consultez cet article dans sa version originale (anglais). La version 3 d’API Platform Schema Generator vient juste de sortir ! C’est un outil en ligne de commande, faisant partie d’API Platform, qui génère instantanément un modèle de données PHP complet (classes, énumérations, mapping ORM, règles de validation, définitions d'API web, PHPDoc...) à partir de vocabulaires RDF et d'ontologies. Les vocabulaires RDF sont couramment utilisés pour définir des concepts et des relations à l'échelle du web (Schema.org), d’une branche d’industrie (la NASA, The Automotive Ontology, AddictO Vocab...) ou d’une organisation (l’Union Européenne, Volkswagen). Nouvelles fonctionnalités Dans les versions 1 et 2 de l’outil, la prise en charge des vocabulaires était limitée, seul schema.org était supporté à 100%. La version 3 est désormais compatible avec la plupart des vocabulaires existants. Pour ce faire, nous avons ajouté le support du Web Ontology Language (OWL) et des types XML Schema. De plus, le code généré exploite désormais les nouvelles fonctionnalités introduites dans les versions récentes de PHP, et notamment les améliorations apportées au système de types : propriétés typées, les déclarations de type dont la valeur peut être null… Vers un web décentralisé Comme vous avez pu le constater, la décentralisation est un sujet qui nous tient à cœur chez Les-Tilleuls.coop. Si vous n’avez pas vu notre conférence donnée à l’AFUP Day 2020, nous vous invitons à la découvrir : Le web est aujourd’hui utilisé comme arme par les géants de la technologie et les gouvernements. Ce qui était à la base un espace libre et autonome mais aussi un instrument d'émancipation où les groupes marginalisés pouvaient librement s'exprimer, devient un outil de surveillance de masse où règne la censure. Nous devons agir pour le décentraliser à nouveau. Même le créateur de Twitter, suite au bannissement de Trump totalement justifié, aboutit à cette même conclusion : This moment in time might call for this dynamic, but over the long term it will be destructive to the noble purpose and ideals of the open internet. A company making a business decision to moderate itself is different from a government removing access, yet can feel much the same. — jack (@jack) January 14, 2021 Parmi tous les différents vocabulaires RDF, l'un d'entre eux pourrait être le fondement d’un web à nouveau décentralisé : ActivityStreams. C’est le vocabulaire d’ActivityPub, un protocole édité par le W3C, utilisé pour créer des médias sociaux décentralisés et fédérés. ActivityPub est déjà implémenté par des réseaux sociaux populaires comme Mastodon, PeerTube, Mobilizon et WriteFreely. Les serveurs implémentant le protocole ActivityPub sont interopérables et fédérés dans ce que l’on appelle le Fediverse. La nouvelle version de Schema Generator a été créée spécialement pour amorcer des applications PHP utilisant ActivityStreams. Générer un ensemble de classes PHP implémentant le vocabulaire est aussi simple que de sélectionner les types et propriétés que vous souhaitez dans un fichier de configuration ! Ce n’est pas tout. Nous avons également créé un nouveau composant expérimental implémentant le protocole ActivityPub : API Platform ActivityPub ! Grâce à ce composant, connecter une app Symfony ou API Platform (y compris celles qui existent déjà) au Fediverse se fait juste en installant un bundle ! Comme tous les autres composants d’API Platform, ActivityPub peut également être utilisé comme une bibliothèque PHP autonome dans des projets n'utilisant pas Symfony. PHP était le langage de prédilection pour construire le web lorsqu’il était encore décentralisé. Au fil des ans, PHP s'est considérablement amélioré et est devenu l'un des langages de programmation les plus rapides. PHP est toujours un langage facile d’apprentissage pour des devs débutant·e·s ou amateurs·trices. Nous espérons qu'il deviendra le langage par défaut pour construire un nouveau web décentralisé, et qu’API Platform sera l’une des briques pour atteindre cet objectif ! Comme vous nous l'annoncions il y a quelques semaines, la sortie de la version 2.6 d'API Platform regorge de nouveautés et mises à jour conséquentes. Vous souhaitez vous faire accompagner, que ce soit dans le conseil ou la formation, dans ces mises à jour avec un membre de la core team API Platform ? Contactez-nous ! Ressources Le changelog d’API Platform Schema Generator V3 Documentation de la nouvelle version Le composant expérimental ActivityPub
Read the English version of this article directly on Mercure’s and Hotwire’s websites. Hotwire est un nouveau micro-framework front-end créé par l’équipe de Ruby On Rails qui permet de construire des sites et applications web bénéficiant d’une expérience utilisateur similaire à celle des Single-Page Applications, mais sans avoir à écrire de JavaScript. Au lieu d’écrire du code JavaScript pour récupérer les données encodées sous forme de documents JSON via une API web puis d’effectuer leur mise en forme côté client, Hotwire promeut le transfert direct de blocs de HTML contenant déjà ces données mises en forme. Ainsi, il est possible de continuer à utiliser les moteurs de templating traditionnels tels que ERB en Ruby ou Twig en PHP tout en bénéficiant de la rapidité et de la réactivité légendaires des SPA. Hotwire Turbo (la bibliothèque au cœur du framework) est en soi impressionnante. Charger le script suffit à améliorer radicalement la fluidité de n’importe quelle application web traditionnelle, sans avoir à y apporter de modifications. Mais la fonctionnalité la plus décoiffante de l’outil est nommée Turbo Streams. Les Turbo Streams permettent aux serveurs de mettre à jour en temps réel les pages affichées dans les navigateurs des utilisateurs. Le serveur peut “pousser” aux clients les changements à appliquer au HTML déjà affiché. Ça ne vous rappelle pas quelque chose ? Le protocole Mercure, une spécification ouverte développée par Les-Tilleuls.coop, permet de créer très facilement un canal de communication en temps réel entre un serveur et ses clients. Turbo Streams est agnostique du transport utilisé, c’est à vous de l’implémenter. Mercure comble ce manque, et permet de tirer parti au maximum de Hotwire en quelques lignes de code ! Commencez par installer Turbo ainsi qu’un hub Mercure. Utiliser Mercure pour alimenter un Turbo Stream est ensuite un jeu d’enfant : import { connectStreamSource } from "@hotwired/turbo"; // The "topic" parameter can be any string or URI const es = new EventSource("https://example.com/.well-known/mercure?topic=my-stream"); connectStreamSource(es); Comme vous pouvez le voir, aucune dépendance externe n’est nécessaire : la classe native EventSource est utilisée pour se connecter au point d’entrée SSE (Server-Sent Events) exposé par le hub Mercure. Mettre à jour les pages en temps réel avec Mercure Pour diffuser des messages via Turbo Streams, envoyez une simple requête HTTP POST au hub Mercure : curl \ -H 'Authorization: Bearer <snip>' \ -d 'topic=my-stream' \ -d 'data=<turbo-stream action=...' \ -X POST \ https://example.com/.well-known/mercure topic doit être le même sujet que celui que nous avons utilisé dans le code JavaScript ; data contient les messages Turbo Streams à diffuser ; L'en-tête HTTP Authorization doit contenir un JWT de publication valide. Toutes les autres fonctionnalités de Mercure, notamment la diffusion de mises à jour privées aux abonnés autorisés, sont également prises en charge. Dans cet exemple, nous utilisons curl mais n’importe quel client HTTP ou bibliothèque client pour Mercure fonctionnera. Se déconnecter d'un flux Pour déconnecter la source du flux, utilisez la fonction disconnectStreamSource() : import { disconnectStreamSource } from "@hotwired/turbo"; disconnectStreamSource(es); Créer un contrôleur Stimulus Mercure fonctionne également très bien avec la bibliothèque Stimulus, un autre composant de Hotwire. Dans l'exemple suivant, nous créons un contrôleur Stimulus pour se connecter au flux SSE exposé par le hub Mercure lorsqu'un élément HTML est créé, et pour se déconnecter lorsqu'il est détruit : // turbo_stream_controller.js import { Controller } from "stimulus"; import { connectStreamSource, disconnectStreamSource } from "@hotwired/turbo"; export default class extends Controller { static values = { url: String }; connect() { this.es = new EventSource(this.urlValue); connectStreamSource(this.es); } disconnect() { this.es.close(); disconnectStreamSource(this.es); } } <div data-controller="stream" data-turbo-stream-url-value="https://example.com/.well-known/mercure?topic=my-stream"> <!-- ... --> </div> Comme vous avez pu le voir dans cet article, utiliser Mercure avec Hotwire permet de transformer n’importe quel site web existant en application moderne, fluide et intuitive dont les données affichées aux utilisateurs peuvent être mises à jour en temps réel. Si vous souhaitez donner une nouvelle jeunesse à vos sites et applications existantes, n’hésitez pas à nous contacter pour en discuter avec nos experts ! Par ailleurs, ce n’est que le début de l’intégration entre Hotwire, Mercure, et les autres logiciels libres que nous réalisons. On vous prépare une grosse surprise pour bientôt !
Décembre a été un mois riche en nouveautés pour le framework API Platform. Après avoir été évoquée au Symfony World Online, la bêta de la version 2.6 a été annoncée lors de notre dernier meetup en ligne avec une liste conséquente de nouvelles fonctionnalités : support de PHP 8 et NextJS, simplification de la distribution avec le serveur web Caddy, meilleure configuration, ajout du composant Activity Pub... L'ensemble de ces nouveautés a été présenté dans cet article, n'hésitez pas à le (re)découvrir ! Au-delà de ces annonces, cette montée en version nécessite quelques mises à jour et configurations à mettre en place. C'est pour cela que nous avons planifié une nouvelle journée d'atelier animée par le créateur du framework, Kévin Dunglas, le 25 janvier 2021. Et si votre résolution de nouvelle année était d’améliorer votre expertise sur API Platform ? Ne tardez pas et formez-vous dès à présent aux nouveautés de ce framework aux 5 millions de paquets téléchargés. Le nombre de places de ce workshop, pour garder une qualité de formation optimale, est toujours limité. Contactez-nous dès à présent pour réserver votre place. Important : ce workshop est d'un niveau intermédiaire, une bonne connaissance du framework est demandée pour y participer. En 2021, nos formatrices et formateurs restent toujours à votre écoute et vous accompagnent dans la montée en compétences de vos équipes. L'ensemble de nos formations reste réalisable à distance, ou en présentiel de manière sécurisée et dans le respect des consignes sanitaires. Vous ne trouvez pas la formation qu'il vous faut dans notre catalogue ? Contactez-nous et nous créerons votre session sur mesure, adaptée à vos besoins et vos problématiques.
Découvrez la version originale de cet article ici. Kévin Dunglas a annoncé ce matin la sortie de l’alpha d’API Platform 2.6 à la SymfonyWorld ! Cette version est le résultat de plus d’un an de travail et d’une centaine de commits. Elle comporte une impressionnante liste de nouvelles fonctionnalités, n'hésitez pas à consulter les changelogs (bibliothèque Core, distribution) pour découvrir la liste dans son intégralité. Vous allez découvrir dans cet article les fonctionnalités majeures de cette version, vous pouvez aussi consulter les slides de la SymfonyWorld pour plus de détails : Support de PHP 8 PHP 8 est sorti la semaine dernière avec une liste impressionnante de nouvelles fonctionnalités. Parmi elles, les attributs, qui vont changer la donne pour API Platform qui s'appuyait beaucoup sur les annotations. Avec API Platform 2.6, vous pouvez utiliser toutes les classes d’annotations comme attributs PHP 8 : <?php namespace App\Entity; use ApiPlatform\Core\Annotation\ApiResource; #[ApiResource] class Book { public function __construct( public string $id, public string $title ) {} } API Platform est désormais totalement compatible avec PHP 8 (toutes les dépréciations ont été corrigées), et PHP 8 est maintenant installé par défaut dans la distribution du framework ! Support de Next.js et Nuxt.js API Platform est livré avec un outil très pratique pour créer les applications clients : le générateur de clients. Le générateur utilise la documentation Hydra ou OpenAPI (de manière expérimentale) de l’API pour générer des applications utilisant diverses technologies orientées client. Cela fonctionne avec n’importe quelle API documentée à l’aide de ces formats, et pas seulement avec les APIs utilisant le composant côté serveur d’API Platform ! La génération de définitions TypeScript ainsi que de Progressive Web Apps construites avec React Native, React/Redux, Vue.js, Quasar et Vuetify était déjà prise en charge. Dans API Platform 2.6, le support de Next.js a été ajouté par Grégory Copin, l’un de nos coopérateurs ! Next.js est le framework de référence dans l’écosystème React. Il est simple d’utilisation, supporte le Server-Side Rendering, dispose d'un système de routage par page simple et puissant, et prend en charge un large éventail de fonctionnalités. La distribution d’API Platform a aussi été mise à jour pour utiliser Next.js par défaut. Un conteneur Docker et une définition Docker Compose lanceront automatiquement un squelette d’app Next.js et vous serez ainsi en mesure de créer vos pages et vos formulaires en exécutant qu'une seule commande ! API Platform Admin est aussi désormais intégré dans cette app Next.js, à l’adresse /admin. Vous préférez utiliser Vue à la place de React ? Nous avons pensé à vous ! Dans API Platform 2.6, vous trouverez aussi un générateur Nuxt.js. Nuxt.js est semblable à Next.js, mais utilise Vue et comme API Platform, c’est conçu par des français ! Simplification de la distribution avec le serveur web Caddy Dans la version 2.6 d’API Platform, la distribution a été totalement remaniée. API Platform prend en charge de nombreuses fonctionnalités avancées directement prêtes à l'emploi, comme les protocoles Mercure et Vulcain. Pour prendre en charge ces fonctionnalités, API Platform est livré avec de nombreux conteneurs Docker : PHP-FPM NGINX Un conteneur pour générer des certificats TLS Un reverse proxy Vulcain Le Hub Mercure PostgreSQL Un conteneur Node.js pour le générateur de client Un conteneur Node.js pour l’app admin Dans API Platform 2.6, tout est simplifié ! Tout d’abord, nous sommes passés de NGINX au serveur web Caddy. Caddy est rapide, extensible et riche en fonctionnalités. Par exemple, il génère automatiquement des certificats TLS à la fois en production et sur l’environnement de développement local, et supporte nativement PHP-FPM. Nous avons également créé des modules Caddy pour Mercure et Vulcain ! Nous sommes aussi en train de travailler avec l’équipe de Caddy pour créer un module de cache HTTP qui remplacera Varnish. Comme expliqué plus haut, nous avons également remplacé Create React App par Next.js et fusionné les conteneurs du client et de l’admin. Le résultat est une configuration très simplifiée : PHP-FPM Serveur web Caddy PostgreSQL (facultatif) Conteneur Next.js (facultatif) La définition Docker Compose incluse dans la distribution supporte désormais un mode “production”. Meilleure configuration Jusqu’à présent, il n’était pas possible de définir une configuration globale par défaut appliquée à toutes les ressources et toutes les opérations. Vous deviez copier votre configuration dans toutes les définitions de ressource. Avec API Platform 2.6, vous pouvez définir une configuration globale par défaut : # config/packages/api_platform.yaml api_platform: defaults: itemOperations: ["get"] collectionOperations: ["get"] mercure: true La configuration précédente désactive toutes les routes d'écriture de l'API, et active le support de Mercure (API asynchrone) pour toutes les ressources existantes ! Contrôle d'accès aux propriétés Jusqu’à présent le contrôle d’accès d’API Platform se basait uniquement sur les ressources. Dans la v2.6, il peut désormais s’appliquer directement au niveau des propriétés : <?php namespace App\Entity; use ApiPlatform\Core\Annotation\ApiResource; use ApiPlatform\Core\Annotation\ApiProperty; #[ApiResource] class Book { #[\ApiProperty(security: "is_granted('ROLE_ADMIN')"] public $adminOnlyProperty; } Grâce à cette règle, la propriété adminOnlyProperty sera sérialisée uniquement pour les utilisateurs disposant du rôle admin ! Les autres utilisateurs ne seront pas en mesure de la voir. Composant ActivityPub Comme vous vous en doutez, nous sommes préoccupés par l'état actuel du web et pensons que nous devons agir pour le décentraliser à nouveau. ActivityPub est une spécification éditée par le W3C débloquant l'interopérabilité entre les applications de réseaux sociaux. Elle fait partie des solutions permettant de lutter contre la censure et de se passer des plateformes fermées des GAFAM. ActivityPub est déjà implémentée par de nombreux logiciels comme Mastodon (une alternative à Twitter), Peertube (une alternative à Youtube), PixelFed (une alternative à Instagram), Mobilizon (une alternative à Meetup)… Cet écosystème est nommé le Fediverse. Dans API Platform 2.6, nous avons introduit un nouveau composant expérimental permettant l’ajout du support d’ActivityPub à n’importe quelle application API Platform ou Symfony ! Il est désormais beaucoup plus simple qu'auparavant de construire des applications fédérées et de faire grandir le Fediverse ! Communauté La plus grande force d’API Platform, c’est sa communauté d’utilisateurs·trices et de contributeurs·tices ! Pour remercier notre communauté, un encart dédié à la communauté a été ajouté sur le site d’API Platform. Découvrez en détails cette section dans cet article. N'oubliez pas également qu’il est encore temps de réclamer votre t-shirt créé à l’occasion du Hacktoberfest ! Le formulaire ferme bientôt, ne tardez pas ! Even if Hacktoberfest is over, we still would like to reward @ApiPlatform contributors by sending them a free t-shirt! Fill in that form and expect a delivery by the end of the year: https://t.co/L6WGC64s5e pic.twitter.com/2pEjbNy9Iq — Les-Tilleuls.coop (@coopTilleuls) November 18, 2020 API Platform 3 La prochaine version d’API Platform sera la 3 ! Nous sortirons API Platform 2.7 en même temps. API Platform 3 sera essentiellement la même que la version 2.7 moins la couche de rétrocompatibilité avec le code déprécié. API Platform 3 mettra en avant les sous-ressources ! Elles prendront en charge notamment les opérations d'écriture, la configuration générale est également en cours de réorganisation. Aussi, pour réduire la charge de maintenance, API Platform 3 supportera uniquement PHP 8 et Symfony 5.2+. Anticipez dès à présent vos mises à jour ! Divers D'autres fonctionnalités n’ont pas été citées dans cet article : notre sous-système GraphQL a gagné de nombreuses nouvelles fonctionnalités (y compris le support des souscriptions grâce à Mercure et une pagination par page), le bridge MongoDB supporte désormais le protocole Mercure, le builder OpenAPI a été totalement réécrit, les identifiants composés sont plus faciles à manipuler… Lisez les changelogs (core, distribution) pour tout découvrir ! Un énorme merci à toutes les personnes ayant contribué au code et à la documentation d’API Platform 2.6 ! Rien de tout cela ne serait possible sans votre aide. Essayez dès à présent l’alpha de cette version et signalez-nous le moindre bug ! N’oubliez pas également de mettre une étoile sur Github. Les-Tilleuls.coop reste disponible pour le développement de vos projets ou votre montée en compétences sur API Platform.
Retrouvez la version originale (EN) de cet article ici. Nous sommes ravis de vous annoncer la sortie de la première alpha de la version 0.11 du Hub Mercure.rocks ! Le Hub Mercure.rocks est un logiciel libre implémentant la spécification Mercure, un protocole ouvert pour des communications en temps réel rapides, fiables et économes en énergie. La version 0.11 est une étape importante pour le projet ! Comme vous devez le savoir, le Hub Mercure.rocks est écrit en Go. Jusqu’à présent, son serveur web intégré était fait maison. Bien que ce serveur ad-hoc faisait ce qu’on lui demandait, il souffrait de certaines limitations : peu de paramètres de configuration, pas de support de HTTP/3, peu d'outils de débogage... Pour cette version 0.11, nous avons travaillé d’arrache-pied pour fournir un module Go prêt à l’emploi pouvant être utilisé pour ajouter le support du protocole Mercure sur n’importe quel projet écrit en Go. Ce refactoring nous a également permis de créer un module Mercure pour le serveur web Caddy ! Nous avons aussi migré le hub autonome vers un build de Caddy comprenant le module Mercure. Utiliser Caddy à la place du serveur web fait maison a permis l’ajout de nouvelles fonctionnalités au Hub Mercure.rocks, et ouvre la voie à un large éventail de nouveaux usages. Par exemple, il est désormais possible d’utiliser le Hub Mercure.rocks comme reverse proxy de production pour votre site web ou votre API, mais un reverse proxy qui ajoute l’URL well-known de Mercure (/.well-known/mercure). L'URL “well-known” de Mercure se trouve alors sur le même domaine que votre site web, et vous n'avez donc plus besoin de gérer le CORS ! Toutes les fonctionnalités fournies par Caddy sont également prises en charge par ce build personnalisé comme le support de HTTP/3 et h2c, la compression avancée, les métriques Prometheus détaillées (avec des métriques supplémentaires spécifiques à Mercure) ou encore un profiler intégré (/debug/pprof/). Rendez-vous sur le site web de Caddy pour découvrir toutes les fonctionnalités de ce serveur web. Il est également possible de créer des versions personnalisées de Caddy incluant le module Mercure ainsi que d'autres modules comme celui de Vulcain ou encore le module HTTP Cache de Caddy que nous co-maintenons avec leur équipe. Par conséquent, les projets Symfony Docker et API Platform ont déjà migré vers Caddy avec le module Mercure ! Avant de passer à la version 0.11, assurez-vous de migrer votre configuration vers le nouveau format Caddyfile. Pour faciliter la migration, nous fournissons toujours des binaires et des images Docker contenant l'ancien serveur fait maison. Ces versions legacy sont compatibles avec l'ancien format de configuration et sont préfixées par "legacy-". Un immense merci à Márk Sági-Kazár, Tamás Szigeti et à toute l’équipe de Caddy pour leurs contributions et leur aide incommensurable ! Testez dès à présent l’alpha de Mercure 0.11 et n’hésitez pas à nous signaler le moindre souci ! Les-Tilleuls.coop reste à votre disposition dans la mise en place de Mercure dans vos projets et peut aussi vous accompagner dans l’apprentissage de ce protocole.
J'ai récemment voulu tester la version 2 de TailwindCSS. Avant de commencer cet article, je préfère vous prévenir : je n’aime pas le front ! Je suis un pur développeur PHP, j'aime la console et les appels curl. Pour remettre dans le contexte, dans le cadre d'un cours que je donnais à des étudiants en 4e année d'informatique, nous avons réalisé un petit système de matchmaking entre amis. Pour rendre le tout un peu joli, je me suis dit d’essayer tailwindCSS vu que tout le monde en parle. Résultat des courses – et cela n'engage que moi – je suis moyennement convaincu et j'aime autant écrire mon CSS. Laissez moi vous expliquer pourquoi. En tant que développeur back, j'ai déjà travaillé avec Jquery, Babel, Backbone, Angular, React, Vuejs, Vanillajs, Bootstrap, Yeti-css, Bulma-css, Foundation, MaterialUi et j'en passe. Même si le front n'est absolument pas mon domaine d'expertise, le temps m'a appris à déceler ce que j'aime de ce que je n'aime pas quand je dois intervenir sur un projet dans ces parties. Le projet sur lequel je me suis amusé était une composition Symfony/Twig des plus classiques. Pour commencer, on fait l'installation avec Symfony et je choisis d'utiliser Webpack Encore : symfony composer require symfony/webpack-encore-bundle J'installe ensuite les dépendances de Tailwind : yarn add --dev @symfony/webpack-encore tailwindcss postcss-loader autoprefixer Avec ces deux commandes, je dispose d'un répertoire `assets` et `node_modules` à la racine de mon projet. Il contient mes images, CSS et JS. J'ai également le package.json pour les dépendances et le webpack.config.js pour configurer la compilation. Je vais devoir ajouter dans tout ce fatras le style de Tailwind. Je crée alors le fichier `assets/styles/tailwind.css` : @tailwind base; @tailwind components; @tailwind utilities; Je vois également que je peux créer un fichier de configuration `tailwind.config.js` à la racine du projet pour venir personnaliser la configuration de base. Je ne sais pas encore ce que je vais en faire, mais allons-y : module.exports = { theme: { extend: {} }, variants: {}, plugins: [], prefix: '', } Pour charger tout ça, la doc m'indique que je dois utiliser l'outil `postcss` si je travaille avec Webpack. Hop hop hop ! Par contre, la doc n'indique pas son usage, j'ai dû fouiner sur internet. Je crée le fichier `postcss.config.js` à la racine du projet : const tailwindcss = require('tailwindcss'); module.exports = { plugins: [ tailwindcss('./tailwind.config.js'), require('autoprefixer'), require('postcss-import') ] } Je n'ai pas encore compilé mais, je suis confiant (mais si naïf !). Au tour de Webpack : je modifie la configuration pour lui donner les plugins et CSS à manger. Le CSS : .addStyleEntry('tailwind', './assets/styles/tailwind.css') Suivi de l’activation de `postcss` : .enablePostCssLoader((options) => { options.config = { path: './postcss.config.js' }; }) yarn encore dev BOOM Error, le naïf... J'ai 2 problèmes, j'ai besoin de `postcss-import`. Qu'à cela ne tienne : yarn add postcss-import yarn encore dev BOOM Error, le naïf... Tailwind utilise le très récent `postcss` dans sa version 8, mais mon Webpack l'utilise dans sa version 7. J'ai un petit problème de compatibilité, je fouine, je fouine et ouf ! Dans la doc de Tailwind, ils ont anticipé ce problème et ça, j’apprécie : yarn remove tailwindcss postcss-import postcss-loader autoprefixer yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 yarn add postcss-loader@^3.0.0 postcss-import@^12.0 Dès que mes autres dépendances auront fait la mise à jour je pourrais supprimer la couche de compatibilité : yarn remove tailwindcss @tailwindcss/postcss7-compat yarn add tailwindcss@latest postcss@latest autoprefixer@latest yarn encore dev Joie ! Naïf Niveau 2 ! Il ne me reste plus qu'à parcourir la doc, les paradigmes et exemples d'intégration pour tenter de rendre quelque chose. Des colonnes, des boutons, un menu, du responsive, des tableaux, un login, de quoi créer un compte. Voilà la somme des éléments que j'ai intégrés durant ma soirée, avec Independence Day en fond (le 2 n’existe pas à mes yeux). Après 2h33 minutes, voici un aperçu du résultat : Je ne suis pas fan dans l'immédiat de Tailwind. Oui, ça marche, ça compile et fait un plus petit fichier CSS. Par contre, si je l'utilise tel quel j'obtiens du HTML pas très appétissant à lire : <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:w-full lg:pb-28 xl:pb-32"> <div class="relative pt-6 px-4 sm:px-6 lg:px-8"> <nav class="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global"> <div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0"> Ou encore : <div role="menu" aria-orientation="vertical" aria-labelledby="main-menu"> <div class="px-2 pt-2 pb-3 space-y-1" role="none"> {% if is_granted('ROLE_ADMIN') %} <a href="{{ path('lobby') }}" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Rejoindre le lobby</a> <a href="{{ path('lobbyPending') }}" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Visualiser le lobby</a> {% else %} <a href="{{ path('lobby') }}" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Rejoindre le lobby</a> <a href="{{ path('match_maker_index') }}" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Consulter mes matchs</a> {% endif %} </div> <div role="none"> <a href="{{ path('app_logout') }}" class="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100" role="menuitem"> Se déconnecter </a> </div> </div> Pour faire propre, il faut passer un temps monstrueux à faire des agrégations : .menu__link { @apply block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100; } Le `@apply` permettant la détection par Tailwind dans le CSS. Au final, si je dois passer tout ce temps à apprendre leur nomenclature pour traduire dans ma tête ce que ça fait en vrai CSS et l'appliquer à nouveau, le vieux que je suis n'est pas convaincu. À ce compte-là j'aime autant la satisfaction de peaufiner mon CSS en l'écrivant sans surcouche : j'aurais le même résultat et de la frustration de phase de découverte en moins. En début d'année, j'ai passé un peu (c'est faux, des heures) de temps sur la chaîne Youtube de Kevin Powell. Ses vidéos sont de vraies pépites pour ceux qui, comme moi, ne sont pas super super forts en intégration CSS mais qui veulent se débrouiller et découvrir comment réaliser des intégrations de pages complètes en partant du mobile-first vers le full-desktop. Je vois vraiment Tailwind comme un assistant sous stéroïdes de l'intégrateur indécis. Selon moi, on va aussi vite – voire plus vite – à intégrer une maquette passée entre les mains d'un bon webdesigner que de peaufiner la configuration de Tailwind et de nos classes intermédiaires. Bien entendu, je ne suis pas fermé aux réflexions et approches plus modernes. En lisant l'article de Adam Wathan, je comprends bien qu'il y a les 2 écoles mais à titre personnel, je n'aime pas avoir 27 classes sur mon HTML. Un "Hardcore" intégrateur en accord avec l'article de Adam trouvera des choses à reprocher à mon point de vue mais comme je ne suis pas un développeur front, je n'ai pas la même sensibilité. Petit point intéressant à suivre pour Tailwind, c'est qu'en cas de "pas le choix" et "faut aller vite" ils ont un site de snippets avec des cas d'usage : https://tailwindui.com/. Il y a quelques snippets offerts (une vingtaine je dirais, je n'ai pas compté, et je viens de fermer l'onglet ^^') et pour les autres il faut payer. À côté de ça, AlpineJS ça marche aussi. Je n’ai pas fait grand chose avec (juste des transitions et de l'affichage #jQueryNextGen) mais on trouve la même approche que React/Vue : des attributs dans les balises HTML, des directives, quelques variables d'état, un peu de réactivité... Ça fait le job quand on n’a pas grand-chose à faire. On a la possibilité de "bind" une directive avec une fonction JS pour ajouter du comportement. Ça peut s'avérer utile, mais sachant à l'avance que le projet va grandir, j'aime autant mettre directement Vuejs ou React. Quitte à choisir un entre-deux, ce serait SvelteJS. Mais je ne m’étendrai pas plus sur le sujet, ce n’est pas le but de cet article. Pour conclure, certains y trouveront leur compte, ce qui n'est pas mon cas, mais je peux comprendre l'engouement dont je soupçonne l'habile campagne marketing de Tailwind d'y être pour quelque chose. Merci de m'avoir lu, et à bientôt !
Nous clôturons notre série de workshops de 2020 avec deux jours consacrés à Vue.js en compagnie de Marion Agé, directrice technique chez Les-Tilleuls.coop. Nous vous donnons rendez-vous les 8 et 9 décembre en ligne afin de découvrir cet outil qui s'est fait une place de choix dans le monde bien peuplé des frameworks JavaScript. Grâce à son accessibilité et sa courbe d'apprentissage rapide, Vue.js permet l'intégration de composants dynamiques et le développement d'applications riches en fonctionnalités. Lors de cet atelier de 2 jours, vous découvrirez en profondeur l'écosystème de ce framework, des bases jusqu'à son utilisation dans un environnement avancé et optimisé. Bonus à la carte : la version 3 de Vue.js a récemment fait l'objet d'une complète réécriture et même si l'écosystème n'est pas encore complètement prêt, Marion vous proposera d'y jeter un œil, et de découvrir la migration et les nouveautés de cette version. Ce workshop, d'une durée de 2 jours se déroule lieu en ligne, l'accès à la session vous sera communiqué lors de la convocation à l'événement (envoyée 48h avant le jour J). De plus, cet événement est éligible aux financement par les OPCO et FNE : contactez-nous si vous avez besoin d'aide dans la constitution de votre dossier, un membre de notre pôle formation vous aidera ! Vous souhaitez des informations additionnelles au sujet du programme ou vous souhaitez discuter d'une formation sur-mesure ? Contactez-nous !
Il y a quelques jours, nous participions à l’édition en ligne du Forum PHP 2020. Cette dix-neuvième édition, circonstances sanitaires obligent, était diffusée en direct depuis Livestorm, la plateforme de streaming déjà utilisée par l’AFUP lors de l’AFUP Day 2020. Durant ces deux jours axés sur PHP et son écosystème, et à la veille de la version 8 du langage, le temps était à la réflexion sur notre place en tant que développeur·se au cœur des produits que nous développons. Photo de groupe en remote pour la cloture du #forumPHP @afup. Ca se bouscule! pic.twitter.com/svQ0faqNDF — Damien Seguy (@faguo) October 23, 2020 Pleins feux sur la 8ème version de PHP et bilan de ses 25 années d’existence Gabriel Caruso a présenté les nouveautés de PHP 8. Parmi les plus attendues, nous retrouvons bien sûr les attributs - un équivalent aux annotations de Java, dont l’un des objectifs est de redonner aux annotations de la PhpDoc leur rôle originel : documenter le code. Autres nouveautés du langage, le support natif des types d’unions 2.0, qui permettent de définir plusieurs types à une même variable, le bloc match, une alternative plus rapide à écrire et plus stricte en termes de typage au bloc switch, ou encore la possibilité de fournir les valeurs aux arguments d’une fonction en les nommant, comme en Python. Concernant la compilation Just In Time (JIT), il ne faudra pas s’attendre à des améliorations de performances aussi importantes que pour PHP 7.0. Gabriel a pour autant rappelé que c’est dans le cadre de processus lourds que le compilateur JIT tire réellement son épingle du jeu, les cas d’usage simples comme une API profitant généralement déjà de bonnes performances. Qui dit nouvelle version majeure, dit rupture de rétrocompatibilité. Parmi celles qui pourront vous donner des cheveux blancs, on notera : La signature des méthodes magiques est maintenant vérifiée et une erreur surviendra si elle est incorrecte. Fini, les méthodes __toString(): bool ! L'API de réflexion largement améliorée, elle fournit maintenant plus d’informations sur les fonctions ; La correction d’une absurdité sur l’opérateur d’égalité : désormais, 0 == ‘foo’ et 42 == ‘42foo’ ne retourneront plus true mais false. Pour finir, Gabriel a tenu à rassurer concernant le statut de PHP pour Windows : pour rappel, Microsoft a récemment annoncé qu'ils mettaient fin à leur support de PHP sur leur système d'exploitation, ce qui n’a pas manqué d’inquiéter la communauté sur l’avenir du langage sur cette plateforme. Microsoft a en réalité décidé de ne plus compiler le binaire de PHP lui-même mais continue cependant de contribuer activement à PHP. La core team du langage a par ailleurs d'ores et déjà trouvé une solution pour continuer de distribuer PHP sur le système au menu Démarrer. Zeev Suraski, contributeur à PHP depuis sa version 3, a pour sa part fait le bilan des 25 années d’existence du langage. Après des débuts très modestes et contre toute attente, le PHP s'est rapidement imposé comme le langage le plus important du Web, alimentant un pourcentage ahurissant de serveurs et certains des principaux sites Web que nous utilisons tous quotidiennement. Zeev a retracé l’historique de PHP, illustrant les volontés de ses créateurs à la fois de se démarquer et de s’inspirer d’autres langages, mais surtout nous retiendrons leur volonté de conserver un langage flexible, dont le typage fort doit rester une option. Il est fier de ce qui a été accompli jusqu’ici même s’il reconnaît également les faiblesses du langage comme certaines inconsistances, qu’il espère voir disparaître petit à petit. Enfin il nous a encouragé à participer et contribuer à notre échelle, que ce soit via les votes sur les RFC, les propositions, les corrections de bug, ou même de tester nos applications. Nous ne sommes pas tous Rogue ou JetBrain. En résumé une jolie promenade historique ! L'écosystème PHP toujours bien représenté PHP bénéficie d’un riche écosystème où bibliothèques et outils divers rayonnent. Pendant le Forum PHP, nous avons encore eu droit à des conférences variées et nous avons eu la chance d’avoir plusieurs membres de notre équipe dans le line up. Notre coopératrice Jade Bellereau a présenté Click ‘N’ Collect, notre solution basée sur Sylius et permettant aux commerçants de poursuivre une activité commerciale dans le respect des consignes sanitaires actuelles. Ses slides viennent d’être publiées ! Kévin Dunglas nous a présenté Vulcain.rocks, l’outil qui rend obsolète GraphQL. Cet outil permet de coupler une API REST en utilisant les capacités hypermédia de celle-ci (souvent avec une documentation OpenAPI, et avec les formats JSON-LD, JSON:API, ou HAL) afin de requêter à l’aide d’un JsonPointer (format s'apparentant à une expression régulière) fourni dans un entête HTTP. Cet outil exploite les nouvelles capacités de HTTP/2 afin d’aller chercher en amont les ressources associées réclamées par l’expression de cet en-tête. Le but final étant d’avoir les données disponibles sans avoir à effectuer la requête côté client. Cette révolution permet une plus grande souplesse tout en respectant l’architecture REST, permet d’exploiter du cache et d’accélérer jusqu’à 40x le temps de réponse. Parce que Kévin n’est jamais sans surprise, il en a profité pour nous annoncer qu’il a travaillé sur une intégration serveur avec Caddy afin d‘intégrer cache et reverse proxy d’un seul tenant avec Vulcain. Antoine Bluchet quant à lui nous a proposé une démonstration technique avançant les dernières nouveautés et capacités de temps réel avec PHP. Il aura enflammé le chat d’applaudissements à l’aide d’un bot relié à une application PHP, distribuant de manière asynchrone grâce à Mercure.rocks et les EventSources. Côté PHP c’est le composant HttpClient de Symfony qui s’affaire pour expédier les messages. Une belle démonstration de capacité qui s’accompagne d’un benchmark de Mercure dont vous pourrez retrouver les résultats ici et là. De son côté, Antti Rössi nous a proposé de pirater nous-même notre propre application afin de vérifier sa robustesse, avant que quelqu’un d’autre n’en ait l’idée. Injection SQL, injection d’objet, élévation de privilège… sont autant de possibilités pour un acteur malveillant de nuire à votre application, et par conséquent, à votre activité. Après une démonstration impressionnante de l’exploitation de chacune de ces failles, Antti nous a donné quelques conseils pour éviter une situation désastreuse : ne jamais faire confiance à l’utilisateur ; mettre à jour les logiciels exécutés en production le plus rapidement possible ; ne jamais déployer du code que l’on ne comprend pas ; suivre le principe du moindre privilège : moins une application possède de privilèges et mieux elle se portera ; apprendre à réfléchir comme un pirate et apprendre les bases du piratage ; toujours se souvenir qu’un grand pouvoir implique de grandes responsabilités. L'impact des conférences “non techniques” Bien que toujours liée à PHP, cette édition 2020 nous a permis de nous remettre en question sur la place de l’éthique dans l’informatique et sur les produits que nous développons, mais aussi sur la place (parfois trop faible) de la bienveillance et de la communication dans les équipes. À ce sujet, Kim Laï Trinh, anciennement développeur à la Ruche qui dit Oui, nous a fait part de son analyse des difficultés inhérentes à la revue de code au sein d’une même équipe, rappelant que “vous n’êtes pas votre code”, allant même jusqu’à aborder des sujets délicats tels que les discriminations. Agnès Haasser, développeuse indépendante, nous a quant à elle incités à explorer des solutions basées sur la communication non-violente et l’empathie, dont elle a elle-même fait l’expérience positive d’abord dans son rôle de parent, puis dans son travail. Nous avons été particulièrement touchés par la sincérité de ces conférences. Le Forum PHP 2020 a aussi clôturé son événement avec le chercheur Gilles Dowek, qui a rappelé lors de sa conférence au sujet de la place de l’éthique dans le web, que les études d’informatique n’étaient pas genrées. La communauté présente, même à distance La communauté ne pouvant pas déambuler comme d’habitude à travers les stands, elle avait néanmoins l’opportunité de rencontrer les sponsors et participant·e·s de l’événement sur Work Adventure, une solution ludique développée par The Coding Machine qui nous a fort plu ! Rejoignez l'équipe des Tilleuls sur notre stand virtuel au #ForumPHP de l'@afup ! pic.twitter.com/UQPlJ9o1LF — Les-Tilleuls.coop (@coopTilleuls) October 22, 2020 Malgré le contexte sanitaire, l’AFUP a su rebondir et offrir à sa communauté deux jours de partage de connaissances. S’agissant de mon premier Forum PHP, je suis très heureux d’avoir pu partager ce moment de convivialité virtuelle avec la communauté bien réelle. Les conférences sur l’éthique et la bienveillance, encore trop rares dans les événements tech de ce type, m’ont particulièrement plu. Il ne reste plus qu’à croiser les doigts pour que le prochain Forum puisse avoir lieu en présentiel !
Quand Vercel a annoncé sa première conférence dédiée intégralement à Next.js et bien que j'aime vraiment leurs produits, j'étais légèrement perplexe sur le fait que le sujet pourrait remplir plusieurs heures. Loin de m'arrêter à mes a priori, je me suis précipité pour prendre mon billet gratuit. Dans les jours suivants, les annonces pleuvaient : l'ouverture d'un énorme discord, jusqu'à 4 conférences en simultané... J'ai commencé à réaliser que je m'étais trompé et qu'ils avaient prévu quelque chose de costaud. Just got my free ticket to #nextjsconf, grab yours! Let’s build a better web with #nextjs: https://t.co/HIMEaMa9A0 via @vercel — Grégory Copin #OnEstLaTech (@gregcop1) October 19, 2020 Pour sa première édition, la conférence dédiée à Next.js a rassemblé jusqu'à 35 000 spectateurs simultanés et à part de miniscules bugs par endroit, difficile de dire que ça n'a pas été une immense réussite. D'un point de vue organisationnel, discord rassemblait tous les échanges autour des conférences, des sponsors, des offres d'emploi et de la communauté en général, car c'était la première "révélation". Cet espace restera ouvert et deviendra le lieu d'échange numéro 1 pour parler de Next.js. Le site, quant à lui changeait quelque peu d'apparence pour ouvrir de nouvelles rubriques dédiées à chacune des tracks, un espace réservé à la présentation de chaque partenaire et une liste d'offres d'emploi (le tout interconnecté avec Discord). Au fur et à mesure du déroulement de la keynote d'ouverture, de nouvelles rubriques apparaissaient sur le site de Next et sur leur repos pour décrire leurs nouveaux produits. Il est assez amusant de constater que dans le même mois, React est passé en version 17.0 (sans réel changement) et que dans le même temps Vercel publiait la version 10.0 de Next avec pléthore d'annonces. Outre un allégement substantiel du code, cette nouvelle version arrive avec son lot de surprises. Elle embarque des composants dédiés à l'optimisation d'image et promet depuis n'importe quel format source de fournir l'image adaptée au besoin du client (taille d'écran, bande passante, ...). L'internationalisation est également un problème récurrent lorsqu'on travaille avec Next. Longtemps, nous avons pu compter sur des solutions telles que next-i18n, mais l'affaire semble aujourd'hui entendue (ou la question vite répondue, c'est selon) dans la mesure où Next embarque désormais nativement des outils de traduction et de routing. Sans doute par peur de ne pas en faire assez, une liste de solutions dédiées à l'analyse continue des performances de vos sites est embarquée dans la version 10. Peut-être voyez-vous des liens se tisser entre toutes ces annonces et vous avez raison, car Vercel cache encore une carte dans son jeu : Next.js Commerce. En se basant sur la solution d'eshop headless BigCommerce, Vercel a sorti un kit de démarrage de site e-commerce clé en main, prêt pour le SEO, traduisible, thématisable, optimisé pour le mobile et avec une suite de hooks qui faciliteront la vie aux développeurs React. Cette annonce pourrait paraître trop belle pour être vraie, mais quand on connaît le soin que Vercel apporte à ses créations, on vient peut-être d'assister à la naissance d'un produit vraiment intéressant. Le confinement nous offre parfois des décors de conférence assez cocasses. Dans l'ensemble et si vous aimez que la tech ne parle que de tech, vous trouverez les conférences intéressantes. À mon goût, trop de conférenciers étaient venus pour vendre leur produit (même si certains étaient intéressants : BigCommerce, Storyblok, Sanity, ...), il manquait de sujets dédiés aux enjeux sociaux, environnementaux voire politiques, mais peut-être chercheront-ils un meilleur équilibre dans les années à venir... ou pas. Deux conférences ont particulièrement attiré mon attention, sans que le contenu ne soit révolutionnaire, elles ont su se détacher des autres. Celle de Cassidy Williams, déjà parce que c'est la première fois que je vois une conférencière en pyjama licorne, mais surtout parce qu'elle a réussi à créer un lien avec un public pourtant distant au travers de ses histoires interactives, loufoques et "angoissantes". Sean C Davis, quant à lui, s'est approprié le format et a su tirer partie de l'enregistrement des conférences à l'avance. Montage vidéo, storytelling, cut, il a pioché dans les codes des youtubers (de façon moins professionnelle bien sûr) pour créer ce qui pourrait bien être un nouveau genre de talk à l'avenir... En tout cas, ça m'a donné envie de pousser plus loin ce concept et de m'amuser avec le format. C'était ma première conférence confiné et je dois dire que j'ai été enchanté. Pas besoin de faire la queue pour des petits fours tièdes, de s'entasser à l'entrée d'une salle pour finalement s'asseoir par terre ou d'être collé à d'autres développeurs dans des pièces mal aérées. Bien sûr que ça manque de ne pas voir les copains et de ne pas pouvoir échanger comme on le fait habituellement, mais l'organisation de Vercel a été telle, tout était tellement fluide et léché que je n'ai pas eu l'impression d'assister à une adaptation de format dûe aux conditions sanitaires, mais peut-être à l'émergence de ce que pourraient être les rassemblements de la tech à l'avenir.
