En raison de la grande variété de technologies Web intégrées contenues dans les pages Web modernes, la surveillance des performances et les tests de charge peuvent être une tâche difficile. Cet article se penchera sur les particularités de la surveillance des applications Web dynamiques et d’autres éléments qui doivent être pris en compte lors du choix du bon type d’outil de surveillance ou de solution.

Pages Web dynamiques par rapport aux pages Web statiques

Toutes les variétés de types de pages Web peuvent être divisées en deux groupes principaux : statique et dynamique.

En un mot, une page Web statique est une page HTML générée du côté serveur sous une forme prête à l’emploi. En général, la génération de pages est implémentée à l’aide de langages de script côté serveur tels que ASP, PERL, PHP, etc. Lorsqu’un navigateur fait une demande à une URL, le serveur renvoie un document HTML qui inclut déjà le texte et le contenu graphique de la page Web dans la réponse.

D’autre part, le type le plus commun de pages Web ou d’applications aujourd’hui sont dynamiques. Pour implémenter des éléments dynamiques, les derniers frameworks JavaScript tels que React, Vue, Angular JS, Knockout et Ember sont utilisés dans le développement web.

Les pages Web dynamiques apportent le contenu sur les actions des utilisateurs lors de l’exécution sur une URL statique. Le contenu dynamique est plus complexe dans sa structure. Les pages ne sont pas reçues du serveur dans des documents HTML prêts à l’emploi, mais sont construites pour chaque nouvelle demande sur l’ordinateur du client. Chaque fois qu’un utilisateur clique sur un bouton ou effectue toute autre action sur la page Web (navigation entre les onglets, remplissage des formulaires Web, etc.), le navigateur effectue plusieurs étapes avant de réécrire le contenu de la page dans la fenêtre :

  • Parses le document HTML dans document object model (DOM);
  • Processus CSS;
  • Exécute JavaScript intégré.

Сhallenges of Monitoring JavaScript-based Applications

Tout en surveillant les performances statiques des pages Web, les outils de surveillance examinent la réponse HTTP reçue du serveur cible. Chaque fois qu’un utilisateur interagit avec une page Web statique, un navigateur appelle le serveur et reçoit un HTML prêt dans la réponse. Étant donné que tout le contenu qui doit être montré à un utilisateur est déjà généré et inclus dans la réponse du côté serveur, les outils peuvent valider le contenu et les mesures de chargement de la page.

Toutefois, les cadres JavaScript modernes offrent certains défis lorsqu’il s’agit de surveiller les pages Web dynamiques.

Validation du contenu et des fonctionnalités

Les pages Web basées sur JavaScript, connues sous le
nom d’applications d’une seule page
(ASP), n’effectuent pas de nouvelle navigation dans le navigateur une fois qu’elles ont chargé. Le document HTML initial inclut les fichiers JavaScript qui sont déclenchés sur tous les événements du navigateur et appelle le serveur pour les données JSON. Ces données seront utilisées pour mettre à jour le HTML initial et modifier dynamiquement le contenu de la page dans la fenêtre du navigateur.

Dans le même temps, les SPA et les applications avec des éléments inline iFrame peuvent inclure du contenu tiers intégré, tels que des sections publicitaires, des analyses, des widgets (Google Maps, vidéos YouTube, etc.). Pour afficher ce contenu, les navigateurs parsent le code HTML de la page, puis exécutent des scripts tiers. Ensuite, les scripts tiers vont chercher le contenu pour l’afficher sur la page.

En termes de suivi, il est donc difficile de dire exactement quand le nouveau contenu a été chargé sur la page (chargement d’une image, ouverture d’une boîte de dialogue, etc.) parce qu’il n’y a pas d’événement généré et visible pour les outils de surveillance basés sur HTTP.

Détermination des temps et des performances réels de chargement des pages

En règle générale, les réponses HTTP sont utilisées comme résultat positif de la demande à une page Web cible. Mais cela ne signifie pas que tous les fichiers JavaScript ont été analyses et exécutés par le navigateur et le contenu a été rendu et rendu visible par les utilisateurs. Une fois que le HTML initial est chargé, le navigateur commence à exécuter tous les JavaScript intégrés. En ce qui concerne les SPA et les iFrames, l’arbre DOM peut être rendu beaucoup plus tôt ou plus tard que la charge de page terminée. En d’autres termes, la différence entre le moment où un utilisateur réel peut interagir avec une page et l’heure de chargement de l’événement «complet» peut aller jusqu’à plusieurs secondes.

