En el artículo de hoy vamos a hacer un pequeño repaso por las tendencias front end en 2022. Para ello analizaremos las últimas tecnologías y los sitios más punteros con información de última hora para tener todos los datos a mano.
Empezamos
Muchos ingenieros solían despreciar el JavaScript. Pero los tiempos han cambiado. Las aplicaciones web están creciendo rápidamente, sobre todo gracias al desarrollo de herramientas de código abierto.
Este desarrollo nos ha alejado de jQuery y ha hecho que casi todas las empresas tecnológicas utilicen lo último en JavaScript y herramientas como Eslint, Babel y Webpack.
Hoy en día, el frente se mueve a una velocidad que hace difícil seguirlo.
Este post trata de ponerse al día con las direcciones de esta área de desarrollo en 2022. Quizás encuentres algo para ti en estas tendencias.
Svelte está ganando popularidad en el front end
Svelte es una herramienta relativamente nueva, que en teoría empezó demasiado tarde para poder tener una oportunidad contra React, Vue y Angular. Pero está ganando popularidad a un ritmo sin precedentes.
En 2021, los usuarios de StackOverflow lo anunciaron como el framework de front end más querido.
Pero Svelte es más que eso. Es un compilador que construye un front end optimizado.
Svelte no se importa en la aplicación como otros marcos populares. En su lugar, el código escrito en Svelte se compila en JavaScript puro. Esto permite que Svelte gane en velocidad frente a frameworks como React o Vue.
Utilizar el framework Svelte es muy fácil. Aquí tienes un ejemplo de cómo usar el estado + los formularios:
Utilizar el marco es muy fácil. Aquí tienes un ejemplo de uso de estado + formularios.
<script>
let a = 1;
let b = 2;
</script>
<label>
<input type=number bind:value={a} min=0 max=10>
<input type=range bind:value={a} min=0 max=10>
</label>
<label>
<input type=number bind:value={b} min=0 max=10>
<input type=range bind:value={b} min=0 max=10>
</label>
<p>{a} + {b} = {a + b}</p>
¡Así de sencillo! Observa tres cosas aquí:
- Los formularios se manejan de forma sencilla y elegante, como en los viejos tiempos, antes de los frameworks SPA. No es necesario adjuntar props onChange a las entradas.
- El marcado y la lógica conviven, encapsulando la lógica y una capa visible.
- El estado es fácil de gestionar.
No es de extrañar que el framework esté ganando adeptos en la comunidad. Es sólo cuestión de tiempo que se creen nuevas plataformas populares en Svelte.
React, Vue y Angular están aquí para quedarse
Empecé mi aventura con el front end justo antes del estreno de Angular 2, hace unos seis años. No puedo contar cuántas veces he leído desde entonces que Vue, React o Angular están muriendo.
Sin embargo, la verdad ha resultado ser bastante diferente. Cada uno de estos tres marcos ha crecido en popularidad desde su creación.
Aquí está el gráfico (Fuente: Npm Trends). Vale la pena añadir que todas las caídas repentinas del gráfico se deben a diciembre.
Echa un vistazo al gráfico anterior. Observa que la popularidad de Angular se ha multiplicado por más de diez. React y Vue han crecido aún más rápido. Los tres marcos soportan prácticamente los mismos casos de uso.
Esto significa que, independientemente de cuál de los tres marcos elijas, puedes esperar que se utilice y reciba apoyo durante años.
Vale la pena señalar que React no tuvo cambios significativos en 2021. Sin embargo, el ritmo de su adaptación es asombroso. Probablemente se deba al ecosistema que rodea a la tecnología. React tiene la mayor selección de bibliotecas y marcos de apoyo.
Dos ejemplos dignos de mención son Next y Gatsby. Esta última es una de las que comienza a despuntar últimamente en esto del desarrollo front end.
Los marcos deben soportar tanto las páginas estáticas como las dinámicas
Establezcamos qué son las páginas estáticas y dinámicas en términos prácticos.
Las páginas dinámicas obtienen y procesan el contenido cuando el usuario las abre. Las páginas estáticas están predefinidas durante el tiempo de construcción. Se convierten en archivos separados y generados en el disco. Pueden tener el mismo aspecto que las dinámicas, pero el navegador del usuario tiene menos trabajo que hacer.
Si tienes una tienda, puedes tener una única página de producto dinámica, o miles de páginas de producto estáticas, una para cada producto.
Esto significa que las páginas estáticas son más eficaces para los usuarios, pero tardan mucho más en construirse.
El motivo del abandono de las páginas estáticas fue la popularización de los frameworks front end de aplicaciones de una sola página (SPA) de tipo React y Vue. También les devolvieron el favor.
Los contenidos dinámicos que suelen generar las SPA son mucho más lentos que los que están listos para ser mostrados y escritos en HTML. La diferencia es especialmente grande cuando la página obtiene datos del servidor. Una página dinámica suele tener que descargar y procesar esos datos.
Esto dio lugar al nacimiento de las páginas estáticas en las SPA. Gatsby abordó este problema construyendo un marco e infraestructura para páginas estáticas en React.
Un sitio web como un blog, un portafolio o incluso una plataforma de cursos como freeCodeCamp será mucho más rápido en estático. Incluso el renderizado del lado del servidor, como suele ocurrir con Next.js, no garantiza una mayor velocidad (Fuente: Sidney Alcantara).
Centrarse en el tiempo de la primera pintura de contenido da lugar a un gran número de soluciones para generar páginas estáticas en otros frameworks, como Vue o Svelte.
Por otro lado, las páginas estáticas son difíciles de escalar para millones de páginas. Si estás construyendo una aplicación con mucho contenido dinámico, como perfiles de usuario, probablemente sea mejor que utilices páginas dinámicas. Ambas formas de manejar el contenido están aquí para quedarse.
Las plataformas convierten a los desarrolladores individuales en departamentos enteros de TI
Los últimos años han traído una avalancha de plataformas que aceleran el desarrollo del front end. Esto es enorme porque permite a los equipos pequeños moverse con rapidez.
Puedes implementar fácilmente el vídeo utilizando Twilio o Agora.io. Puedes añadir la autenticación en un abrir y cerrar de ojos utilizando Firebase, Amazon Cognito u Okta (Okta también adquirió Auth0).
Merece la pena hablar especialmente del despliegue del código del front end de forma automática y global. Hay tres soluciones de referencia: Vercel, Gatsby Cloud y Netlify. Pueden convertir a un desarrollador de front end con una cuenta de GitHub en todo el departamento de DevOps en 5 minutos.
En el momento de escribir este artículo, las tres plataformas ofrecen unos tiempos medios de carga relativamente similares (Fuentes: Netlify vs Vercel, Netlify vs Gatsby Cloud).
Gatsby Cloud es sólo React, pero hace que trabajar con innumerables páginas estáticas sea casi demasiado fácil. Si estás construyendo una aplicación Gatsby, probablemente sea tu mejor opción.
Vercel es compatible con los principales frameworks, incluidos los del lado del servidor, como el propio framework de los fundadores de la empresa, Next.js. Si estás trabajando en una aplicación renderizada del lado del servidor, Vercel te hará la vida mucho más fácil.
Netlify se centra en los frameworks del lado del cliente, como React y Vue puros. Ofrece una amplia gama de herramientas útiles, como formularios listos para usar, autenticación y funciones sin servidor. Creo que es la mejor opción para las aplicaciones tradicionales del lado del cliente.
Un candidato que vale la pena mencionar es Shuffle.dev. Puede crear un diseño de sitio web profesional al azar, en segundos. Tiene una selección relativamente grande de temas y marcos CSS y añade nuevas funciones y contenidos semanalmente.
La optimización del front end es la clave
El front end ha cerrado el círculo en los últimos años. Los sitios ligeros se han convertido en plataformas pesadas con largos tiempos de renderizado. Puede que algunos aún recuerden cuando Slack utilizaba la versión para desarrolladores de React (Fuente: Robert Pankowecki). La tendencia a hacer que las SPA sean más rápidas existe desde hace años, pero sigue ganando impulso.
Las bibliotecas que afectan negativamente al rendimiento, como Moment.js, se sustituyen por sus homólogas más ligeras y con mayor rendimiento, como Day.js. Otras se refactorizan para reducir el tamaño del paquete. Algunos ejemplos son Material UI y Lodash.
Sentry, el líder del mercado en el registro de errores, sólo empezó a trabajar en la optimización del tamaño de los paquetes hace unos meses. En todo el ecosistema del front end, cada vez se hace más hincapié en el uso de la carga perezosa, en la renderización del front end en el lado del servidor, o en el uso de archivos CSS en lugar de estilizar la aplicación con JavaScript, como ocurría, por ejemplo, con los styled-components.
Tailwind ha ganado mucha popularidad recientemente y, en 2022, seguramente seguirá siendo popular. Se encarga de reducir el tiempo de carga de la aplicación como casi ninguna otra herramienta CSS.
Dicho esto, tiene una empinada curva de aprendizaje. El código de Tailwind es a menudo difícil de leer.
Te recomiendo encarecidamente que pruebes también Linaria. Linaria combina las ventajas de los componentes con estilo y la velocidad de usar archivos CSS estáticos. En elFaroStudio la utilizamos desde hace tiempo y a todo el equipo de front end le encanta esta biblioteca: https://github.com/callstack/linaria.
Ejemplo de código en Linaria:
import { styled } from '@linaria/react';
import mainTheme from 'themes/mainThemeV2';
export const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 30px;
max-height: 60px;
border-bottom: 1px solid ${mainTheme.colors.neutral300};
background-color: ${mainTheme.colors.primary300};
border-radius: 8px;
`;
Fíjate en que puedes utilizar JavaScript en los estilos. También es posible reutilizar los estilos, ya que son constantes JS normales. El código se compila en un archivo CSS durante el proceso de construcción.
El resultado es una combinación de una gran experiencia para el desarrollador y un front end rapidísimo.
Conclusión
Cuando empecé, las cosas iban mucho más despacio. Se está innovando mucho y el front end está evolucionando rápidamente.
Espero que este artículo haya sido divertido de leer y que hayas encontrado algo valioso aquí. ¡Hasta la próxima vez!
