AFUP AFUP Day 2024 Baromètre Planète PHP PUFA
planete-php.fr Articles Blogs Infos RSS Feed Atom Feed Twitter

Articles

Construire un Design System robuste avec React : les fondations essentielles

Eleven labs 28/11/2023

Lors de la conception de vos interfaces, il est probable que vous ayez déjà eu recours à des bibliothèques de composants.
Cependant, il peut arriver que celles-ci ne répondent pas de manière optimale à des cas particuliers ou à des exigences spécifiques de votre application, notamment dans des contextes métiers spécifiques.
Vous décidez alors de mettre en place un écosystème qui rassemble vos propres composants, typographies, couleurs, documentation et des directives d'utilisation : le Design System.
Dans cet article, nous allons vous expliquer comment construire un Design System robuste avec React.


Contexte


Avant de plonger dans la mise en place d'un Design System robuste avec React, il est essentiel de comprendre les fondamentaux de ce domaine. Nous n'allons revenir que brièvement dessus, car nos derniers articles parus traitent justement de ces fondamentaux.


Design System


Un Design System réunit un ensemble d'éléments graphiques, des typographies, des palettes de couleurs, de la documentation et des directives d'utilisation.
C'est un référenciel qui garantit une cohérence visuelle et fonctionnelle qui apporte un cadre et des règles à respecter.


Atomic Design


L'Atomic Design est une approche de conception de systèmes d'interface utilisateur et de design d'interaction. Cette approche consiste à découper les composants en éléments modulaires : Atome, Molecule, Organisme, Templates, et Pages.


Design token


Les Design Token sont un ensemble de valeurs ou de variables utilisés pour référencer plusieurs types d'éléments tels que les couleurs, typographies, espacements et bien d'autres.
Ces tokens permettent entre autres, de faciliter la mise à jour des styles et de maîtriser les déclinaisons de thèmes qui partagent des références communes.


BEM


La méthodologie BEM donne au CSS une convention de structuration, de nommage et d’organisation pour vos composants.
BEM envisage la composition d’une page web en plusieurs Blocks, qui contiennent des Elements, et ces derniers peuvent varier grâce à des Modifiers.


System Props


Les System Props sont une liste de propriétés permettant de personnaliser instantanément le style de vos composants.
Ces System Props sont des raccourcis pratiques pour ajouter des styles complémentaires qui permettent de modifier le comportement et l'apparence de vos composants.

Voir la suite

Le jeu de mise en relation du Forum PHP 2023 est open-source

AFUP 27/11/2023

Le concept : retrouvez votre équipe mystère !


Lors de la soirée communautaire du Forum PHP 2023, l'AFUP souhaitait permettre aux membres du public de se découvrir et d'encourager les rencontres. Pour ce faire, elle a développé un jeu en s'appuyant sur les badges des participant•e•s. En flashant un QR code y figurant, la personne découvrait à quelle équipe, parmi 4, elle avait été secrètement attribuée lors de son inscription au Forum PHP 2023. Sa mission lors du jeu était alors de retrouver le maximum de membres de son équipe, en flashant le QR code des badges des autres membres du public, et participant ainsi au succès global de son équipe.
L’équipe gagnante étant celle qui retrouve un maximum de ses membres sur le temps imparti, tout en multipliant les connexions entre ses membres : l'équipe Axolotl a remporté la partie lors du Forum PHP 2023 ! Le jeu a été salué par le public, avec plus de 80% des gens y participant au cours de la soirée.


Le code du jeu est ouvert


Afin de permettre à la communauté de reproduire le jeu, l'équipe AFUP le met à disposition en open source (sous une licence MIT). Il consiste en un projet symfony tout ce qu’il y a de plus classique avec une base MySQL. Les équipes et les flashs entre les personnes se trouvent dans des tables dédiées. Le document des règles du jeu mises en place pour le Forum PHP 2023 est également disponible. Nous espérons que vous pourrez ainsi vous l'approprier et profiter de cet outil qui a mis une bonne ambiance lors du dernier Forum PHP !

