Mejores prácticas: Frameworks frontales para su producto web

¿Qué es lo que garantiza el rechazo de los usuarios? Una interfaz de usuario lenta, tipos de letra incoherentes o botones mal colocados. Es difícil elegir el ‘ganador’, pero no querrás tener ninguno de ellos en la aplicación web en la que estás trabajando.

Por suerte, puedes evitar la creación de una mala interfaz de usuario si utilizas el marco de trabajo frontend adecuado. Sigue leyendo y descubre cuál es mi favorito.

¿Qué es el framework Frontend?

El frontend se refiere típicamente a la interfaz con la que los usuarios interactúan cuando están navegando por la web. Por lo general, el frontend se refiere al navegador, pero también podría significar la interfaz de usuario de una aplicación. Los desarrolladores solían escribir todos los códigos manualmente con el fin de crear los elementos, los comportamientos, y el intercambio de datos con el backend.

Un marco de frontend simplifica la tarea por tener códigos pre-escritos para que usted pueda construir. Sirve como una base que contiene elementos de uso común como la cuadrícula, la tipografía predefinida, y los componentes del sitio web como botones, barras de desplazamiento y paneles laterales.

Le evita reinventar la rueda para cada proyecto.

Cuota de mercado de los frameworks de interfaz de usuario

Hay más de un puñado de frameworks de interfaz de usuario disponibles, pero 3 de ellos son muy favorecidos entre la comunidad de desarrolladores.

Liderando el paquete está React, que tiene un promedio de 7 millones de descargas semanales. Supera a Vue.js y a Angular por una diferencia significativa, ya que los segundos han conseguido 1,5 millones y 500 mil descargas semanales de media.

React

React fue desarrollado por Facebook, en su intento de crear una UI de alto rendimiento y eficiente. Está basado en JavaScript y permite a los usuarios crear UI web con componentes HTML dinámicos. Una vez que los componentes están diseñados, React los renderizará en consecuencia basándose en los últimos datos.

En React, los componentes se construyen para encapsular el estado en el que se encuentran. Esto permite a los componentes pasar datos ricos y no requiere el Modelo de Objetos del Documento (DOM) para manejar el estado.

Facebook lanzó la primera versión de React en 2013. Un par de años después, se introdujo React Native para aplicaciones móviles.

Con React, la lógica de renderización está estrechamente acoplada con otra lógica de UI. Permite un rendimiento sin fisuras en el manejo de eventos, la transición de estado y la preparación de los datos de visualización. Esto es una desviación de la práctica convencional donde el marcado y la lógica se mantienen en archivos separados.

Mientras que la práctica de tener tanto el marcado como el Javascript en el mismo archivo está mal visto, hacerlo con React proporciona claridad en la vista.

La simplicidad de React ha visto el marco utilizado por algunas de las empresas más grandes, incluyendo Twitter, Pinterest, Netflix, y Udemy.

Pros de React

React utiliza DOM virtual, que es una extracción del DOM real para renderizar la UI. Es más eficiente, ya que los componentes tardan menos en aparecer en la pantalla.
Como los componentes en React están encapsulados, se pueden utilizar de forma independiente sin ninguna limitación.
React está modelado en torno a la programación funcional definida por datos inmutables, funciones puras y estilo declarativo. Por lo tanto, los códigos creados con React son fáciles de probar, principales y reutilizar.
Como el marco más popular, React cuenta con una gran comunidad global. También significa que tendrás una gran opción de paquetes de código abierto para trabajar.
React es proactivo en la actualización y la liberación de nuevas versiones del marco. Obtendrás correcciones de errores e improvisaciones a tiempo.
Con React puedes implementar diferentes técnicas de renderizado como el renderizado del lado del cliente(CSR), el renderizado del lado del servidor(SSR) o incluso la generación de archivos estáticos

Cons de React

Si eres nuevo en React, el concepto de mezclar plantillas con lógica (JSX) puede ser confuso al principio.
Hay demasiado enfoque en la biblioteca central. Preocupaciones como el enrutamiento y la gestión del estado global se delegan en las bibliotecas complementarias. La responsabilidad de cómo desarrollar con las distintas librerías recae en gran medida en los desarrolladores.
A medida que el proyecto crece, se pueden perder los «componentes de flujo y datos». El hecho de que la documentación de React sea a menudo incompleta, no gracias a su rápido crecimiento, agrava aún más el asunto.

