Aplicaciones de supervisión escritas en Vue.js

Vue.js es un marco de JavaScript front-end que puede usar para crear aplicaciones de una sola página (SPA) progresivas. Evan You, un ex empleado de Google, creó Vue.js en 2014 con la idea de construir una solución ligera que tuviera las mejores características de Angular y React. Desde el día de su creación, Vue.js ha ido ganando popularidad constantemente. Actualmente, su base de usuarios es triple a la de Angular, y un poco más que el framework React de Facebook.

 

¿En qué se diferencia Vue de otros marcos Javascript?

Comparemos Vue.js con algunos de los otros marcos de JavaScript notables, como React y Angular.

 

Vue.js vs. React

Vue.js comparte muchas similitudes con React, ya que ambos utilizan un DOM virtual, proporcionan una estructura de componentes reactiva, reutilizable y componible. Ambos son casi similares en rendimiento, sin embargo, donde Vue.js eclipsa a React está en su desacoplamiento de HTML con código JavaScript. Esta separación de preocupaciones resulta beneficiosa cuando se trabaja en un proyecto a gran escala que podría tener muchos componentes.

 

Vue.js vs. Angular

Las diferencias son más pronunciadas cuando se compara Vue.js con Angular. Vue.js es mucho más fácil de aprender que Angular, que tiene una curva de aprendizaje pronunciada y requiere conocimientoprevio de mecanografiado y no sólo JavaScript. Por otro lado, aprender a construir una aplicación Vue.js simple puede tomar menos de un día! Vue.js también es mucho más rápido que Angular. Sin embargo, el rendimiento de las versiones recientes de Angular es comparable al de Vue.js.

 

¿Cuáles son las ventajas y desventajas de usar Vue.js?

Al igual que cualquier otro marco, Vue.js también tiene algunas ventajas significativas y algunas desventajas.

 

Ventajas de Vue.js

  • Enfoque. Vue.js es fácil de aprender incluso para desarrolladores principiantes con conocimientos básicos de HTML, CSS y JavaScript.
  • Rendimiento. Vue.js es un marco excepcionalmente performante. Un proyecto Vue.js compilado y con cremallera de producción pesa sólo alrededor de 20 KB.
  • Escalabilidad. La arquitectura basada en componentes, junto con secciones separadas para HTML y JavaScript, facilita bastante el mantenimiento y el escalado de un proyecto Vue.js.

Desventajas de Vue.js

  • Menos plugins/extensiones. Un ecosistema decepcionante de plugins y extensiones hace que la implementación de algunas de las características estándar sea un proceso engorroso.
  • Problemas con iOS/Safari. Vue.js tiene dificultades para trabajar correctamente en versiones anteriores de Safari e iOS, aunque puede corregirlos con algunas modificaciones en el código.

Necesidad de supervisar el rendimiento de las ZBA Vue.js

Para cualquier aplicación creada para la web, la optimización del rendimiento es esencial. Las velocidades de Internet varían significativamente en las regiones y tipos de redes. Por lo tanto, es vital asegurarse de que nuestra aplicación se cargue lo más rápido posible, ya sea la necesidad de utilizar soluciones de supervisión de sitios web. El monitoreo del sitio web puede ayudar a comparar varios aspectos relacionados con el rendimiento de una aplicación Vue.js. Por ejemplo, el tiempo de representación de la aplicación, la capacidad de respuesta y el tiempo que tarda la aplicación en interactiva, una vez representada.

 

Vue.js habilita y alienta la supervisión

Hasta la fecha se han creado numerosas soluciones de supervisión para Vue.js. Y veremos cómo se trata exactamente de la supervisión de métricas relacionadas con el rendimiento en Vue.js. Por ejemplo, el tiempo de carga de la página, el tiempo de procesamiento, la sincronización de las solicitudes de red y el seguimiento de errores.

 

El ecosistema NPM


NPM
es actualmente el registro de software más grande del mundo. NPM comenzó originalmente como un centro de software para paquetes relacionados con Node.js, pero fue rápidamente adoptado por la comunidad JavaScript y utilizado para distribuir todo tipo de paquetes JavaScript. Hoy en día, el registro NPM contiene más de 800.000 paquetes de software. Vue.js utiliza NPM para la administración de paquetes, y esto hace que el desarrollo de un paquete personalizado para manejar APM (Application Performance Management) sea bastante fácil para cualquier solución de terceros. La mayoría de las soluciones de monitoreo en la web emplean esta ruta. A menudo se encontrará instalando un paquete NPM personalizado para integrarlo con la solución APM de terceros antes mencionada. Por ejemplo, tendrá un aspecto similar al siguiente: npm install –save @third-party/apm-vue