Sachez cependant que le code n'a pas été écrit en le pensant de façon pérenne et/ou réutilisable : le but principal était d’avoir un outil fonctionnel pour la soirée. Nous ne comptons pas non plus y faire de modification ni le maintenir.

Un merci tout particulier à Clever Cloud, chez qui nous avons hébergé ce projet et qui a permis d’en simplifier le déploiement et d’en assurer la scalabilité.



Vous avez des questions ? Contactez le pôle outils de l'AFUP pour tout comprendre du code du jeu. Ce genre de défi vous amuse ? Vous aimeriez participer à développer des outils pour l'AFUP ? Le pôle outils est toujours à la recherche de personnes bénévoles pour contribuer aux projets internes. Contactez-nous !

REX Studio : Intégration de composants React avec Varnish ESI dans un site No Code

Eleven labs 27/11/2023

Voici un cas client concret sur lequel nous avons travaillé au sein du Studio Eleven Labs : la refonte d'une application web corporate et e-commerce pour répondre à de nouvelles problématiques.


Commençons par décrire cette application avant de détailler les nouvelles problématiques, puis de présenter nos solutions pour y répondre.


Contexte de départ


Fonctionnalités de l'application


Ce site inclut deux parties fonctionnellement différentes :


  • Site vitrine sur lequel sont affichés des contenus éditoriaux : informations présentant l'entreprise, ainsi que ses produits.

  • Plateforme e-commerce permettant d'acheter ces produits, et également donnant accès au compte de l'utilisateur connecté dans lequel il peut notamment suivre ses commandes.

Ces deux parties doivent être complètement intégrées pour que l'utilisateur puisse naviguer sans contrainte entre les différentes pages, surtout pour passer des pages de présentation des produits vers les parcours e-commerce lui permettant de les acheter.
Cela implique non seulement d'avoir des liens entre ces deux types de pages mais aussi d'avoir des composants e-commerce sur les pages éditoriales. Par exemple, sur une page éditoriale présentant une famille de produits, on souhaite avoir un composant e-commerce qui affiche les produits de cette famille, sous forme de carrousel, pour permettre l'ajout direct au panier.



Architecture existante


Jusqu'à présent, ce site, incluant ces deux parties différentes, était géré dans une seule application web React, construite de manière complètement personnalisée, ce qui permettait d'intégrer comme nous le souhaitions ces contenus éditoriaux servis par un CMS headless et la plateforme e-commerce, comme représenté sur le schéma ci-dessous :



Mais cette approche mise en place par notre équipe il y a quelques années présentait d'autres problématiques que nous allons voir dans la partie suivante.


Nos problématiques


Plus de liberté pour les éditeurs de contenus


Pour ce client, l'ensemble des contenus corporate et produits du site sont rédigés par les équipes marketing qui n'ont aucune connaissance technique mais ont des envies de personnalisations bien particulières.


Dans le backoffice du CMS headless existant, ils ont la possibilité d'éditer des blocs de contenus (aussi appelés 'Slices' dans Prismic CMS) qui sont ensuite affichés sur le front au sein de templates prédéfinis. Ces templates ayant été définis il y a plusieurs années, ils ne répondent plus forcément aux nouveaux besoins et de manière générale ils limitent les éditeurs à leur simple utilisation : les éditeurs ne peuvent pas ajouter de nouveaux templates sans faire appel aux développeurs.


Ainsi ces éditeurs aimeraient pouvoir avoir complète liberté sur la création de templates de pages, avec la possibilité de glisser et déposer leur différents blocs de contenus où bon leur semble.

Voir la suite

Optimisez les perfs de votre app avec Go et Symfony Messenger

Les-Tilleuls.coop 23/11/2023

Retrouvez la version originale de cet article sur cette page.





