Überwachen von Anwendungen, die in Vue.js geschrieben wurden

Vue.js ist ein Front-End-JavaScript-Framework, mit dem Sie progressive Single-Page-Anwendungen (SPAs) erstellen können. Evan You, ein ehemaliger Google-Mitarbeiter, hat Vue.js 2014 mit der Idee entwickelt, eine leichte Lösung zu entwickeln, die die besten Funktionen von Angular und React aufweist. Seit dem Tag seiner Gründung hat Vue.js stetig an Popularität gewonnen. Derzeit ist seine Nutzerbasis dreifach als die von Angular und etwas mehr als Facebooks React-Framework.

 

Wie unterscheidet sich Vue von anderen Javascript Frameworks?

Vergleichen wir Vue.js mit einigen anderen bemerkenswerten JavaScript-Frameworks, wie React und Angular.

 

Vue.js vs. React

Vue.js hat viele Ähnlichkeiten mit React, da beide ein virtuelles DOM verwenden, eine reaktive, wiederverwendbare und komponierbare Komponentenstruktur bereitstellen. Beide sind sich in der Leistung fast ähnlich, wobei Vue.js React in seiner Entkopplung von HTML mit JavaScript-Code überstrahlt. Diese Trennung von Bedenken erweist sich als vorteilhaft, wenn Sie an einem Großprojekt arbeiten, das viele Komponenten haben könnte.

 

Vue.js vs. Angular

Die Unterschiede sind deutlicher, wenn Sie Vue.js mit Angular vergleichen. Vue.js ist viel einfacher zu erlernen als Angular, das eine steile Lernkurve hat und Vorkenntnisse in Schriftund und nicht nur JavaScript erfordert. Auf der anderen Seite kann das Erlernen einer einfachen Vue.js-Anwendung weniger als einen Tag dauern! Vue.js ist auch viel schneller als Angular. Die Leistung der neuesten Angular-Versionen ist jedoch mit der von Vue.js vergleichbar.

 

Was sind die Vor- und Nachteile der Verwendung von Vue.js?

Wie jedes andere Framework hat Vue.js auch einige wesentliche Vorteile und einige Nachteile.

 

Vorteile von Vue.js

  • Anwegsfreundlichkeit. Vue.js ist auch für unerfahrene Entwickler mit grundlegenden Kenntnissen in HTML, CSS und JavaScript leicht zu erlernen.
  • Leistung. Vue.js ist ein außergewöhnlich performantes Framework. Ein Produktionskompiliertes und mit Gewehren gezipptes Vue.js-Projekt wiegt nur etwa 20 KB.
  • Skalierbarkeit. Die komponentenbasierte Architektur in Verbindung mit separaten Abschnitten für HTML und JavaScript macht die Verwaltung und Skalierung eines Vue.js-Projekts ziemlich einfach.

Nachteile von Vue.js

  • Weniger Plugins/Extensions. Ein unterschwelliges Ökosystem von Plugins und Erweiterungen macht die Implementierung einiger Standardfunktionen zu einem umständlichen Prozess.
  • Probleme mit iOS/Safari. Vue.js hat Schwierigkeiten, auf älteren Versionen von Safari und iOS richtig zu arbeiten, obwohl Sie sie mit einigen Änderungen am Code beheben können.

Eine Notwendigkeit, die Leistung von Vue.js-SPAs zu überwachen

Für jede Anwendung, die für das Web erstellt wurde, ist eine Leistungsoptimierung unerlässlich. Die Internetgeschwindigkeiten sind in den Regionen und Netzwerktypen sehr unterschiedlich. Daher ist es wichtig, sicherzustellen, dass unsere Anwendung so schnell wie möglich geladen wird – ergo die Notwendigkeit, Website-Monitoring-Lösungen zu verwenden. Die Website-Überwachung kann beim Benchmarking verschiedener leistungsbezogener Aspekte einer Vue.js-Anwendung hilfreich sein. Beispielsweise die Renderzeit, Reaktionsfähigkeit und die Zeit, die die Anwendung nach dem Rendern interaktiv wird.

 

