Planificateur de plan de développement pour ingénieur full-stack senior

**Résumé exécutif** – Cette stratégie de développement vise à transformer l'application web existante en une expérience hautement réactive, performante et accessible, en adoptant une approche mobile-first. Le plan se concentre sur l'optimisation des Core Web Vitals, la création d'un système de design basé sur des tokens, et l'amélioration de l'UX/UI pour les utilisateurs mobiles. La mise en œuvre se fera en trois phases (MVP, polish, optimisation) afin de minimiser les risques et de garantir une intégration fluide avec l'architecture actuelle. --- **1. Stratégie Responsive** - **Approche** : Mobile-first, car les données utilisateur montrent que 65% du trafic provient de mobiles (320px+). Le desktop (1024px+) sera une extension naturelle. - **Breakpoints** : - `320px` (mobile small) : base, single column. - `768px` (tablette) : deux colonnes, navigation hamburger. - `1024px` (desktop) : trois colonnes, sidebar complète. - `1440px` (large) : conteneur max-width `1280px` centré, marges fluides. - **Système de layout** : CSS Grid avec `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` pour les cartes. Utiliser `clamp()` pour les tailles de police : `font-size: clamp(16px, 2vw, 20px)`. - **Fluid scaling** : Utiliser `dvh` pour la hauteur (ex. `height: 100dvh`), `svh` pour les barres d'outils, et `lvh` en fallback. Gérer les encoches avec `env(safe-area-inset-*)`. - **Touch & Navigation** : Cibles tactiles min `44x44px`, gestes de balayage pour les carrousels, états hover uniquement sur les appareils avec `@media (hover: hover)`. Navigation clavier complète avec focus visible (`outline: 2px solid #0066cc`). - **Images** : `srcset` avec `sizes` pour les images responsives, `loading="lazy"` pour les images hors viewport, et `art direction` via `<picture>` pour les images hero (recadrage mobile vs desktop). --- **2. Blueprint Performance** - **Cibles** : LCP < 2.5s, INP < 100ms, CLS < 0.1, animations à 60fps. - **Audit actuel** : Le LCP est actuellement à 3.2s (image hero non optimisée), INP à 150ms (listeners JS lourds), CLS à 0.15 (polices non préchargées). - **Techniques** : - **Lazy loading** : Toutes les images et iframes avec `loading="lazy"`, sauf le LCP (préchargé avec `fetchpriority="high"`). - **Code splitting** : Utiliser `React.lazy()` et `Suspense` pour les routes non critiques. Le bundle initial doit être < 170KB gzippé. - **Asset optimization** : Convertir les images en WebP/AVIF, compresser avec `sharp` (qualité 80%). Les polices en `woff2` avec `font-display: swap`. - **CSS containment** : `content-visibility: auto` sur les sections hors viewport, `contain: layout paint` sur les cartes. - **GPU compositing** : Utiliser `transform: translateZ(0)` pour les animations, éviter `top/left` (déclenche le layout). - **Offline** : Service worker existant (Workbox) - ajouter un fallback réseau avec cache-first pour les assets statiques, et un shell d'application pour les pages clés. - **Pitfalls** : Éviter le `layout thrashing` (lire/écrire le DOM en boucle), utiliser `requestAnimationFrame` pour les animations JS. --- **3. Spécification du Système de Design** - **Tokens** : - **Couleurs** : Palette neutre (gris 50-900), accent primaire `#0066cc` (bleu), secondaire `#ff6600` (orange). Mode sombre : fond `#121212`, texte `#e0e0e0`, accent `#4d9fff`. - **Spacing** : Échelle de base 8px (4, 8, 12, 16, 24, 32, 48, 64, 96). Utiliser `rem` pour l'accessibilité. - **Typographie** : Police système `Inter` (fallback `system-ui`). Échelle : `12/14/16/20/24/32/40/48`. Poids : 400 (regular), 600 (semibold), 700 (bold). - **Elevation** : Ombres à 3 niveaux - `shadow-sm` (0 1px 2px rgba(0,0,0,0.05)), `shadow-md` (0 4px 6px rgba(0,0,0,0.1)), `shadow-lg` (0 10px 15px rgba(0,0,0,0.2)). - **Motion** : Durées - 150ms (hover), 300ms (modals), 400ms ease-out (page transitions). Respecter `prefers-reduced-motion` (désactiver les animations). - **Iconographie** : Utiliser un set d'icônes linéaires (stroke 1.5px) pour la cohérence, format SVG inline. Style d'illustration : plat, avec dégradés subtils. - **Règles de composants** : Les composants legacy (ex. boutons avec ombres fortes) seront migrés vers les nouveaux tokens. Border radius : `4px` (petits), `8px` (moyens), `12px` (grands). Les cartes utilisent `8px` avec `shadow-sm`. --- **4. Plan de la Bibliothèque de Patterns UX/UI** - **Hiérarchie & Scannabilité** : Titres avec poids 700, sous-titres 600, corps 400. Espacement vertical `24px` entre les sections. Utiliser des listes à puces pour les données clés. - **Feedback & Affordance** : Skeleton screens (gris animé avec `opacity` 0.5-1) pour les chargements. Micro-interactions : boutons avec `scale(0.98)` au clic, liens avec soulignement animé. - **Navigation** : Hamburger (mobile) avec overlay, bottom nav (mobile) pour les 4 actions principales, sidebar (desktop) avec breadcrumbs (`Accueil > Produits > Détail`). Wayfinding : indicateur de section active. - **Accessibilité (WCAG 2.1 AA)** : - Contraste : texte sur fond clair ≥ 4.5:1, texte large ≥ 3:1. Vérifier avec `axe-core`. - ARIA : `role="navigation"` pour les menus, `aria-label` sur les icônes, `aria-live` pour les messages d'erreur. - Focus : `:focus-visible` avec outline `2px solid #0066cc`. - **Formulaires** : Inline errors avec `aria-describedby`, `inputmode="numeric"` pour les numéros, `type="email"` pour les emails. Validation en temps réel (debounce 300ms). - **Motion Design** : Animations d'entrée (fade + translateY 20px) pour les cartes, avec délai stagger (50ms). Désactiver si `prefers-reduced-motion`. - **Empty States** : Illustration + message clair + CTA (ex. "Aucun résultat - Essayez de modifier vos filtres"). Gérer les erreurs avec un composant `ErrorBoundary` et un bouton "Réessayer". --- **5. Architecture Technique** - **Stack** : React 18 (existant) + TypeScript (migration progressive). Ajouter `Next.js` si le SSR est nécessaire pour le SEO, sinon rester en SPA. - **Structure** : - `src/components/` (dossier par composant avec `index.tsx`, `styles.ts`, `types.ts`) - `src/hooks/` (custom hooks pour responsive, media queries) - `src/tokens/` (design tokens en JSON/TS) - `src/utils/` (helpers pour breakpoints, performance) - **Theming** : CSS custom properties (`:root` pour light, `[data-theme="dark"]` pour dark). Utiliser `styled-components` ou `CSS Modules` - recommandation : **CSS Modules** pour la simplicité et le SSR. - **CSS Strategy** : Utility-first avec `Tailwind` (si adoption rapide) ou CSS Modules avec variables. Recommandation : **Tailwind** pour la rapidité de développement, avec config personnalisée pour les tokens. - **Testing** : Utiliser `Playwright` pour les tests e2e responsives. Tester les breakpoints : 320, 375, 768, 1024, 1440. Devices : iPhone SE, iPhone 12, iPad, Desktop Chrome. Intégrer `Lighthouse CI` pour les métriques. --- **6. Plan de Déploiement Phasé** - **Phase 1 (MVP - Semaines 1-2)** : - Implémenter les breakpoints et le layout fluide. - Migrer les couleurs et typographies vers les tokens. - Corriger les problèmes de CLS (préchargement des polices). - Ajouter le lazy loading pour les images. - **Phase 2 (Polish - Semaines 3-4)** : - Améliorer la navigation (hamburger, bottom nav). - Ajouter les skeleton screens et micro-interactions. - Implémenter le mode sombre. - Mettre à jour les formulaires avec validation inline. - **Phase 3 (Optimisation - Semaines 5-6)** : - Optimiser le bundle (code splitting, tree shaking). - Améliorer l'INP (réduire les listeners, utiliser `passive: true`). - Tester l'accessibilité complète (axe-core, tests clavier). - Lancer Lighthouse CI et corriger les scores. --- **7. Checklist Qualité (Pré-lancement)** - [ ] Testé sur 320px, 768px, 1024px, 1440px (Chrome, Safari, Firefox). - [ ] LCP < 2.5s, INP < 100ms, CLS < 0.1 (vérifié via Lighthouse). - [ ] Toutes les images ont `srcset` et `loading="lazy"`. - [ ] Navigation clavier fonctionnelle (Tab, Enter, Escape). - [ ] Contraste des couleurs ≥ 4.5:1 (vérifié avec axe-core). - [ ] Mode sombre activé et cohérent. - [ ] Formulaires avec erreurs inline et `aria-describedby`. - [ ] Animations désactivées avec `prefers-reduced-motion`. - [ ] Service worker fonctionne en mode offline (testé avec DevTools). - [ ] Aucun débordement horizontal (testé avec `overflow-x: hidden` en fallback). - [ ] Touch targets ≥ 44px sur mobile. - [ ] Testé sur iPhone SE, iPhone 12, iPad, Desktop (via Playwright).