Symfony Messenger est un composant puissant dans l’écosystème Symfony qui permet de gérer l’envoi et la réception de messages dans une application PHP. Il devient particulièrement essentiel à mesure que votre application évolue et nécessite une gestion efficace des messages. Lorsque votre application atteint une certaine échelle, l’efficacité du traitement des messages devient cruciale pour maintenir des performances élevées. C’est là qu’intervient l’idée d’écrire des workers dans un langage autre que PHP. Cela permet de tirer parti des forces spécifiques de chaque langage pour optimiser le traitement des messages.





De son côté, Go, un langage de programmation que nous affectionnons beaucoup chez Les-Tilleuls.coop, se distingue par sa simplicité, sa rapidité d’exécution et sa gestion efficace des concurrences. Ces caractéristiques en font un choix idéal pour le traitement asynchrone de messages, améliorant ainsi les performances globales de votre application.





Coupler le meilleur des deux mondes avec Gosumer





Gosumer est un package innovant conçu pour améliorer les performances de votre application en consommant efficacement les messages de Symfony Messenger avec l’aide de code Go. Il s’intègre très facilement avec des technologies telles que PostgreSQL, AMQP et Redis, offrant ainsi aux développeuses et développeurs la possibilité d’optimiser le traitement des messages en toute simplicité.





Vous pouvez retrouver le code source de ce package sur GitHub.





Le fonctionnement de Gosumer





Imaginons que vous ayez une application Go qui doit traiter des messages Symfony Messenger de manière efficace :







Dans cet exemple, nous définissons une structure Message représentant les données des messages entrants, la même structure que celle que vous avez définie côté Symfony (PHP). Ensuite, nous écoutons tous les messages avec la fonction gosumer.listen et les traitons avec processMessage. Une fois le message traité et sans erreurs, il est supprimé de la base de données. En cas d’erreur pendant le traitement, le message n’est pas supprimé et sera de nouveau consommé ultérieurement.





N’hésitez pas à vous rendre sur GitHub pour explorer le projet et le tester ! Notre coopérative, spécialisée dans de nombreux langages de programmation, est à votre disposition pour l’optimisation des performances de vos projets.

Voir la suite

System Props : Flexibilité et cohérence dans le Design

Eleven labs 10/11/2023

Dans cet article, nous allons vous présenter le concept de System Props en illustrant leurs avantages avec des exemples concrets d'utilisation. Nous expliquerons aussi comment les mettre en place sur vos projets, comme nous l'avons fait sur les nôtres au sein du Studio Eleven Labs à travers l'implémentation d'un Design System.


Que sont les System Props ?


Les System Props, également connues sous le nom de System Properties ou Style Props, sont une liste de propriétés spécialement conçues pour personnaliser instantanément le style de vos composants. Contrairement aux props traditionnelles, ces System Props ajoutent des options supplémentaires pour ajuster le comportement et l'apparence de vos composants. Par exemple, des SpacingSystemProps facilitent la définition rapide de l'espacement de vos éléments, tandis que des ColorSystemProps mettent à votre disposition une palette de couleurs prédéfinie pour modifier les fonds, les couleurs de texte, les bordures, et plus encore. En intégrant ces propriétés dans vos composants, vous économisez du temps en utilisant des raccourcis pratiques pour personnaliser leur style. Cela en fait un atout précieux, notamment lors de la création d'un Design System.


Les atouts majeurs des System Props


Les System Props offrent plusieurs avantages qui contribuent à améliorer la réutilisabilité, la prévisibilité et la standardisation de votre projet. Voici quelques-uns de ses atouts :


  • Personnalisation cohérente :

Associées aux Design Tokens, elles permettent de personnaliser uniformément un composant tout en gardant la flexibilité nécessaire pour des ajustements. Cette combinaison garantit la cohérence visuelle et la réactivité, en assurant que les composants respectent les normes tout en s'adaptant aux besoins changeants.


  • Réduction de la duplication de code :