Vue.js aktiviert und fördert überwachung

Bisher wurden zahlreiche Überwachungslösungen für Vue.js entwickelt. Und wir werden sehen, wie genau man die Überwachung leistungsbezogener Metriken in Vue.js vornimmt. Beispielsweise Seitenladezeit, Renderzeit, Netzwerkanforderungen Timing und Fehlerverfolgung.

 

Das NPM-Ökosystem


NPM
ist derzeit die weltweit größte Software-Registrierung. NPM wurde ursprünglich als Software-Hub für Node.js-bezogene Pakete gestartet, wurde aber schnell von der JavaScript-Community übernommen und zum Verteilen aller Arten von JavaScript-Paketen verwendet. Heute enthält die NPM-Registrierung über 800.000 Softwarepakete. Vue.js verwendet NPM für die Paketverwaltung, und dies macht die Entwicklung eines benutzerdefinierten Pakets für die Verarbeitung von APM (Application Performance Management) für alle Lösungen von Drittanbietern ganz einfach. Die meisten Überwachungslösungen im Web verwenden diesen Weg. Sie werden oft feststellen, dass Sie ein benutzerdefiniertes NPM-Paket installieren, um es in die oben genannte APM-Lösung von Drittanbietern zu integrieren. Zum Beispiel, wird etwa wie folgt aussehen: npm installieren –speichern @third-party/apm-vue

Unterstützung für Erweiterungen

Wir haben gelernt, dass es ganz einfach ist, Pakete für Vue.js zu entwickeln und sie über NPM zu verteilen. Aber Vue.js muss uns noch Möglichkeiten bieten, diese Pakete in den Code zu integrieren. Und Vue.js tut es ganz elegant, indem es eine fließende API bereitstellt, die es uns ermöglicht, Plugins in unsere Anwendung zu integrieren. Vue.use() ist eine globale Methode, die Sie verwenden können, um Plugins/Erweiterungen zu integrieren. Zum Beispiel:

  1. 
      var
     MyPlugin = require('apm-vue')
  2. use(MyPlugin, Optionen)
  3. 
      neu
     Vue()
  4.  //... Optionen 
  5. })

 

Vue.js ist auch intelligent genug, um mehrere Deklarationen eines Vue.use() Aufrufs für das gleiche Plugin zu ignorieren und behandelt es als nur einen Aufruf. Dieser Check hilft uns, seltsame Probleme zu vermeiden, die viel schwieriger zu verfolgen sind.

 

Unterstützung für einfache JavaScript-Abfangen