Soporte para extensiones

Aprendimos que es bastante fácil desarrollar paquetes para Vue.js y distribuirlos a través de NPM. Pero Vue.js todavía tiene que proporcionarnos formas de integrar estos paquetes en el código. Y Vue.js lo hace con bastante elegancia proporcionando una API fluida que nos permite integrar plugins en nuestra aplicación. Vue.use() es un método global que puedes utilizar para incorporar plugins/extensiones. Por ejemplo:

  1. 
      var
     MyPlugin : require('apm-vue')
  2. use(MyPlugin, opciones)
  3. 
      nuevo
     Vue(A)
  4.  //... Opciones 
  5. })

 

Vue.js también es lo suficientemente inteligente como para ignorar múltiples declaraciones de una llamada Vue.use() para el mismo plugin y lo trata como una sola llamada. Esta comprobación nos ayuda a evitar problemas extraños que son mucho más difíciles de rastrear.

 

Soporte para interceptaciones de JavaScript simples

Muchos proveedores de soluciones APM no quieren desarrollar y mantener paquetes de software separados para cada marco de JavaScript por ahí, ¡a lo que estoy de acuerdo, ya que hay bastantes de ellos! (Angular, Vue.js, React, Alpine, etc.). Por lo tanto, la mayoría de las soluciones de APM proporcionan un único método JavaScript que se puede conectar a cualquiera de estos marcos. Esta táctica permite a los AM realizar un seguimiento de las métricas de rendimiento de una aplicación Vue.js fácilmente. Por ejemplo:

  1. <Guión>
  2.  (función(i,s,o,g,r,a,m)-i-r;i[r]-i[r]-- [APM] función()-
  3.  (i[r]. qi[r].q- []).push(arguments)-,i[r].l-1*new Date(); as.createElement(o),
  4.                 ms.getElementsByTagName(o)[0]; a.asyncn.o 1; a.srcág;m.parentNode.insertBe fore(a,m)
  5.  (window,document,'script','//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>

 

Normalmente tiene que agregar dicho código JavaScript en la < etiqueta head de index.html de su > proyecto, y el resto se encargará automáticamente.

Vue.js Ganchos de ciclo de vida

Un componente Vue.js es una agrupación lógica de la interfaz de usuario, la lógica y el estilo destinadoa a un propósito específico. Por ejemplo, un componente de tabla o un componente de barra de navegación. Vue.js expone varios métodos para enganchar el ciclo de vida de un componente.

 

Vue Lifecycle Events

Puede utilizar estos
enlaces
de ciclo de vida para identificar el estado de la aplicación en cada nivel e identificar problemas críticos en el código. La mayoría de las soluciones de APM utilizan estos métodos en gran medida. Por ejemplo, un problema de rendimiento típico surge cuando se está realizando demasiado trabajo en el gancho created(); Esta es una mala práctica porque sólo la inicialización de variables debe tener lugar en el gancho created(). De lo contrario, podría provocar la representación retrasada del componente. Para las operaciones que consumen muchos recursos (Ex, Llamada a la red, Animaciones), debe utilizar el gancho mounted() en su lugar.

Muchas soluciones de APM le ayudan a evitar estos problemas comunes mediante el análisis de lo que está sucediendo en cada uno de estos eventos del ciclo de vida y le proporcionan comentarios valiosos.

 

Guardias de navegación


Vue Router
es el router oficial de Vue.js. Este plugin es responsable de actualizar la URL en la barra de navegación de su navegador y mapear esta URL con diferentes vistas / componentes, y hace que la construcción de SPAs sea muy fácil. Tradicionalmente, sería un desafío para las soluciones de APM realizar un seguimiento de estos cambios de página, ya que no hay una navegación de página real. En su lugar, es una emulación de un cambio de página. Sin embargo, el plugin Vue Router proporciona
protectores
de navegación a los que puede enlazar y ejecutar su lógica personalizada. Por ejemplo:

 

1. Ejecute algo de lógica después del cambio de ruta

1. router.afterEach(a > ? 

2. Deje que pageName á to.path 

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

4. nombredepágina: to.matched[0].path 

5. }  

6.  

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

8. console.log('Establezca la página en', pageName) 

9. página ineum('page', pageName) 

10. })

 