La création de standards de personnalisation réutilisables simplifie la maintenance et garantit que des styles similaires ne sont pas recréés de manière redondante. Selon les besoins de votre projet, il est possible d'avoir des variantes de votre composant sans avoir à créer un nouveau composant à chaque fois. Vous pourriez ainsi utiliser le composant Card plusieurs fois avec des couleurs et des espacements différents.


  • Gain de temps :

En économisant du temps sur des personnalisations de style mineures et récurrentes, cela permet de se concentrer sur des aspects plus complexes du développement, tels que la logique métier ou les fonctionnalités avancées.

Voir la suite

Micro frontend : la solution pour une meilleure maintenabilité de vos applications web

Eleven labs 06/11/2023

Dans cet article, nous introduirons la notion de "micro frontend" et ses avantages. Ensuite, nous donnerons des cas d'usage concrets et des exemples d'implémentation basés sur notre expérience réelle au sein du Studio Eleven Labs pour des projets internes et des projets clients. Bonne lecture !


Qu'est-ce que le "micro frontend" ?


À mesure que les applications web évoluent, elles ont tendance à devenir de plus en plus volumineuses et complexes, parfois obsolètes en raison de l'utilisation de frameworks non maintenus. Ces applications posent de nombreux défis, notamment en matière de maintenance et d'évolutivité. Les mises à jour, l'ajout de nouvelles fonctionnalités et la correction des bugs deviennent de plus en plus compliqués.


C'est là que le concept de micro frontend intervient en tant que solution à cette problématique.


Ce concept a été introduit pour la première fois en novembre 2016 dans le ThoughtWorks Technology Radar. Il a ensuite rencontré un fort succès, et de gros acteurs comme Spotify, Ikea, ou Leroy Merlin (ADEO) en France ont pu utiliser cette approche.


Cette architecture s'inspire des principes des microservices et les transpose dans le domaine du développement frontend. Elle repose sur le découpage de l'application web en composants autonomes, les "micro frontends", responsables de domaines et de fonctions spécifiques, qui communiquent et fonctionnent ensemble pour former une seule application frontend.


Chaque micro frontend peut être développé indépendamment, testé, déployé et évolué sans perturber le reste de l'application. De plus, le micro frontend permet d'utiliser divers langages et frameworks sur chaque brique. Cette modularité et cette indépendance de chaque composant offrent une grande flexibilité aux équipes de développement, qui peuvent se concentrer sur des domaines spécifiques de l'application.



Cependant, il est important de noter que dans la réalité, la mise en place du micro frontend peut être complexe, à la fois d'un point de vue technique et organisationnel :


  • Sur le plan technique, la définition d'une architecture solide, la coordination entre les micro frontends, la gestion des dépendances peuvent représenter des défis significatifs.

  • Du point de vue organisationnel, cette approche implique de définir de nouvelles organisations d'équipes.

Ainsi, bien que cette approche soit puissante, son succès dépendra d'une planification minutieuse et de l'expertise technique des équipes.

Voir la suite

L'enquête 2023 du baromètre des salaires en PHP bat des records de participation

AFUP 02/11/2023

Une participation en nette hausse


L'enquête a ouvert le 18 septembre 2023, et ce pour une période de 3 mois. À mi-parcours, en ce début novembre, nous enregistrons déjà 617 réponses : pour comparaison, l'édition 2022 avait recueilli 620 participations en tout et pour tout, et l'édition précédente n'avait atteint le même niveau qu'à la fin novembre 2021. D'excellents chiffres de participation qui augurent des résultats précis et circonstanciés, ce qui ne pourra que renforcer encore la crédibilité du baromètre des salaires comme enquête de référence pour notre secteur.


Qui participe ?


