En comparación con el desarrollo back-end, el desarrollo sitio web front-end no siempre ha recibido la atención que necesita.
JavaScript fue despreciado anteriormente por muchos tecnólogos. Sin embargo, los tiempos han cambiado. La introducción de tecnologías de código abierto ha acelerado el crecimiento de las aplicaciones web.
Como resultado de este progreso, prácticamente todas las empresas de software ahora usan JavaScript y herramientas más recientes como Eslint, Babel y Webpack en lugar de jQuery.
Hoy en día, la parte delantera se mueve a un ritmo vertiginoso que es difícil de seguir.
Este artículo trata sobre mantenerse al día con las tendencias de desarrollo en este campo en 2022. Quizás descubra algo útil en estas modas.
Svelte se está volviendo más popular.
Svelte es una tecnología muy nueva que, en principio, salió demasiado tarde para competir con React, Vue y Angular. Sin embargo, está aumentando su popularidad a un ritmo sin precedentes.
Fue nombrado el marco front-end más popular por los usuarios de StackOverflow en 2021.
Svelte, por otro lado, es más que eso. Es un compilador que crea una interfaz optimizada.
Svelte, a diferencia de otros marcos populares, no se importa a la aplicación. El código Svelte, por otro lado, se compila en JavaScript puro. Esto permite que Svelte supere a frameworks como React y Vue en términos de velocidad.
El marco Svelte es fácil de usar. Aquí hay un ejemplo de cómo se pueden usar los formularios de estado +:
Los formularios se manejan de una manera simple y hermosa, muy similar a como eran antes de la llegada de los marcos SPA. No es necesario adjuntar accesorios OnChange a las entradas.
El marcado y la lógica coexisten, encapsulando la lógica y proporcionando una capa visual.
No sorprende que el marco esté ganando popularidad en la comunidad. Solo será cuestión de tiempo hasta que Svelte vea la creación de nuevas plataformas populares.
React, Vue y Angular no van a ninguna parte.
Comencé mi viaje de front-end justo antes del lanzamiento de Angular 2 hace aproximadamente seis años. No puedo decirte cuántas veces he leído desde entonces que Vue, React o Angular están muertos.
Sin embargo, la realidad ha demostrado ser bastante diferente. Desde su introducción, cada uno de estos tres marcos ha cobrado prominencia.
Vale la pena señalar que la popularidad de Angular se ha multiplicado por 10. React y Vue crecieron aún más rápido. Los casos de uso compatibles con los tres marcos son casi idénticos.
Esto implica que cualquiera de los tres marcos que elija se utilizará y mantendrá durante muchos años.
Vale la pena señalar que no hubo modificaciones sustanciales en React en 2021. Sin embargo, la velocidad con la que se está adaptando es increíble. Lo más probable es que se deba a la ecología de la tecnología. La mayoría de las bibliotecas y los marcos que lo acompañan están disponibles para React.
Next y Gatsby son dos excelentes ejemplos. Este último es parte de los delincuentes de la siguiente tendencia.
Tanto las páginas estáticas como las dinámicas deben ser compatibles con marcos.
Definamos páginas estáticas y dinámicas en términos de práctica.
Cuando un usuario abre una página dinámica, obtiene y procesa el contenido. Durante el proceso de construcción, las páginas estáticas están predefinidas. Se crean como archivos independientes en el CD. Pueden parecer dinámicos, pero requieren menos esfuerzo por parte del navegador del usuario.
Puede tener una sola página de producto dinámica o cientos de páginas de producto estáticas, una para cada producto, si tiene una tienda.
Las páginas estáticas son más eficaces para los usuarios, pero su creación lleva mucho tiempo.
La popularidad de los marcos de aplicación de una sola página (SPA) como React y Vue llevó al abandono de las páginas estáticas. También les devolvieron el favor.
El material dinámico generado por los SPA suele ser significativamente más lento que el contenido HTML listo para mostrar. Cuando la página está descargando datos del servidor, la diferencia es más notable. Dichos datos normalmente tendrían que ser descargados y procesados por una página dinámica.
Como consecuencia de esto, nacieron las páginas estáticas en los SPA. Gatsby resolvió este problema al crear un marco e infraestructura React para páginas estáticas.
Un sitio web estático, como un blog, un portafolio o incluso una plataforma de cursos freeCodeCamp, será significativamente más rápido. Incluso la representación del lado del servidor, como es común con Next.js, no garantiza un rendimiento más rápido (Fuente: Sidney Alcantara).
En otros marcos, como Vue o Svelte, un enfoque en el tiempo para la primera pintura con contenido conduce a una amplia gama de métodos para crear páginas estáticas.
Las páginas estáticas, por otro lado, son difíciles de crecer a millones de páginas. Por lo general, debe utilizar páginas dinámicas si está creando una aplicación con mucho material modificable, como perfiles de usuario. Ambos enfoques de la gestión de contenidos llegaron para quedarse.
Las plataformas transforman a los programadores individuales en grandes organizaciones de TI.
Las plataformas que aceleran el desarrollo front-end han inundado el mercado en los últimos años. Esto es importante porque permite que los grupos pequeños se muevan rápidamente.
Usando Twilio o Agora.io, puede integrar videos rápidamente. Con Firebase, Amazon Cognito u Okta, puede integrar rápidamente la autenticación (Okta también adquirió Auth0).
Es particularmente importante discutir cómo implementar el código front-end de forma automática y global. Vercel, Gatsby Cloud y Netlify son las tres opciones más populares. En 5 minutos, pueden transformar a un solo ingeniero front-end con una cuenta de GitHub en el departamento completo de DevOps.
Gatsby Cloud es exclusivamente para React, pero hace que lidiar con una gran cantidad de páginas estáticas sea casi demasiado simple. Podría decirse que es su mejor opción si está creando una aplicación de Gatsby.
Vercel es compatible con todos los marcos principales, incluidos los marcos del lado del servidor como Next.js, que fue creado por los fundadores de la empresa. Vercel hará tu vida mucho más simple si estás trabajando en un programa renderizado del lado del servidor.
Netlify es un marco del lado del cliente que se enfoca en React y Vue puros. Tiene una serie de características útiles, que incluyen formularios preconstruidos, autenticación y servicios sin servidor. Para las aplicaciones típicas del lado del cliente, creo que es la mejor opción.
Shuffle.dev es un desvalido que vale la pena destacar. En segundos, puede generar un diseño de sitio web profesional al azar. Ofrece una amplia cantidad de temas y marcos CSS, y semanalmente se agregan nuevas características y material. Lo usamos mucho en CodeAlly.io para acelerar la creación de prototipos.
La optimización de la parte delantera es crucial.
En los últimos años, la parte delantera ha completado un círculo completo. Los sitios web livianos se convierten en plataformas robustas con tiempos de procesamiento prolongados. Algunos pueden recordar cuando Slack estaba usando la versión de desarrollo de React (Fuente: Robert Pankowecki). La tendencia de hacer que los SPA sean más rápidos ha existido durante años, pero continúa ganando terreno.
Las bibliotecas que tienen una influencia perjudicial en la velocidad, como Moment.js, se reemplazan con alternativas más ligeras y rápidas, como Day.js. Otros se refactorizan para minimizar el tamaño del paquete. Material UI y Lodash son dos ejemplos.
Sentry, el líder de la industria en el registro de errores, recientemente comenzó a enfocarse en la minimización del tamaño del paquete. Hay un enfoque cada vez mayor en el ecosistema de front-end en el empleo de carga diferida, renderizando el front-end en el servidor o usando archivos CSS en lugar de diseñar la aplicación usando JavaScript, como fue el caso con los componentes con estilo, por ejemplo.
Tailwind ha adquirido mucha tracción últimamente y, sin duda, seguirá haciéndolo en 2022. Hace un mejor trabajo que prácticamente cualquier otra herramienta CSS para reducir el tiempo de carga de la aplicación.
Sin embargo, tiene una severa curva de aprendizaje. El código de Tailwind es notoriamente difícil de descifrar.
Linaria es otra cosa que sugiero encarecidamente. Linaria reúne los beneficios de los componentes con estilo con el rendimiento de los archivos CSS estáticos.
Como consecuencia, obtiene una excelente experiencia de desarrollo, así como un front-end ultrarrápido.
Conclusión
Las cosas se movían considerablemente más lentamente cuando empecé. Hay mucha innovación en marcha, y la interfaz está cambiando a un ritmo rápido.
Los nuevos programadores con poca o ninguna experiencia también pueden usar los desafíos de codificación integrados de VSCode y Docker para demostrar sus habilidades.