2. Ejecute la lógica antes del cambio de ruta

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

2. // recopilar métricas de página

3. console.log(‘Establezca la página en‘, pageName)

4. página ineum(‘page‘, pageName)

5.métricasde éneum(‘ ‘, pageMetrics)

6. })

Los protectores de navegación permiten que las soluciones de APM clasifiquen las métricas de forma inteligente y proporcionen información e informes específicos de la página. Las soluciones de APM suelen mostrar estas métricas en un panel fácil de usar, con gráficos y tablas.

 

Manejo de errores

Vue.js también proporciona una manera elegante de delegar el manejo de
errores estándar
a plugins de terceros. Este desacoplamiento permite a Las soluciones de APM acceder al seguimiento de pila completo de un error y proporcionar sugerencias detalladas basadas en su procesamiento.

Vue.config.errorHandler es la API expuesta para aprovechar esta funcionalidad.

 

1. var _oldOnError á Vue.config.errorHandler; 

2. Vue.config.errorHandler á función VueErrorHandler(error, vm) ? 

3. atatus.notify(error, ? 

4. extra: ? 

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

6. propsData: vm.$options.propsData 

7. }  

8. }); 

9.  

10. si (typeof _oldOnError 'función') 

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

12. }  

13. };

 

Muchas AMI utilizan nuevas tecnologías, como el aprendizaje automático y la IA para mejorar su información sobre excepciones y errores que se producen en una aplicación Vue.js.

 

Monitoreo sintético y medición del rendimiento del mundo real

Es posible que las técnicas de APM descritas anteriormente aún no representen métricas de rendimiento del mundo real. Debido a la propia naturaleza de los SPA, es difícil determinar el tiempo que se tarda en inicializar una aplicación desde el momento en que la pantalla se vuelve visible. Para aclarar, la diferencia en el tiempo entre DOM para renderizar y la página web que se hace utilizable puede ser enorme! La única manera infalible de medir escenarios del mundo real es apuntando a acciones/partes específicas de la aplicación e intentando medir el rendimiento mediante métricas perceptibles por el ser humano.

Por ejemplo, un monitor basado en protocolo no proporcionará ningún dato después de la carga inicial de una página basada en JavaScript. Para obtener métricas y tiempos de carga reales, necesitamos supervisar los eventos de JavaScript desde un explorador real. Aquí es donde entra en juego la monitorización sintética y los navegadores reales. Puede salvar la brecha entre los tiempos de respuesta HTTP básicos y el rendimiento de las interacciones reales del usuario.

Algunas de las soluciones de monitoreo sintético en el mercado hoy en día entienden esto bien y se construyen en torno a esta ideología de mejorar la experiencia del usuario. La solución de monitoreo de
aplicaciones web
de Dotcom-Monitor utiliza una herramienta de scripting de apuntar y hacer clic que los usuarios pueden utilizar para registrar flujos de usuarios como procesos de inicio de sesión, agregar elementos a un carro de la compra, rellenar formularios, etc. Estos pasos grabados se ejecutan en una multitud de navegadores y dispositivos reales. Este enfoque ayuda a medir el rendimiento real de la aplicación. También se aseguran de que el contenido se cargue correctamente mediante técnicas como la validación de
palabras clave
y la validación de
imágenes,
que comprueban que el contenido cargado coincide con lo que se registró durante el scripting inicial. Este enfoque es ventajoso para las aplicaciones Vue.js, al no tener que agregar sobrecarga innecesaria a la aplicación que viene con la instalación de paquetes NPM o scripts externos.

En conclusión, a pesar de ser un marco de JavaScript que manipula DOM en tiempo de ejecución, Dotcom-Monitor hace que sea bastante fácil supervisar y medir el rendimiento de las aplicaciones web dinámicas creadas con Vue.js. La solución combina todas las características mencionadas anteriormente dentro de una plataforma consolidada. Si desea ver qué aprendizaje automático e IA podrían traer a la mesa, debe probar los productos que los incorporan. Pero, si desea implementar una solución sin complicaciones y rentable que simplemente funciona, y es menos intrusiva, entonces usted debe dar
Dotcom-Monitor
una oportunidad.

 

 

“Logotipo Vue.js”, Por Evan You, licenciado bajo CC BY 4.0

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email
Share on print
Impresión