Que fait réellement un développeur Hyvä ?

Si vous envisagez d'embaucher un développeur Hyvä ou de commander une construction Hyvä, il est utile de comprendre ce que le rôle implique réellement. Cet article est la version sans concession : les modèles de code, les outils quotidiens, les types de problèmes qu'un développeur Hyvä résout et comment le rôle diffère du développement frontend Magento généraliste.

La réponse en gros

Un développeur Hyvä construit et maintient des vitrines sur la pile Hyvä Theme + Hyvä Commerce, utilise Tailwind CSS pour le style, Alpine.js pour l'interactivité, le modèle de module Hyvä pour étendre le frontend Magento, et le modèle de module de compatibilité Hyvä pour faire fonctionner les extensions Magento tierces sous Hyvä.

En pratique, cela signifie qu'une semaine typique comprend :

• Écrire des templates .phtml stylés avec Tailwind pour de nouvelles pages ou sections de vitrine
• Construire des composants Alpine.js pour des fonctionnalités interactives (mini-panier, sélecteur d'adresse, variantes configurables)
• Écrire des modules de compatibilité Hyvä pour des extensions Magento payantes sans compatibilité fournisseur
• Optimiser les performances des sites vers un score Lighthouse de 90+ sur mobile
• Réviser le code des collègues, principalement d'autres travaux Hyvä
• Occasionnellement travailler sur le backend Magento, observateurs, plugins, configuration admin

Le rôle est axé sur le frontend mais conscient de Magento. Un développeur frontend pur sans expérience Magento met 3 à 6 mois à se familiariser avec le travail productif sur Hyvä ; un développeur senior Magento Luma met 2 à 4 mois à apprendre les modèles spécifiques à Hyvä.

Les outils quotidiens

Une configuration locale typique d'un développeur Hyvä :

• Éditeur : VS Code ou PhpStorm. Les deux fonctionnent. Le plugin Tailwind CSS IntelliSense est essentiel pour VS Code.
• Environnement de développement local : Warden, DDEV ou Lando exécutant Magento + base de données localement. Hyvä s'installe via Composer comme tout autre module Magento.
• Navigateur : Chrome avec l'extension Alpine.js DevTools. Les audits Lighthouse se font depuis Chrome DevTools.
• Contrôle de version : Git, généralement en poussant vers GitHub ou GitLab. Revue de code via des Pull Requests.
• Ligne de commande : Composer (composer require hyva-themes/...), bin/magento pour les opérations Magento, npm run watch pour la compilation Tailwind.
• Documentation : docs.hyva.io ouverte dans un onglet en permanence. compat.hyva.io pour la recherche de compatibilité des extensions.
• Communication : Canaux de style Slack avec l'équipe. Slack de la communauté Hyvä pour des questions sur l'écosystème.

Une semaine, en échantillon

À quoi ressemble réellement la semaine d'un développeur Hyvä senior, échantillonnée à partir du calendrier de l'un de nos membres de l'équipe :

Lundi matin : Revue de code sur un module de compatibilité Hyvä d'un collègue pour l'extension Search Sphinx de Mirasvit. Le module de compatibilité réimplémente le menu déroulant d'autocomplétion de recherche sous Alpine.js. Repérer un bug où le menu déroulant ne se ferme pas au clic extérieur. Suggérer la correction (une directive @click.outside sur le composant du menu déroulant). Revue approuvée.

Lundi après-midi : Travail sur la PDP pour une nouvelle construction client, configurateur de produit sur mesure pour des panneaux imprimés personnalisés. Le configurateur de produit est un composant Alpine.js avec un état de formulaire réactif (sélections de texte, police, couleur, taille) + rendu en direct. Environ 200 lignes d'Alpine + Tailwind.

Mardi : Intégration de méthode de paiement Hyvä Checkout pour une passerelle de paiement régionale de niche (Trustly). Pas de compatibilité Hyvä fournie par le fournisseur. Construire un nouveau module de méthode de paiement qui s'intègre au modèle de rendu de paiement de Hyvä Checkout + gère le flux de redirection de la passerelle. Tester contre le bac à sable de la passerelle. Note de documentation pour l'équipe.

Mercredi matin : Débogage de performance sur un site en direct qui est passé de 92 à 76 sur Lighthouse au cours du mois dernier. Enquête via PageSpeed Insights. Cause : l'équipe marketing a ajouté trois nouvelles balises au conteneur GTM, toutes se chargeant sur chaque page. Déplacer deux côté serveur via Stape, différer la troisième avec une condition de déclenchement GTM. Re-mesurer : retour à 91.

Mercredi après-midi : Revue de PR pour le premier module de compatibilité Hyvä d'un développeur junior. Les guider à travers le modèle de module Hyvä, les remplacements XML de mise en page, pourquoi leur approche remplace trop de surface. Suggérer un modèle plus simple. Ils itèrent.

Jeudi : Développement du thème Hyvä pour la marque d'un nouveau client. Configuration Tailwind correspondant à leurs tokens de marque (palette gris chaud, pile de polices personnalisées, rythme d'espacement spécifique). Bibliothèque de composants : variantes de boutons, entrées de formulaire, cartes, badges, modal. En-tête / pied de page / navigation dans leur style visuel.