De plus, une fois la page javascript chargée, toutes les modifications ultérieures sur la page ne déclenchent pas de nouvelles demandes de navigateur vers le serveur. Par conséquent, la surveillance basée sur HTTP ne fournira aucune mesure des modifications apportées à la page après la charge initiale de la page. Pour recevoir les temps de chargement réels, nous devons surveiller les événements JavaScript dans la fenêtre du navigateur réel.

Les solutions full-stack comme clé d’une surveillance complète

Comme cela a été montré auparavant, les traits modernes de logique d’application Web mettent des limites sur la surveillance et les tests avec des outils qui fonctionnent au niveau du protocole et n’utilisent pas un navigateur.

Pour imiter l’expérience utilisateur réelle, un véritable navigateur est nécessaire pour effectuer la surveillance dans l’environnement de temps d’exécution JavaScript complet. Les solutions full-stack, comme la plate-forme de surveillance Dotcom-Monitor et la solution de test de charge LoadView, utilisent de vrais navigateurs pour aider à surmonter tous les défis décrits et à garantir des résultats réalistes.

Surveillance des pages Web dynamiques : l’enregistreur Web EveryStep

Pour s’assurer qu’un utilisateur reçoit du contenu approprié sur une page chargée fonctionnant sur le moteur JavaScript, Dotcom-Monitor fournit un mot clé assert et des fonctionnalités de validation d’image dans la fenêtre du navigateur réel. Voici les étapes simples que vous devez exécuter :

  1. Actions des utilisateurs de scripts sur la page Web cible à l’aide de l’enregistreur Web EveryStep.
  2. Configurer la validation du contenu pour chaque étape.

Par exemple, mettons en place la surveillance de la page Dotcom-Monitor Email Report History à titre d’exemple d’une page Web basée sur JavaScript.

Tout d’abord, nous devons ouvrir l’enregistreur Web EveryStep et fournir l’URL cible.

Une fois que l’enregistrement est commencé, pour nous assurer que les drop-downs sur la page fonctionnent correctement et que le contenu spécifié a été chargé, nous devons vérifier les éléments de drop-down et configurer un mot clé assert par chaque drop-down. En cas d’erreur de validation de contenu, une alerte sera générée pour le dispositif de surveillance.

Comment repérer les problèmes de performance dans les ASP

La logique SPA repose fortement sur la technologie JavaScript. Par conséquent, pour s’assurer que les exigences de l’application en matière d’ALS sont respectées, il est nécessaire de surveiller les paramètres de performances des événements JavaScript générés sur la page.

Dotcom-Monitor permet aux utilisateurs de configurer des rapports sur l’heure d’exécution des demandes JavaScript ou l’heure de traitement et d’exécution d’une action utilisateur spécifique sur la page cible. Pour recevoir des données sur les mesures JavaScript dans les rapports d’appareils, utilisez les fonctions en ligne network watcher et time watcher dans ES Recorder.

En outre, pour les applications Web construites avec la technologie AJAX, vous pouvez repérer ajax demander des mesures dans le graphique waterfall de l’appareil.

Résumé: Surveillance des applications Web dynamiques

En résumé, lors de la mise en place d’une surveillance pour les pages Web dynamiques et les applications, il est recommandé d’utiliser une solution de surveillance qui utilise de vrais navigateurs pour attraper tous les événements JavaScript dans la fenêtre du navigateur, vous donnant les résultats de surveillance les plus précis.