Cuándo usar React

React es el framework front-end ideal para construir una aplicación web que espera una alta interacción y estados que cambian frecuentemente. Su enfoque único de usar el DOM virtual significa que la aplicación web podría responder a la entrada de los usuarios rápidamente y renderizar dinámicamente la UI.

Si estás construyendo una aplicación web con poco tiempo, también encontrarás en React la solución adecuada. Sus componentes reutilizables demuestran que ayudan a reducir el tiempo de desarrollo.

Vue.js

Vue.js puede carecer de nombres reconocibles en términos de adoptantes, pero sigue siendo un marco muy popular entre los desarrolladores. El framework fue creado en 2014 por Evan You. Es simple y versátil, permitiendo a los desarrolladores abordar procesos dinámicos sin necesidad de bibliotecas adicionales.

Al igual que React, Vue.js se basa en un DOM virtual. Además de eso, es ligero y soporta la vinculación de datos de dos vías. Al ser un framework de tamaño reducido también ayuda a aumentar el rendimiento del frontend.

Pros de Vue.js

Vue.js tiene una documentación extensa y concisa, que le ayuda a aprender el marco como un novato.
Utiliza DOM virtual, lo que mejora la eficiencia de representación.
Vue.js es altamente integrable. Los componentes más pequeños de Vue.js pueden integrarse sin problemas en la infraestructura existente sin ningún efecto adverso.
Ofrece componentes de vista reactivos y componibles.
Las plantillas creadas a partir de Vue.js están en formato HTML. Es un punto a favor para los desarrolladores que están familiarizados con HTML.
El tamaño de todo el framework es de sólo 18 kB, lo que hace que Vue.js sea increíblemente ligero y mejore el rendimiento de la UX.

Cons de Vue.js

La comunidad de Vue.js es relativamente pequeña ya que carece de popularidad. Por lo tanto, conseguir apoyo de los compañeros es bastante difícil.
La mayoría de las discusiones sobre Vue.js se llevan a cabo en chino, ya que el marco es muy popular entre las empresas chinas. La barrera del idioma hace que la comunicación sea difícil para los desarrolladores de otros lugares.
La falta de desarrolladores experimentados, el apoyo de la comunidad y los problemas de estabilidad de los componentes hacen que sea arriesgado usar Vue.js en proyectos grandes.

Cuándo usar Vue.js

Vue.js es genial para crear una aplicación simple de una página. Tiene una curva de aprendizaje poco profunda donde los desarrolladores pueden aprender rápidamente las cuerdas alrededor del marco. Sin embargo, todavía no está pensado para proyectos complicados, ya que conseguir un experto en Vue.js no es fácil.

Angular

Angular, que está creado en base a TypeScript, es un framework frontend integral de Google. Fue lanzado en 2016 y está construido con el enfoque de programación orientada a objetos. El marco cuenta con un enlace de datos bidireccional, que funciona bien en el desarrollo de aplicaciones web y móviles.

Hasta la fecha, Angular es uno de los marcos más completos de la historia, ya que los desarrolladores pueden abordar tareas complicadas dentro del propio marco. No hay necesidad de bibliotecas adicionales en el desarrollo de UI/UX complejas.

Pros de Angular

La lógica de la aplicación y la capa de UI están desacopladas con la arquitectura Modelo-Vista-Controlador de Angular. También soporta la separación de preocupaciones.
Puedes saltarte el renderizador DOM por defecto de la plantilla interceptando las llamadas de renderizado. Por ejemplo, el renderizador puede ser configurado para cambiar la UI dinámicamente.
Angular tiene un fuerte soporte para construir y manejar formularios dinámicos. Se pueden utilizar plantillas para crear nuevos formularios basados en un modelo de datos que cambia dinámicamente.
La biblioteca RxJS se instala junto con Angular. Es una biblioteca que soporta la programación reactiva con flujos observables para manejar el código asíncrono fácilmente.
Los servicios y la inyección de dependencias en Angular permiten que los componentes sean fácilmente reutilizados, probados y mantenidos. Esta característica ayuda a los proyectos más grandes ya que las dependencias pueden ser llamadas desde fuentes externas, en lugar de ser creadas dentro de la clase.
La compilación anticipada de Angular da como resultado un tiempo de carga más rápido y una mayor seguridad. En este proceso, el código JavaScript se crea durante la fase de construcción en lugar de después de las descargas del navegador.

