Google AMP avec React
Nous avons une réaction isomorphe App avec nœud. Je veux convertir certaines pages en pages AMP. Je suis confus! Devrions-nous choisir une version AMP distincte de l'application ou devons-nous modifier l'application actuelle conformément aux instructions de Google pour les pages AMP? Je peux voir que nous devons faire beaucoup de changements dans l'application actuelle pour créer une version compatible avec un ampli. Comment dois-je procéder?
Donc, AMP signifie Accelerated Mobile Pages, PAS les applications mobiles accélérées. Il sera difficile d'obtenir une application dynamique 1: 1 dans AMP . Vous avez donc besoin d'un balisage HTML statique conforme à la norme AMP Markup Standard et la transition entre ces pages (pages <=> écrans différents dans votre application) anciens liens HTML. Vous êtes peut-être en mesure de générer ce type de balisage avec des modèles personnalisés à partir de votre application avec un effort abordable . Peut-être que ampreact peut vous aider.
J'ai considéré Ampreact. Mais utiliser react for AMP ajoutait une couche supplémentaire de complexité. Finalement décidé d'utiliser node + ejs + express. AMP fournit également des composants pour la gestion de contenu dynamique comme amp-list, amp-bind, amp-live-list, etc.
https://www.ampproject.org/docs/reference/components#dynamic-content
Nous avons une architecture similaire.
Nous ne voulons pas créer un nouveau REPO pour l'ampli, mais plutôt chercher à réutiliser des composants existants et à créer des pages AMP.
En outre, ces pages doivent être synchronisées avec l'original en termes de fonctionnalités métiers, ce qui signifie que les modifications apportées à la version React de la page doivent être reflétées dans AMP Page.
We solved it by doing two things: 1. Writing a new server.js file and added a new node job.2. Following a pattern throughout the app, by separating the business logic from the view. 3. Develop a HOC and chose the template AMP vs React in the cases when your React template contains stuff which is not supported by AMP.
Les pages AMP sont purement rendues côté serveur. Ainsi, server.js génère un nouveau fichier (index.html) avec le composant racine mentionné dans la méthode de rendu.
ce qui consomme en interne les composants nécessaires, au fur et à mesure que nous avançons, il y avait des problèmes avec la quantité de CSS et de HTML générés par les composants de React.
nous en avons profité pour nettoyer le CSS et n’avons écrit AMP séparé que lorsque cela était nécessaire.