PC & Mobile

Remplacement d'un monolithe de l'intérieur

Remplacement d'un monolithe de l'intérieur


LOSA Les applications (en général, les micro-interfaces) sont des services autonomes Node.js capables de restituer côté serveur une partie ou un fragment d'une page Web que le service, tel que mentionné précédemment, est chargé de gérer. Une page peut être composée de plusieurs LOSA prestations de service. Ces applications / ou micro-interfaces sont créées et déployées dans un conteneur indépendant. Fonctionnant de manière autonome

Le monolithe reste responsable de la gestion d'un objet de requête HTTP et envoie la réponse finale au client. Les micro-interfaces peuvent rester derrière un pare-feu au sein de la grappe - uniquement disponibles directement sur le système hérité jusqu'au moment où une passerelle d'API et une authentification d'utilisateur peuvent être découplées (ou au moins transformées en un point de terminaison d'API). Vous n'avez pas besoin de beaucoup de changements pour préparer ces interfaces à leur vie post-monolithique.

Vous trouverez ci-dessous un exemple de ce qu'une requête / réponse pourrait avoir pour ressembler.

Tout d'abord, une demande est faite:

GET / POST 'https://MFEwebsite.com/parts/header?format=json

Le rendu d'une page peut nécessiter diverses données. Toute information «manquante» qui ne peut pas encore être interrogée à partir d'un noeud final découplé peut être perdue. envoyé à le MFE (micro frontal) comme accessoires pendant la demande. Voici ce que fait le MFE lorsqu'une requête est faite, requête transmise via un middleware responsable du rendu de l'application de réaction, une requête est adressée à tous les API nécessaires découplés et sa réponse lui est renvoyée sous forme d'accessoires. . Ces accessoires constitueront window.INITIAL_STATE

Si vous avez besoin d'inspiration pour implémenter certaines de ces filtres ou fonctions de modèle, alors Hypernova vaut la peine d'être examiné. Je n’ai pas utilisé Hypernova, j’ai toujours choisi de construire le mien. J'ai implémenté des mécanismes similaires dans les backends Rails, Node et PHP. En raison de la nature exclusive de diverses plates-formes d’arrière-plan, j’utiliserai les exemples d’Hypernova pour transmettre un concept rudimentaire.

Voici à quoi ressemblerait un noeud final de rendu MFE dans express:

La demande d'un autre système, dans ce cas, le monolithe

GET / POST 'https://MFEwebsite.com/parts/header?format=json
{
html: '
...
',
css: '/static/header.3042u3298423.css',
js: '/static/header.idhf93hf23iu.js',
initial_state: {items:[...]}
}

Le middleware qui gère la réponse:

fonction d'exportation exampleRenderAPIware (req, res) {
const renderMarkup = renderHTMLpage (
req,
this.index,
intial_state,
)
asyncRender.then (() => {
const responseObject = {
html: renderMarkup,
Etat initial,
js: jsResource,
css: cssResource,
};
res.status (200) .end (JSON.stringify (responseObject));
});
}

Les contrôleurs qui effectuent ces demandes POST initiales doivent gérer les réponses, en plaçant JS et CSS aux emplacements appropriés. Et enfin, rendre l'application de réaction à l'emplacement approprié dans le modèle hérité. Voici un exemple de ce que ce modèle hérité ressemble maintenant. Les ressources, généralement gérées par un autre contrôleur de votre monolithe, seront chargées d’injecter ces scripts et styles dans ce qui reste sur l’en-tête et le bas de la balise body. Rappelez-vous, le monolithe sert toujours de moteur de mise en page. Nous remplaçons des pièces et ajoutons de nouvelles fonctionnalités de manière React SSR. Finalement, ces applications LOSA pourraient être réassemblées sous un MFE ou avec la magie noire Webpack que je développe. Connu sous le nom webpack-external-import

Qu'en est-il de la migration des données de modèle vers une nouvelle API?

Lorsqu'une nouvelle API est découplée et mise en ligne, à quoi peut-on s'attendre dans la migration?

Lorsque le monolith fournit les données à un MFE, express.js accède à ces informations à partir du corps de la requête HTTP. Maintenant, express aurait besoin d'extraire de manière asynchrone à partir de l'API. Les formats de données ont peut-être changé, mais React reçoit toujours des accessoires. Extrêmement simple.

Comparée aux monolithes plus anciens, la nouvelle architecture LOSA (beaucoup de petites applications) n’était pas assez performante: 400 à 600 ms étaient restitués par une partie de la page. Nous avons utilisé des structures de travail asynchrone, ce qui signifie qu’au lieu d’une application SSR, nous pouvions demander à plusieurs services de relier différentes parties de l’application au SSR. Il était donc très difficile de mettre la production hors ligne, car un «échec de la production» signifiait peut-être perdre une barre latérale ou un pied de page pendant 10 minutes, le temps que cela soit corrigé. Séparation des préoccupations à son meilleur.

Voici ce que je veux dire par travailleurs asynchrones de LOSA. Il y avait beaucoup de services de nœuds, chacun étant responsable du rendu d'un ou de plusieurs composants.

Les contrôleurs (engrenage gris) alimentant une vue dorsale héritée peuvent rediriger les données de la vue vers une demande de publication plutôt que vers un moteur de gabarit dorsal. Le recyclage des données signifie que l’arrière-plan ne nécessite pas beaucoup d’efforts pour prendre en charge ces mécanismes. En évitant les modifications majeures, l’ingénierie d’arrière-plan pourra se concentrer sur le découplage des fournisseurs de données, tandis que l’interface client peut progresser de manière autonome. Étant donné que les données de vue ont été publiées sur un service de réaction externe, la réponse à ce POST, qui contient un balisage, est ensuite transmise au moteur de modèles, avec la feuille de style, l'état initial et les URL CSS. Le moteur de gabarit rend maintenant la réponse à partir de la demande POST, ce qui dissocie votre vue ou une partie de celle du monolithe hérité.

Temps de rendu de réaction

Réagir était lent !! La RSS n’est pas rapide - notre nouvelle solution LOSA, une solution de réaction, n’était pas assez performante pour être viable. Notre solution, Fragment cache à l'intérieur de réagir

Afficher plus

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Articles similaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bouton retour en haut de la page
Fermer