Vendredi matin : Bug d'un rapport client, "les méthodes d'expédition de paiement ne s'affichent pas sur iOS Safari." Enquête. Cause : le rendu des méthodes d'expédition de Hyvä Checkout s'appuyait sur un sélecteur CSS :has() non pris en charge sur les anciennes versions d'iOS Safari. Refactoriser pour utiliser un état basé sur des classes à la place. Tester sur iOS 14, 15, 16, 17.

Vendredi après-midi : Planification de sprint pour la semaine suivante. Estimer l'effort sur trois prochaines tâches (un nouveau module de compatibilité Hyvä, un composant PDP personnalisé, un audit d'optimisation des performances). Mettre à jour les tableaux de projet.

Ceci est un senior. Un développeur Hyvä de niveau intermédiaire a un profil similaire mais passe plus de temps sur la construction de composants guidée et moins sur l'architecture / la revue de code. Un junior est principalement sur la construction de composants guidée + des sessions jumelées avec des seniors.

Les modèles de code spécifiques

À quoi ressemble réellement le code d'un développeur Hyvä :

Template .phtml stylé avec Tailwind

Un template typique de carte produit Hyvä :

`php getProduct(); ?>

`

Ceci est du HTML rendu côté serveur avec des classes utilitaires Tailwind pour le style. Pas de modèles de vue Knockout, pas de dépendances RequireJS. Le navigateur reçoit du HTML brut et le rend immédiatement.

Composant interactif Alpine.js

Un déclencheur de mini-panier Hyvä typique :

`html

`

