En intégrant nativement les Web Components W3C (<product-form>, <cart-drawer>, <header-drawer>), Horizon abandonne les scripts monolithiques de Dawn. Mais cette refonte casse de nombreuses applications historiques non préparées.
- Avantage Horizon : Custom Elements W3C allégeant le JavaScript de 40% et isolant le CSS.
- Piège de compatibilité : Les apps manipulant directement le DOM échouent face au cycle de vie des Web Components.
- L'approche Navi+ : Architecture découplée sur Edge CDN dialoguant via des CustomEvents natifs sans toucher au thème.
1. Ce que promet Shopify : La standardisation via Web Components
Horizon encapsule chaque bloc interactif dans un Custom Element au cycle de vie maîtrisé (connectedCallback), accélérant l’affichage dans le navigateur.
2. 5 conflits critiques pour les applications de menu traditionnelles
1. Isolation Shadow DOM :
Isolation Shadow DOM : Les scripts externes ne peuvent plus forcer le style du header.
2. Erreurs d’hydratation :
Erreurs d’hydratation : Les mutations DOM prématurées déclenchent des exceptions bloquantes.
3. Rupture des compteurs panier :
Rupture des compteurs panier : Les événements natifs cart:update ne sont plus captés.
4. Surcoûts de refonte :
Surcoûts de refonte : Obligation de réécrire le code Liquid à chaque mise à jour.
5. Blocage d’interface :
Blocage d’interface : Une erreur de script peut figer tout le menu.
3. L’avis des architectes frontend
“Les Web Components sont l’avenir. La navigation la plus pérenne est celle qui ne s’immisce pas dans le thème et tourne comme une couche autonome.”
— Alena Rostova, Architecte Frontend
4. La réponse de Navi+ : Compatibilité native et zéro conflit
| Indicateur | Apps de menu intégrées au thème | Moteur découplé Navi+ |
|---|---|---|
| Intégration | Injecté dans le Liquid et le DOM | App Embed indépendant via Edge CDN |
| Compatibilité Web Components | Conflits fréquents de cycle de vie | 100% compatible via CustomEvents natifs |
| Synchro compteur panier | Hacks manuels requis | Écoute native automatique de cart:update |
| Résilience aux mises à jour | Casse lors des updates de thème | Totalement immunisé, zéro modification de code |
| Latence d’exécution | Ralentit le rendu initial | <16ms TTFB asynchrone non bloquant |
| Personnalisation visuelle | Limitée par le scope du thème | Éditeur visuel indépendant Drag & Drop |
5. Checklist de vérification pour marchands Horizon
- Étape 1 : Vérifier l’absence d’injections DOM parasites dans les custom elements d’Horizon.
- Étape 2 : Confirmer la mise à jour immédiate du badge panier lors des ajouts.
- Étape 3 : Déployer Navi+ App Embed pour séparer navigation et code Liquid.
- Étape 4 : Surveiller la console développeur pour détecter toute exception.
- Étape 5 : Valider la continuité sans accroc entre Dawn et Horizon.
Les technologies de thème passent aux Web Components. Navi+ garantit une navigation fluide et sans conflit.