En ce début novembre, certaines tendances se dessinent concernant le profil des participants et participantes :


  • 90% sont en CDI

  • 80% sont devs ou lead devs

  • 20% sont à Lyon, 15% sont à Paris

  • 70% utilisent PHP 8.1 ou 8.2

  • 92% sont des hommes et 8% sont des femmes

  • la majorité des personnes se situe dans la trentaine.

    L'enquête est ouverte à tous les devs de France, quel que soit leur type de contrat, leur ancienneté et leur parcours professionnel : répondez en tout anonymat et en quelques minutes seulement, et faites passer à vos collègues. Ne laissons pas l'enquête 2023 s'essouffler en si bon chemin !

    Rappel sur le baromètre de salaires en PHP


    Grâce au baromètre, la personne salariée ou en indépendant peut se positionner correctement sur le marché du travail, et la direction d'entreprise y trouve un outil précieux pour gérer la carrière de ses équipes et l'évolution de leur rémunération. Le/la dev peut comparer son salaire avec des profils identiques, et l'entreprise découvre un état des lieux du développement PHP. Cette enquête est utile et ses résultats sont riches en enseignements : participez en quelques minutes et en tout anonymat avant le 18 décembre 2023 !


Comment implémenter une Event Driven Architecture ? Définition et exemples

Eleven labs 23/10/2023

Je vais vous expliquer aujourd'hui dans cet article un cas concret de mise en place d'une architecture orientée événements réalisé pour l'un de nos clients du Studio Eleven Labs. Vous découvrirez dans cet article, ce qu'est concrètement une architecture orientée événements (ou event driven architecture) et comment la mettre en place. Suivez le guide !


Concrètement, qu'est-ce que l'event driven architecture ou l'architecture orientée événements ?


L'architecture orientée événements (Event Driven Architecture) utilise des événements pour déclencher et communiquer entre des services découplés.
Elle est courante dans les applications modernes construites avec des microservices.
Un événement correspond à un changement d'état, ou une mise à jour : commande payée, ou utilisateur créé, par exemple.
Les événements transmettent un état à un instant T (le numéro de transaction, le montant et le numéro de commande).


Les architectures orientées événements comportent trois composants clés : les émetteurs (producers), les transmetteurs (routers) et les consommateurs (consumers).
Un producer publie un événement sur le routeur, qui filtre et transmet les événements aux consumers.
Les services émetteurs et les services consommateurs sont découplés, ce qui leur permet d'être modifiés et déployés de manière indépendante.


Les avantages de la mise en place d'une architecture orientée événements


Découplage : en découplant vos services, ils ne connaissent que le routeur d'événements, ils ne dépendent pas directement les uns des autres.
Cela signifie que vos services sont interopérables : mais si un service tombe en panne, les autres continueront de fonctionner.
Le découplage simplifie le processus d'ajout, de mise à jour ou de suppression de producers et de consumers, permettant des ajustements rapides pour répondre aux nouveaux besoins.
Cela permet également de mettre en place et de respecter les principes SOLID, plus particulièrement le Single Responsability principle.


La maintenabilité : vous n'avez pas besoin d'écrire du code custom pour gérer les événements, le routeur d'événements filtrera et transmettra automatiquement les événements aux consumers.
Le routeur s'occupe également de la coordination entre les producers et consumers.
Ainsi, chaque consumer possède son scope précis. Différentes équipes peuvent maintenir chaque consumer indépendamment, sur des stacks et timelines différentes.


Immutabilité : une fois créés, les événements ne peuvent pas être modifiés, ils peuvent donc être partagés avec plusieurs services sans risque qu'un service modifie ou supprime des informations que d'autres services consommeraient ensuite.

Voir la suite

Quoi de neuf les devs ? Numéro 56 avec l’interview de Lorenzo

Itanea 21/10/2023

Hello les devs,





Le numéro 56 de « Quoi de neuf les devs ? » est sorti hier soir.





J’y recevais Lorenzo que je remercie pour le temps qu’il m’a accordé.





J’aime beaucoup la philosophie de vie de Lorenzo :






