Du Web au Mobile au Desktop : une approche unifiée

Après des années à travailler sur des projets web, mobile et desktop, j'ai développé une approche qui me permet de livrer des applications sur toutes les plateformes de manière efficace.

Le mythe du "une technologie pour tout"

On entend souvent parler de solutions "write once, run everywhere". La réalité est plus nuancée. Voici mon expérience avec les principales approches.

Web-first avec PWA

Les Progressive Web Apps sont un excellent point de départ pour beaucoup de projets :

// next.config.mjs — Configuration PWA basique avec Next.js
const nextConfig = {
  // Headers pour le service worker
  async headers() {
    return [
      {
        source: '/sw.js',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=0, must-revalidate',
          },
        ],
      },
    ];
  },
};

Avantages : Un seul codebase, déploiement instantané, pas de store. Limites : Accès limité aux APIs natives, performances inférieures sur mobile.

Flutter pour le mobile et desktop

Flutter est devenu mon framework de choix pour les applications qui nécessitent une expérience native :

// Un widget réutilisable entre mobile et desktop
class AdaptiveLayout extends StatelessWidget {
  final Widget mobile;
  final Widget desktop;

  const AdaptiveLayout({
    required this.mobile,
    required this.desktop,
  });

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return width > 800 ? desktop : mobile;
  }
}

Avantages : Performances proches du natif, un seul codebase pour iOS/Android/Desktop. Limites : Écosystème web moins mature, taille du bundle.

React/Next.js pour le web

Pour les applications web complexes, Next.js reste mon choix principal :

// Server components pour les performances
async function ProductList() {
  const products = await getProducts();

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Ma stratégie par type de projet

Projet e-commerce

• Web : Next.js (SSR pour le SEO, performance)
• Mobile : PWA dans un premier temps, puis app native Flutter si le budget le permet
• Admin : Dashboard web React

Application métier

• Web + Mobile : Flutter (single codebase)
• Desktop : Flutter Desktop ou Electron si l'intégration web est nécessaire
• Backend : Laravel ou Node.js selon la complexité

MVP / Startup

• Tout-en-un : Next.js PWA
• Évolution : Migration progressive vers Flutter mobile si traction confirmée

Les principes clés

1. Séparer la logique métier de l'UI

La règle d'or du développement cross-platform. Votre logique métier doit être indépendante de la plateforme.

2. API-first

Toujours commencer par concevoir votre API. Que ce soit REST ou GraphQL, une API bien conçue facilite le support multi-plateforme.

3. Design system partagé

Maintenez un design system cohérent entre vos plateformes. Les tokens de design (couleurs, espacements, typographie) doivent être identiques.

4. Tests automatisés

Plus vous avez de plateformes, plus les tests deviennent critiques. Investissez dans des tests unitaires et d'intégration solides.

Conclusion

Il n'existe pas de solution universelle. La meilleure approche dépend du projet, du budget et des contraintes techniques. Mais avec une bonne architecture et les bons outils, il est tout à fait possible de livrer des applications de qualité sur toutes les plateformes sans multiplier les coûts de développement.