Alpine gère l'état réactif (nombre d'articles dans le panier) et les interactions (clic pour ouvrir, clic à l'extérieur pour fermer) avec des attributs en ligne sur le HTML. Aucun fichier JS séparé n'est requis pour ce composant.

Structure du module de compatibilité Hyvä

Une structure typique de module de compatibilité Hyvä :

app/code/Acme/MirasvitSearchHyvaCompat/ ├── etc/ │ └── module.xml # déclare le module + dépendances ├── registration.php # enregistrement standard du module Magento ├── view/frontend/ │ ├── layout/ │ │ └── default.xml # remplacements de mise en page pour les composants de recherche │ └── templates/ │ ├── search/ │ │ ├── autocomplete.phtml # template d'autocomplétion natif Hyvä │ │ └── results.phtml # template de résultats natif Hyvä │ └── _index.html.phtml # enregistrement de classes supplémentaires Tailwind <code></code>

Le module déclare une dépendance sur le module original Mirasvit Search Sphinx, puis remplace des templates frontend spécifiques par des versions natives Hyvä. La logique backend de Mirasvit (gestion des requêtes de recherche, indexation) reste inchangée.

Ce qu'un développeur Hyvä doit savoir

Inventaire des compétences pour un développeur Hyvä senior :

Stack frontend :

• Conventions utilitaires de Tailwind CSS (profondes, pas juste "lire la documentation une fois")
• Composants réactifs Alpine.js, x-data, x-on, x-show, x-bind, magasins
• CSS moderne, grille, flexbox, :has(), requêtes de conteneur, propriétés personnalisées
• Modèles de design réactifs, mobile-first
• Accessibilité web, navigation au clavier, ARIA, gestion du focus

Spécifique à Hyvä :

• Le modèle de module Hyvä, themePackage, packages hyva-themes/*
• Le modèle de module de compatibilité Hyvä de docs.hyva.io
• Fonctions d'aide Hyvä et magasins Alpine

Connaissance de Magento :

• Structure des modules Magento (registration.php, etc/module.xml, view/frontend/...)
• XML de mise en page, le langage de mise en page frontend de Magento s'applique toujours sous Hyvä
• Composants UI Magento, savoir ce qu'ils sont et comment NE PAS en dépendre sous Hyvä
• Composer (composer require hyva-themes/*, résolution de dépendances Magento)
• Commandes bin/magento (setup:upgrade, cache:clean, setup:di:compile)

Performance :

• Audits Lighthouse, savoir quelles métriques mesurent quoi
• Core Web Vitals, LCP, INP, CLS, ce qui influence chacun
• Inlining de CSS critique, préchargement de polices, indices de priorité d'image
• Gestion du budget JavaScript

Connaissance de l'écosystème :

• compat.hyva.io comme référence quotidienne
• Principaux fournisseurs d'extensions Magento et leur statut de compatibilité Hyvä
• La communauté Slack Hyvä

Un développeur Hyvä junior manque de connaissances approfondies en performance, du contexte Magento plus large et de la connaissance de l'écosystème. Ils deviennent de niveau intermédiaire avec 12 à 18 mois de travail pratique sur Hyvä ; un senior avec 24 à 36 mois.

Ce que vous payez lorsque vous embauchez un développeur Hyvä

Lorsque vous embauchez un développeur ou une agence spécialisée Hyvä, vous payez pour :

1. La bibliothèque de modules de compatibilité. Une équipe spécialisée a construit des dizaines de modules de compatibilité. Les nouveaux projets bénéficient de la bibliothèque, ce qui serait une construction personnalisée de 2 semaines pour une première équipe est une installation de 30 minutes pour un spécialiste.

2. Les modèles de code spécifiques à Hyvä. Connaître la manière canonique de faire quelque chose dans Hyvä fait gagner le temps qu'un généraliste passerait à apprendre le modèle depuis le début.

3. Le manuel d'optimisation des performances. Lighthouse 90+ comme critère de sortie normal plutôt qu'un objectif ambitieux.

4. La connaissance de l'écosystème Magento. Savoir quelles extensions payantes ont une compatibilité fournisseur sans avoir à rechercher à chaque fois.

5. Les relations avec les fournisseurs. Hyvä Themes, les plus grands fournisseurs d'extensions Magento, la communauté Hyvä, des relations établies accélèrent la résolution des problèmes.

Cela s'accumule. Au 10ème build Hyvä, une équipe spécialisée est 30 à 50 % plus rapide sur un périmètre équivalent qu'une première équipe Hyvä.

Conclusion

Le quotidien d'un développeur Hyvä consiste en des templates Tailwind + des composants Alpine + des modules de compatibilité + optimisation des performances + contexte Magento. Le rôle est axé sur le frontend mais conscient de Magento. La profondeur senior nécessite 24 mois ou plus de travail pratique sur Hyvä pour se développer.

Lorsque vous en embauchez un, vous payez pour la bibliothèque de modules de compatibilité, les modèles canoniques, le manuel de performance et la connaissance de l'écosystème, pas seulement pour les heures.

Prochaines étapes

• Lire Qu'est-ce qu'un développeur spécialisé Hyvä ? Et en avez-vous besoin ?
• Lire Comment trouver un bon développeur Hyvä pour le cadre d'embauche
• Voir la page des développeurs spécialisés Hyvä
• Réserver un appel de cadrage pour un devis à prix fixe