Viele APM-Lösungsanbieter wollen nicht für jedes JavaScript-Framework separate Softwarepakete entwickeln und warten, denen ich zustimme, da es eine ganze Reihe von ihnen gibt! (Angular, Vue.js, React, Alpine, etc.). Daher bieten die meisten APM-Lösungen eine einzelne JavaScript-Methode, die an eines dieser Frameworks angeschlossen werden kann. Diese Taktik ermöglicht APMs, Leistungsmetriken einer Vue.js-Anwendung einfach nachzuverfolgen. Zum Beispiel:

  1. <Skript>
  2.  (funktion(i,s,o,g,r,a,m)'i [APM] =r;i[r]=i[r]|| funktion()"
  3.  (i[r]. q=i[r].q|| []).push(arguments)',i[r].l=1*new Date(); a=s.createElement(o),
  4.                 m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g;m.parentNode.insertBe fore(a,m)
  5.  (Fenster,Dokument,'Skript','/'/eum.apm.io/eum.min.js','ineum');
  6.  ineum('reportingUrl', 'https://eum-us-west-2.apm.io');
  7. ineum('key', '1LHYrJaFQE-L-9KFgd1R6g');
  8. </script>

 

Normalerweise müssen Sie solchen JavaScript-Code in das < > Head-Tag der Index.html Ihres Projekts aufnehmen, und der Rest wird automatisch übernommen.

Vue.js Lebenszyklushaken

Eine Vue.js-Komponente ist eine logische Gruppierung von Benutzeroberfläche, Logik und Styling, die für einen bestimmten Zweck vorgesehen ist. Beispiel: eine Tabellenkomponente oder Navbar-Komponente. Vue.js macht mehrere Methoden verfügbar, um den Lebenszyklus einer Komponente einzuhaken.

 

Vue Lifecycle Events

Sie können diese
Lebenszyklus-Hooks
verwenden, um den Status der Anwendung auf jeder Ebene zu identifizieren und kritische Probleme im Code zu identifizieren. Die meisten APM-Lösungen verwenden diese Methoden in hohem Maße. Beispielsweise tritt ein typisches Leistungsproblem auf, wenn Sie zu viel Arbeit im created()-Hook leisten. Dies ist eine schlechte Praxis, da nur die Initialisierung von Variablen im created()-Hook stattfinden sollte. Andernfalls kann dies zum verzögerten Rendern Ihrer Komponente führen. Für ressourcenintensive Vorgänge (Ex, Netzwerkaufruf, Animationen) sollten Sie stattdessen den hook mounted() verwenden.

Viele APM-Lösungen helfen Ihnen, solche häufig auftretenden Probleme zu vermeiden, indem Sie analysieren, was in jedem dieser Lebenszyklusereignisse vor sich geht, und Ihnen wertvolles Feedback geben.

 

Navigationswächter


Vue Router
ist der offizielle Router für Vue.js. Dieses Plugin ist verantwortlich für die Aktualisierung der URL in der Navigationsleiste Ihres Browsers und die Zuordnung dieser URL mit verschiedenen Ansichten/Komponenten, und es macht das Erstellen von SPAs zum Kinderspiel. Traditionell wäre es für APM-Lösungen eine Herausforderung, diese Seitenänderungen nachzuverfolgen, da keine tatsächliche Seitennavigation stattfindet. Stattdessen handelt es sich um eine Emulation einer Seitenänderung. Das Vue Router Plugin bietet jedoch
Navigationswächter,
an die Sie Ihre benutzerdefinierte Logik anschließen und ausführen können. Zum Beispiel:

 

1. Führen Sie einige Logik nach Routenänderung

1. router.afterEach(to > = 

2. lassen Sie pageName = to.path 

3. wenn (to.matched && to.matched.length > 0 && to.matched[0].path) 

4. pageName = to.matched[0].path 

5. }  

6.  

7. / / eslint-disable-next-line no-console 

8. console.log(' Seite auf 'setzen,pageName) 

9. ineum('Seite', pageName) 

10. })

 

2. Logik vor Routenänderung ausführen

1. router.beforeEach(to, from, next) > =

2. / / Sammeln von Seitenmetriken

3. console.log(‘ Seite auf ‘setzen,pageName)

4. ineum(‘Seite‘, pageName)

5. ineum(‘Metriken‘, pageMetrics)

6. })

Navigationswächter ermöglichen es APM-Lösungen, Metriken seitenweise zu kategorisieren und seitenspezifische Einblicke und Berichte bereitzustellen. APM-Lösungen zeigen solche Metriken in der Regel in einem benutzerfreundlichen Dashboard mit Diagrammen und Tabellen an.

 

Fehlerbehandlung

Vue.js bietet auch eine elegante Möglichkeit, Standardfehlerbehandlung an Drittanbieter-Plugins zu delegieren.

Diese Entkopplung ermöglicht Es APM Solutions, auf die vollständige Stack-Ablaufverfolgung eines Fehlers zuzugreifen und auf der Grundlage ihrer Verarbeitung aufschlussreiche Vorschläge zu unterbreiten.

Vue.config.errorHandler ist die API, die diese Funktionalität nutzt.

 

1. var _oldOnError = Vue.config.errorHandler; 

2. Vue.config.errorHandler = Funktion VueErrorHandler(error, vm) 

3. atatus.notify(Fehler, 

4. extra: 

5. componentName: Vue.util.formatComponentName(vm), 

6. propsData: vm.$options.propsData 

7. }  

