Por qué Framer usa React para construir sitios

React se ha convertido en una de las herramientas más populares para construir para la web moderna, que actualmente alimenta más de 14.4 millones de sitios web en todo el mundo. Su amplia adopción entre los ingenieros de software destaca la confianza que ha ganado y la alta calidad de la experiencia de los desarrolladores.

¿Qué es la web moderna?

Antes de hablar del impacto de React, hablemos de lo que realmente queremos decir cuando hablamos de la "web moderna". Los sitios web construidos con HTML y CSS básicos son fiables y eficientes, ¿por qué no seguir con métodos tradicionales?

En los primeros días de internet, los sitios web eran principalmente colecciones estáticas de páginas diseñadas para consumir información. Si bien estos sitios tradicionales basados en HTML y CSS eran ligeros y eficientes, carecían de la interactividad y capacidades dinámicas que esperan los usuarios actuales.

La web moderna ha evolucionado hacia un ecosistema dinámico e interactivo donde los sitios web son aplicaciones completas. Se integran con APIs, involucran a los usuarios con animaciones y transiciones suaves y eficientes, ofrecen actualizaciones en tiempo real y admiten una variedad de dispositivos, desde ordenadores de escritorio hasta teléfonos y tabletas.

Los métodos tradicionales de desarrollo web siguen siendo una parte esencial del desarrollo web actual, pero usarlos sin una herramienta moderna puede dificultar la construcción de las interfaces de usuario complejas y la funcionalidad que requieren las aplicaciones web modernas. En lugar de centrarse en su producto, los desarrolladores dedicarían una cantidad significativa de tiempo al desarrollo de la infraestructura subyacente y, en esencia, reinventando la rueda para funcionalidades comunes.

Aquí es donde herramientas como React ayudan. React es una de las bibliotecas de desarrollo frontend más populares en la actualidad, desarrollada por Meta con la web moderna en mente. Capacita a los desarrolladores en empresas de cualquier tamaño para crear aplicaciones web avanzadas que satisfacen e incluso superan las expectativas actuales de los usuarios.

Experiencia de usuario mejorada

La creciente demanda de la web moderna de aplicaciones interactivas con interfaces de usuario complejas a menudo afecta al rendimiento. A medida que los sitios web se vuelven más ricos en funciones, los recursos necesarios para cargar y ejecutar estas aplicaciones pueden aumentar significativamente.

Esta mayor complejidad puede resultar en tiempos de carga más largos, menor capacidad de respuesta y posibles problemas de rendimiento, especialmente en dispositivos de gama baja o conexiones de red lentas. En la web moderna, los usuarios esperan experiencias fluidas en todas las plataformas y dispositivos, por lo que los tiempos de carga lentos e interfaces no receptivas resultan inaceptables.

Las actualizaciones visuales ineficientes suelen ser responsables de un mal rendimiento. Entre bastidores, el navegador realiza una serie de pasos denominados "canal de píxeles" para actualizar la interfaz de usuario, que incluye cálculos de diseño, pintura de elementos y composición de las capas en la pantalla. Estos pasos son necesarios para los cambios visuales, pero pueden ser intensivos en recursos, a menudo bloqueando el hilo principal y causando interfaces no receptivas durante las actualizaciones.

React aborda este desafío al introducir el concepto del DOM virtual. El DOM virtual es una representación ligera en memoria del DOM real. En lugar de actualizar directamente el DOM real, lo que puede provocar repintados y reflujo ineficientes e innecesarios, React calcula eficientemente las diferencias entre el DOM real y el DOM virtual, aplicando solo los cambios necesarios al DOM real.