Pour surveiller les performances dynamiques du contenu et des fonctionnalités dans les SPA, la validation du contenu (validation d’image et de mots clés) dans des environnements de navigateur réels et la surveillance des mesures des performances JavaScript doivent être effectuées.

  • Cadres Frontend pour créer votre application Web dynamique

    Les frameworks Frontend définissent l’apparence et la sensation des pages que vous voyez comme faisant partie d’une application Web dans la fenêtre du navigateur. Contrairement aux frameworks serveur, les frameworks frontend ne fonctionnent pas avec la logique métier des applications web. Ces frameworks exécutent tout leur travail dans un navigateur. En utilisant différents types de frameworks frontend, vous pouvez créer de nouvelles interfaces utilisateur, ajouter des animations compliquées à une page Web et implémenter des applications à page unique. Dans cet article, nous examinerons de plus près les frameworks basés sur JavaScript et discuterons de certains avantages et inconvénients de les utiliser pour faciliter votre processus de développement de l’interface utilisateur.

    Aujourd’hui, il ya une poignée de cadres frontend JavaScript sur le marché. Voici la liste des six cadres les plus favorisés dans la communauté du développement web :

    • Angular – est un cadre frontend open-source basé sur JavaScript par Google. Elle se spécialise dans le développement d’applications à page unique (SPA). Le framework permet de créer des applications Web côté client à partir de zéro en utilisant html comme langage de modèle. Des attributs HTML personnalisés supplémentaires vous permettent de décrire clairement les composants de l’application. Retrouvez plus d’informations sur la surveillance des applications angularJS dans notre blog.
    • Réagissez – formellement ce n’est pas un framework JavaScript mais une bibliothèque frontend qui est utilisée pour créer des interfaces utilisateur. Il est open-source introduit par Facebook et largement utilisé par les développeurs web du monde entier. Retrouvez plus d’informations sur la surveillance des applications web écrites dans ReactJS dans notre blog.
    • Vue.js – est un cadre frontend qui fonctionne avec des composants à fichier unique et des liens à sens unique entre eux. L’interface de commande de la Vue appelée l’outil VUE CLI rend le processus de développement plus rapide et plus facile. Consultez notre message pour plus d’informations sur la surveillance des applications Web construire avec VueJS.
    • Ember – la principale caractéristique d’EmberJS est la liaison de données. L’approche de liaison de données vous permet de créer une variable JavaScript, et lorsque la valeur de cette variable change, la partie de votre application qui est liée à cette variable est mise à jour.
    • Knockout – est un cadre open-source qui fonctionne avec le modèle MVVM (Model-View-ViewModel). Il est développé en JavaScript sans aucune dépendance externe. Knockout est léger et facile à utiliser et est particulièrement efficace dans la liaison de données. Le cadre est un bon choix pour créer des applications à page unique. s’il vous plaît trouver plus d’informations sur les défis avec .js les applications Web knockout dans notre blog.
    • AJAX – en fait, AJAX (Javascript asynchrone et XML) est une synthèse des technologies Javascript et XML. Il s’agit d’un cadre qui est souvent associé au terme Web 2.0 et qui est présenté comme la plus récente application Web. Consultez notre message pour plus d’informations sur la surveillance des applications ajax.

    Qu’est-ce que JavaScript Framework ? Pourquoi devriez-vous essayer?

    Les frameworks JS sont des bibliothèques de programmation JavaScript qui ont du code pré-écrit que les développeurs web peuvent utiliser pour implémenter des fonctions et des tâches de programmation communes. C’est la base pour la construction de sites Web ou d’applications Web autour.
    Expliquons pourquoi les frameworks JavaScript ont rassemblé autant d’abonnés parmi les développeurs d’interface utilisateur. Bien que le processus de codage soit tout à fait possible sans utiliser de frameworks, le bon environnement peut rendre ce processus beaucoup plus facile. En outre, la majorité des cadres JS sont libres et open-source, ce qui rend leur intégration dans le processus de développement encore plus simple.
    Tout d’abord, l’utilisation d’un cadre JS augmentera votre productivité. Les développeurs d’interface utilisateur n’ont plus besoin d’écrire beaucoup de code manuellement, ils peuvent utiliser des fonctions préécrites et prêtes à l’emploi et des extraits de code. Par la suite, vous pouvez étendre les modèles de code préécrits pour créer certains composants Web standard sur votre site Web. Les cadres sont plus réactifs pour la conception de sites Web et plus appréciés par les développeurs de sites Web. Jetons un coup d’oeil aux meilleurs cadres JS.

    Une grande partie du marché d’aujourd’hui est détenue par trois cadres populaires : React, Angular et Vue. Ces frameworks sont appelés réactifs car ils réagissent à toute modification de l’état de l’application et mettent automatiquement à jour une interface utilisateur. Par exemple, si vous déclarez une variable qui contrôle la taille d’un champ de texte sur une page Web, puis modifiez la variable, la taille du champ changera d’elle-même sans aucun codage manuel. Vous pouvez utiliser n’importe quel langage de programmation, extraire des données pour elle, les emballer dans JSON, XML, ou d’autres langues lisibles par machine sur le backend, puis les transmettre à la face avant. À son tour, le cadre de la JS fera tout le travail qui reste sur le frontend. Le framework dessine les contrôles, met en place des animations, vérifie les données, présente l’information en fonction des préférences de l’utilisateur et implémente la logique métier. Tout le travail est effectué dans un navigateur et seules les données (parfois, de nouvelles pièces du modèle et des règles logiques métier) sont transférées entre le navigateur et le serveur Web. Ainsi, les cadres réactifs sont des outils indispensables pour implémenter le concept d’application d’une seule page lorsque tous les travaux se produisent sur un seul écran.

    Vue.JS

    Vue est l’un des cadres frontend populaires. Il est simple et simple par rapport à l’angulaire sophistiqué. En plus d’être léger, ses principaux avantages sont le DOM visuel, l’approche des composants et la liaison de données dans les deux sens. Vue est polyvalent, multitâche, et peut gérer les processus simples et dynamiques avec facilité. Il peut être utilisé pour créer des applications web et mobiles. En outre, il est utilisé avec succès pour créer des applications Web progressives (PWA) qui sont indépendantes du type d’appareil ou de réseau tels que Pinterest, Spotify et etc.

    Vue dispose d’une documentation complète et détaillée qui permet d’obtenir des informations de haut niveau et approfondies sur les concepts-cadres. Le framework prend en charge une syntaxe simple qui peut être facilement utilisée et comprise par les programmeurs JavaScript. Et l’un des principaux avantages du framework est le support typescript intégré qui permet de prévenir les erreurs potentielles sur les étapes de compilation. Le support typescript est extrêmement pratique dans le cas de la création d’applications à grande échelle.

    Vue.js est recommandé pour des conceptions flexibles, vous permettant de tout construire à partir de zéro et de développer avec succès de grands projets.

    La seule chose qui peut vous empêcher de l’utiliser est l’absence de soutien de géants de l’industrie tels que Facebook et Google. En outre, nous devrions mentionner, que quelques descriptions sont toujours disponibles en chinois seulement. Cela apporte quelques difficultés au processus de développement à certains stades. Toutefois, compte tenu de la popularité de ce cadre, la tendance peut être modifiée dans un avenir proche.

    réagir

    React est l’un des cadres les plus faciles à apprendre. Le cadre a été développé par Facebook pour résoudre les problèmes de maintenance en raison de l’ajout constant de fonctionnalités à l’application. React est la plate-forme parfaite pour tous ceux qui s’attendent à beaucoup de trafic sur leur site web et a besoin d’une plate-forme stable pour le maintenir. Modern open-source React se distingue par son modèle d’objet documentaire virtuel (DOM), qui offre des fonctionnalités exceptionnelles et assure la stabilité et le bon fonctionnement d’une application Web. Le cadre peut être utilisé non seulement du côté du client, mais vous pouvez l’utiliser du côté serveur et, en outre, React peut être utilisé avec d’autres frameworks.

    Le trait principal de React qui le distingue est la capacité de réutiliser les composants d’interface utilisateur. Vous pouvez créer un composant d’interface utilisateur une fois et le réutiliser dans d’autres parties de l’application. En outre, vous pouvez créer des composants d’interface utilisateur sans écrire de nouvelles classes. Il est ainsi plus facile d’apprendre React. En outre, React Developer Tools sera toujours en main pour aider à l’inspection des hiérarchies de composants React.

    React a beaucoup d’avantages. Nous avons mentionné seulement certains d’entre eux dans cet article, mais il est évident que le cadre peut être un bon choix pour tous ceux qui ont besoin de construire des interfaces utilisateur avec des composants d’interface utilisateur réutilisables, en particulier il est recommandé pour le développement spa. En résumé, React est le cadre frontend le plus fiable sur le marché dans les cas où vous souhaitez développer une interface interactive.

    En ce qui concerne la maîtrise de JSX pour créer un projet React, eh bien, vous pouvez avoir du mal à utiliser JSX, sauf si vous avez au moins une expérience de base dans Javascript. En outre, vous pouvez faire face à certaines difficultés à tenir la documentation React à jour en raison de mises à jour nombreuses et constantes.

    angulaire

    La liste des meilleurs cadres front-end ne serait pas complète sans Angular. Contrairement à React, Angular est unique dans sa fonction de liaison de données dans les deux sens. Cela signifie que vous aurez toujours le modèle et la vue synchronisées en temps réel. En d’autres termes, tout changement dans le modèle sera instantanément reflété dans la vue et l’inverse. Angulaire offre la possibilité de réutiliser les composants et de les gérer facilement à l’aide de l’injection de dépendance. Le cadre est expédié avec les fonctions les plus largement utilisées, vous permettant d’écrire moins de code pour votre projet.

    Angular améliore les performances des applications Web en mettant à jour dynamiquement le contenu en un rien de temps, en utilisant la liaison de données dans les deux sens. C’est le meilleur choix pour les applications d’entreprise et les applications Web dynamiques.