8. }); 

9.  

10. wenn (Typ der _oldOnError === 'Funktion') 

11. _oldOnError.call(this, error, vm); 

12. }  

13. };

 

Viele APMs verwenden neue Technologien wie maschinelles Lernen und KI, um ihre Erkenntnisse für Ausnahmen und Fehler zu verbessern, die in einer Vue.js-Anwendung auftreten.

 

Synthetische Überwachung und Messung der realen Leistung

Die oben beschriebenen APM-Techniken stellen möglicherweise noch keine realen Leistungsmetriken dar. Aufgrund der Natur von SPAs ist es schwierig, die Zeit zu bestimmen, die zum Initialisieren einer Anwendung ab dem Zeitpunkt benötigt wird, an dem der Bildschirm sichtbar wird. Um es klarzustellen, kann der Zeitunterschied zwischen dem Rendern von DOM und der verwendbaren Webseite enorm sein! Die einzige narrensichere Möglichkeit, reale Szenarien zu messen, besteht darin, bestimmte Aktionen/Teile Ihrer Anwendung zu zielen und zu versuchen, die Leistung mithilfe von vom Menschen wahrnehmenden Metriken zu messen.

Ein protokollbasierter Monitor stellt z. B. nach dem ersten Laden einer JavaScript-basierten Seite keine Daten bereit. Um tatsächliche Ladezeiten und Metriken zu erhalten, müssen wir die JavaScript-Ereignisse von einem tatsächlichen Browser aus überwachen. Hier kommt synthetische Überwachung und echte Browser ins Spiel. Es kann die Lücke zwischen grundlegenden HTTP-Antwortzeiten und der Leistung tatsächlicher Benutzerinteraktionen überbrücken.

Einige der synthetischen Überwachungslösungen auf dem Markt heute verstehen dies gut und sind um diese Ideologie der Verbesserung der Benutzererfahrung gebaut. Die
Webanwendungsüberwachungslösung
von Dotcom-Monitor verwendet ein Point-and-Click-Skripttool, mit dem Benutzer Benutzerflüsse aufzeichnen können, z. B. Anmeldeprozesse, Hinzufügen von Artikeln zu einem Warenkorb, Ausfüllen von Formularen usw. Diese aufgezeichneten Schritte werden dann auf einer Vielzahl von echten Browsern und Geräten ausgeführt. Dieser Ansatz hilft, die reale Leistung Ihrer Anwendung zu messen. Sie stellen außerdem sicher, dass Ihr Inhalt mithilfe von Techniken wie
Schlüsselwortüberprüfung
und
Bildvalidierung
ordnungsgemäß geladen wird, mit denen überprüft wird, ob der geladene Inhalt mit dem übereinstimmt, was während der ersten Skripterstellung aufgezeichnet wurde. Dieser Ansatz ist für Vue.js-Anwendungen von Vorteil, da Sie Ihrer Anwendung keinen unnötigen Overhead hinzufügen müssen, der mit der Installation von NPM-Paketen oder externen Skripts einhergeht.

Zusammenfassend lässt sich sagen, dass Dotcom-Monitor es trotz eines JavaScript-Frameworks, das DOM zur Laufzeit manipuliert, ganz einfach macht, die Leistung dynamischer Webanwendungen, die mit Vue.js erstellt wurden, zu überwachen und zu messen. Die Lösung kombiniert alle oben genannten Funktionen in einer konsolidierten Plattform. Wenn Sie sehen möchten, was maschinelles Lernen und KI auf den Tisch bringen könnten, sollten Sie die Produkte ausprobieren, die sie integrieren. Aber wenn Sie eine problemlose, kostengünstige Lösung implementieren möchten, die einfach funktioniert und weniger aufdringlich ist, dann sollten Sie
Dotcom-Monitor
ausprobieren.

 

 

“Vue.js Logo”, Von Evan You, lizenziert unter CC BY 4.0

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email
Share on print
Drucken