⌛ Tiempo de resumen

En mi último blog hablé sobre cómo reduje el tamaño de mi aplicación de 75 MB a 34 MB en solo 2 semanas (¡Ver!). Pero eso no es todo, también mejoré el rendimiento general de nuestra aplicación hasta en un 80%.

¡¡Descubramos CÓMO!!

? La tradición

Después de una simple ronda de recorrido, descubrí algunos de los problemas de nivel principal en nuestra aplicación que conducen a una mala experiencia de usuario y rendimiento. ¡Qué día!

• Villano principal: toda la interfaz de usuario de la aplicación se congela mientras se genera una respuesta en tiempo real

• Villano secundario: tiempo de respuesta lento y sin velocidades de cuadros

• Amante del villano: demasiadas llamadas de API

• The Undead Army: manejo deficiente de errores y fallas

• Sufrimientos: más usos de CPU y costos de servidor

• Los deslustrados - ¡YO!

De ahí comienza una batalla sin vida por la recreación del universo con la esperanza de un mundo mejor.

El Plan Tahití (Pero esta vez funciona)

Así que comencé a abordar los problemas más fáciles primero, ya que es más fácil ignorar la gran depresión que luchar contra ella en este momento.

1. ⚛️ Maldición de reaccionar

La sabiduría y la maldición de ReactJs son los estados. A medida que crecemos en React, nos damos cuenta de que cuanto menos estados, mejor será la aplicación. Por lo tanto, esta obra de arte en particular estaba usando 22 (Sí, malditos 22 estados de uso) en una única pantalla de chat donde todo lo que puedes hacer es enviar y recibir mensajes.

¡Cereza en la cima!
Estábamos utilizando la implementación de eventos del lado del servidor para obtener datos fragmento por fragmento del servidor, que en el caso era palabra por palabra. Entonces, si tuviera una consulta que tenga una respuesta de 100 palabras (ESTA ES LA MENOR RESPUESTA). De hecho, recibirá 100 eventos.

Entonces, si sabes las matemáticas, 100*22 = 2200 se vuelven a renderizar cada vez que recibimos una respuesta.

¿Tengo que dar más explicaciones? ( NO )

Entonces comencé a recrear toda la pantalla y ahora reduje el número a 6 estados. Con una funcionalidad mejor y más fluida que antes.

¡¡Eso es 72% más de rendimiento que el anterior!!

2. ❄️ El desierto helado

Ahora, después de presenciar el Radahn de React, podemos concluir fácilmente que la aplicación se congelará bastante, ¿verdad?

Ahora, incluso con 6 estados, el problema principal sigue siendo el mismo: 100*6. Seguimos colgados pero con menos estados.

La causa principal fue que reaccionar dom se actualizaba en cada fragmento. Entonces, para abordar esto utilizamos "Procesamiento por lotes y generación de velocidades de fotogramas.

¡Diablos, sí!

Entonces, básicamente, en lugar de actualizar el DOM cada vez que obtenemos un fragmento, estábamos creando lotes de fragmentos y actualizándolos en una velocidad de fotogramas dinámica fija. Estas velocidades de fotogramas se solicitaron desde el sistema operativo, por lo que cada dispositivo tendrá un FPS diferente según la capacidad del sistema, lo que le dará a la aplicación un rendimiento más sólido y compatible.

Capturamos un conjunto limitado de fragmentos en un lote y mantenemos la respuesta hasta que se libera el fotograma y repetimos lo mismo hasta que se procesan todos los fragmentos.

Por lo tanto, en lugar de actualizar DOM 100 veces, solo actualizamos DOM 3-4 veces.

¡Ahora haz los cálculos y calcula la mejora del rendimiento para la tarea!

3. ? ¡Sé un buen oyente!

No me funcionó conseguir una novia, pero ciertamente funcionó para mejorar mucho la aplicación.

Las API son una forma interesante y agradable de obtener datos, ¡pero usarlas sabiamente es una habilidad propia! Ahora esta aplicación estaba usando esta API para obtener el estado del usuario desde el backend. ¡¡Pero la mejor parte es que lo usaba cada 3 segundos!!

Lo entiendo, el desarrollador tenía inseguridades, pero esto no es lo que querían decir con lograr un equilibrio entre el trabajo y la vida privada.

a) ir a buscar