“Je pense qu’avoir un métier technique est très intéressant dans le monde actuel mais avoir une autre activité plus “terre à terre” où l’on se crée des souvenirs est important.”


Lorenzo




Pour la suite, vous connaissez la chanson, ce sera dans la mini interview.





Comme chaque semaine, tu retrouveras les autres rubriques avec toujours le plein d’actualité sur le monde du dev.





Cette semaine, parmi tous les sujets abordés, on parlera entre autres de





✅ rugby





✅ JWT





✅ Symfony





✅ emoji





✅ Burn Out





✅ et bien d’autres sujets encore





Bonne lecture et si le contenu te plait et que tu souhaites me soutenir abonne toi et rejoins plus de 1200 devs d’ores et déjà abonné.e.s.





https://go.itanea.fr/nl56


L’article Quoi de neuf les devs ? Numéro 56 avec l’interview de Lorenzo est apparu en premier sur Apprendre le développement Web.


Le Forum PHP 2023 passé, l'AFUP se concentre sur l'AFUP Day 2024

AFUP 19/10/2023

4 villes d'accueil en 2024


L’événement printanier de l’AFUP est en pleine expansion : la dimension multi-destinations de l’événement prendra toute son ampleur en 2024 avec 4 villes d’accueil ! Rendez-vous le vendredi 24 mai à Lille, Lyon, Nancy et Poitiers pour une journée en compagnie des communautés locales comme plus lointaines, les conférenciers et conférencières qui font progresser la communauté, et toutes les entreprises qui font vivre le langage au quotidien.

Chaque ville proposera un programme unique, mettant notamment en avant les valeurs sûres et nouveaux profils de la région. Pour cela, chaque ville a lancé son appel à conférences : choisissez la ville la plus proche de chez vous pour maximiser vos chances et soumettez vos sujets !

Pas l'âme d'un•e conférencier•e ? Venez écouter une sélection de talks de qualité, prenez votre place pour l'événement. Les billetteries proposent actuellement le tarif Early Bird, dans la limite des stocks disponibles ou jusqu'à publication du programme début janvier. Bloquez la date dans votre agenda et rejoignez le grand rassemblement de la communauté PHP sur l’une de ces quatre destinations au printemps prochain !



Retour sur une belle édition du Forum PHP 2023


Comme le veut la tradition, c'est en keynote de clôture du Forum PHP que l'AFUP Day a dévoilé les villes d'accueil de sa prochaine édition. Cette annonce venait conclure deux journées passionnantes pour la communauté PHP, réunie pour une deuxième année consécutive à l'Hôtel New York - The Art of Marvel les 12 et 13 octobre derniers.

Si cette édition a connu une légère baisse de fréquentation cette année - comme d'autres événements techniques en 2023 malheureusement -, elle n'a cependant pas affecté la motivation de l'équipe AFUP à proposer le meilleur à la communauté ainsi que son lot de nouveautés. Parmi elles, une soirée communautaire revisitée grâce à un jeu de mise en relation, le bilan carbone de l'événement calculé pour la première fois, une session de lightning-talks hors-tech qui a permis de découvrir certains speakers bien connus du public sous un nouvel angle, ou encore une nouvelle fresque collaborative composée en Légos. Le programme a également rencontré l'adhésion du public, qu'il s'agisse des talks techniques qui font la réputation du Forum PHP, ou de sujets plus généralistes comme l'équilibre entre vie pro et vie perso, ou encore le burn-out étudiant.

La communauté peut compter sur le Forum PHP 2024, qui s'installera pour une troisième année à Disneyland Paris la même semaine d'octobre l'année prochaine.

AFUP Day, Forum PHP, et meetups dans les antennes : l'AFUP travaille à l'année pour permettre à la communauté de se réunir, de se rencontrer et d'échanger !

Blogs

Infos

Ajouter une source ?

Envoyez un email avec l'URL du site et du flux à planetephpfr AT afup POINT org

Gestion

AFUP