Cons de Angular

Algunas personas pueden tener dificultades para entender la arquitectura multicapa de Angular, y esto puede afectar a la depuración en el marco. Depurar una aplicación de tamaño considerable basada en Angular puede ser un proceso insoportable.
Las aplicaciones web creadas con Angular tienen opciones limitadas de SEO, que pueden ser difíciles de alcanzar por los rastreadores de los motores de búsqueda.
Los desarrolladores que están familiarizados con JavaScript encontrarán Angular relativamente difícil en comparación con React y Vue.
Angular utiliza Typescript en lugar del más común JavaScript.

Cuándo usar Angular

Angular es el framework al que hay que acudir cuando se crea un sitio web empresarial de gran tamaño o un proyecto a gran escala con una infraestructura compleja. También es adecuado para proyectos que implican aplicaciones web progresivas (PWA).

Por qué usamos React

React es, sin duda, nuestro framework frontend favorito. He aquí por qué nos encanta:

Somos capaces de utilizar React en proyectos de diferente complejidad. Funciona en la creación de un MVP, Startup, Empresa, y solución de comercio electrónico.
React nos da el ritmo para construir soluciones simples y escalables. Trabajar con React siempre ha sido una experiencia placentera.
Nuestros desarrolladores ya no necesitan construir componentes desde cero. El gran número de bibliotecas y herramientas de React reduce drásticamente el tiempo de desarrollo.
Podemos crear una interfaz de usuario impresionante para nuestro producto utilizando componentes de React de código abierto como Ant Design y Material AI.
React es posiblemente el marco de trabajo front-end más popular. No tenemos que preocuparnos por el mantenimiento y la personalización, ya que cuenta con una vibrante comunidad de desarrolladores. Es una historia diferente si estamos usando Vue.js o Angular.
Es más fácil encontrar un desarrollador de React para nuestro equipo en comparación con otros frameworks.

Hemos desarrollado con éxito algunos proyectos con React, y aquí hay dos notables.

Apprvl

Apprvl es una app creada para que los fotógrafos simplifiquen las aprobaciones de sus imágenes por parte de los clientes. Los fotógrafos pueden subir sus trabajos a través de la app y obtener comentarios compartiendo los enlaces generados con sus clientes.

Nuestra solución

Empezamos construyendo las principales partes funcionales en la app web para probar las hipótesis con usuarios reales. En base al feedback, realizamos los cambios oportunos en las partes.

Después, procedemos a construir una arquitectura backend escalable y arrancamos el desarrollo de la app web.

Completamos el ciclo completo de desarrollo de la apprvl basado en el MVP.

Resultados

Usando React, somos capaces de entregar un MVP que cumple con todos los requisitos. Se entrega con un mínimo de errores a lo largo del ciclo de desarrollo y es escalable para futuros desarrollos.

Plai

Plai es una herramienta gratuita de medición del rendimiento que ayuda a crecer, coordinar y comprometer a un equipo remoto.

Nuestra solución

Comenzamos el proyecto con la etapa de descubrimiento para identificar los problemas y necesidades reales de los propietarios de la startup.

En base al feedback, utilizamos React para crear la app web. Nos permite desarrollar el MVP muy rápidamente.

Una vez probado y validado el MVP, nuestro equipo procede a desarrollar la app completa.

Resultado

El MVP se entrega con la máxima calidad y satisface todos los requisitos. Hoy en día, la aplicación web sigue creciendo a medida que añadimos más características valiosas.

Resumen

No puedes permitirte entregar una interfaz de usuario de mala calidad o perder demasiado tiempo construyendo componentes para la aplicación web. Aprovecha la comodidad y la eficiencia de un framework frontend para dar vida a tus ideas.

No hay un framework que sirva para todo. Si estás construyendo una aplicación sencilla y tienes poco tiempo libre, opta por React o Vue.js. Elige Angular sólo si estás construyendo una solución web compleja porque el dolor en la depuración de la aplicación es real.

Si tienes dudas, estaré encantado de orientarte con la mejor opción. Mándame un correo por aquí.