Para obtener los datos del usuario cada vez que el usuario usa la aplicación, es necesario realizar la llamada al inicio de la aplicación o cada vez que se llama a la aplicación recientemente (escucha del estado de la aplicación). Llamarlo cada 3 segundos no solo utiliza recursos móviles en un flujo infinito sino que también provoca una sobrecarga del servidor.

En lugar de recibir 100 solicitudes de 100 usuarios, el servicio recibirá 100 solicitudes de 1 usuario. No me parece muy escalable ni confiable.

Además, crea pérdidas de memoria y usos imposibles de rastrear, lo que genera problemas en usos prolongados.

b) Flujo de datos

Ahora, después de resolver ese ataque DDOS interno, descubrí que esta aplicación estaba usando muchas API cuyos datos se desvanecían en el aire (manejo deficiente de datos). En lugar de almacenar datos en caché y usarlos nuevamente en el mismo flujo, la aplicación volvió a llamar a las API.

Me aseguré de que los datos se almacenen en caché y fluyan linealmente al flujo y que se llame a la API solo cuando sea necesario para una instancia nueva.

¡Punto para recordar!

Esto resultó en una mejor salud del servidor y menos tiempo de inactividad para nuestro backend debido a demasiadas solicitudes de API. Dado que a la empresa le cuesta ejecutar el backend, es fundamental utilizar las API de forma eficaz y solo cuando sea necesario

No solo para el backend sino también para el frontend, realizar llamadas adicionales a la API hace que el sistema consuma más, ya que tiene que realizar más protocolos y apretones de manos HTTP cada vez que realiza una llamada.

3. ? ¡No es un error si no lo reconocemos!

Uno de los aspectos cruciales para manejar las API son los ERRORES. Consolarlos con los registros no es suficiente, ya que hace que la experiencia del usuario sea mucho peor que sus buenos usos.

Es importante manejar los errores de cualquier acción utilizando algún tipo de sistema de retroalimentación. Puede ser una alerta, una ventana emergente, un brindis o cualquier cosa. ¡Pero el usuario debe saber por qué y cómo sucedió para poder informarlo o al menos saber qué hizo mal!

4. ? sus recuerdos

¡Tengo que tenerlo, amigo! Ella no volverá, pero las pérdidas de memoria sí lo harán. Una de las principales cosas que olvidamos al adjuntar cualquier escucha o llamada de API es eliminar su instancia después de cerrar esa actividad.

Esta aplicación tenía ese tono, las llamadas a la API se realizaban incluso después de que la actividad estaba cerrada o en segundo plano. Provocando un uso innecesario de la CPU y un acaparamiento de recursos, lo que hace que la aplicación sea más lenta y difícil de usar.

La limpieza adecuada de estos hace que la aplicación sea más rápida y menos complicada.

5. Declaración de Prestaciones

Ahora, una forma básica de usar cualquier activo es importarlo y usarlo, ¿verdad?

¿Pero sabes cómo funciona? Cada vez que importa de forma predeterminada un elemento, se asigna a la memoria con una inicialización. Entonces, si importas y declaras una imagen o componente en 5 archivos como este

import Profile from '../../profile'

¡Creará 5 instancias para lo mismo!

En su lugar, debe llamar a todos los activos en un archivo de índice e importar el objeto desde él, de esa manera solo se declarará una vez y Reference lo utilizará en todas partes.

Por lo tanto, se reduce el uso de memoria a 4/5.

✅ Conclusión -

¡Eres un buen hombre, Arthor! (Lo siento, acabo de completar RDR2 y fue un gran juego).

Con estos cambios, el rendimiento de la aplicación aumentó enormemente no solo con una mejor salud del lado móvil sino también con una mejor optimización del lado del servidor.

¡¡¡La calificación de la tienda pasó de 3,5 a 4,1 en solo 1 semana de uso!!!

Recuerde que no es solo un código sino una historia sobre cómo los usuarios interactúan con él.

Como desarrollador Frontend, todo el producto depende de nosotros. No importa cuán escalable sea el backend, el producto final que el usuario va a utilizar está fuera de la creación y es lo único sobre lo que toman decisiones. Por eso, para nosotros es muy importante brindarles una interacción fluida que conduzca a mejores negocios para toda la empresa.

? ¡Deja comentarios si te gusta el blog o compártelo con tus amigos para que ellos también lo disfruten!