Las últimas tendencias en el desarrollo de aplicaciones web para 2021: qué esperar de la industria

El año ya está llegando a su fin, y si bien es un poco pronto para contar los resultados de 2019, ciertamente es hora de mirar hacia adelante y considerar las tendencias futuras en el desarrollo web . Como empresa de desarrollo web, nos interesa estar al tanto de estas cosas. En este artículo, enumeramos tecnologías y enfoques de tendencia, nuevos y antiguos, que creemos que tendrán un atractivo significativo el próximo año. Siga leyendo para saber cuáles son.

Para mayor claridad y conveniencia, el artículo se divide en secciones: backend, frontend, diseño web y varios .

Tendencias backend

HTTP / 3

HTTP / 3 es la última versión del protocolo HTTP con el que todos estamos familiarizados. Es un salto significativo de HTTP / 2, principalmente porque HTTP / 3 se basa en el protocolo QUIC basado en UDP (pronunciado "rápido" y que significa Conexiones rápidas a Internet UDP), mientras que HTTP / 2 se basa en TCP (Protocolo de control de transmisión) . HTTP / 2 usa una sola conexión, lo que generalmente no es un problema a menos que estemos hablando de una red de baja calidad. En una red de baja calidad, HTTP / 2 puede ser extremadamente lento, ya que necesita más tiempo para reprocesar los paquetes descartados.

Una conexión UDP tradicional tiene un problema con la confiabilidad de la transferencia de datos debido a la falta de mecanismos adicionales de verificación de errores . Cuando se cae un paquete, el sistema no lo retransmite, ya que no tiene gastos generales para abrir / mantener / cerrar la conexión. QUIC resuelve este problema con la multiplexación o la transmisión simultánea de varias señales a través de un solo canal. Combina la confiabilidad de TCP con la velocidad de UDP.

QUIC es básicamente lo que sugiere su nombre: un protocolo más rápido . Es más simple, más liviano y más eficiente, todo mientras mantiene la confiabilidad. No es de extrañar que sea una de las tendencias futuras en el desarrollo web.

GraphQL

GraphQL es un lenguaje de consulta API y un estándar para desarrollar API. Es un hijo de Facebook, y ni siquiera es tan joven: se desarrolló en 2012 y se convirtió en código abierto en 2015. Pero GraphQL está siendo adoptado por más y más empresas en estos días, lo que nos ha obligado a agregarlo a nuestra lista. de las tendencias de desarrollo web para 2021.

Antes de GraphQL, teníamos REST, cuyo problema principal era que requería múltiples puntos finales y extraía demasiados datos de ellos, no todos necesarios para la tarea en cuestión. GraphQL es diferente. Con GraphQL, solo obtiene los datos que solicita específicamente a través de un único punto final. Esto hace que GraphQL sea más rápido y mucho más eficiente . Además, el código de la API es mucho más corto, ya que no es necesario escribir un punto final separado para cada solicitud.

Finalmente, vale la pena tener en cuenta que GraphQL es un lenguaje de código abierto, lo que significa que prácticamente cualquier persona puede actualizarlo. El código abierto permite una evolución constante. Veremos qué nuevas tendencias trae GraphQL en el futuro.

Bots e IA

Los chatbots están en todas partes estos días, ¿no es así? Están en tendencia tanto en la Web como en los dispositivos móviles. Y parece que no se detendrán pronto. Además, con la ayuda de los sistemas de procesamiento de lenguaje natural (NLP) impulsados ​​por IA , se están volviendo más inteligentes y eficientes.

Mientras que hace un par de años los chatbots solo ofrecían conversaciones estrictamente preprogramadas que resolvían una gama limitada de problemas, hoy en día, chatear con un bot casi se siente indistinguible de chatear con un especialista en soporte humano.

La IA ahora se ha abierto camino incluso en el diseño web. Herramientas como Sketch2Code pueden convertir automáticamente un boceto de un sitio web en un prototipo HTML. La IA mejora la experiencia del usuario, hace que la búsqueda y las recomendaciones sean más precisas y ofrece optimización de la búsqueda por voz.

Nest.js

Nest.js es un marco de Node.js que permite a los desarrolladores web crear aplicaciones escalables del lado del servidor. Nest.js se ha asegurado un lugar entre las tendencias de desarrollo web que todo CTO debe tener en cuenta durante el próximo año (y tal vez más) gracias a su combinación de flexibilidad y seguridad.

Construido con TypeScript, un superconjunto de JavaScript, y muy inspirado en Angular, Nest.js es más simple, más flexible y permite menos tiempo de inactividad que la mayoría de las otras opciones. Es totalmente compatible con los servidores Node.js Express y con la mayoría de las bibliotecas de JavaScript existentes. También hay soluciones de arquitectura listas para usar disponibles para Nest.js, y sus aplicaciones se pueden escribir no solo con TypeScript sino también con JavaScript si un desarrollador lo prefiere.

Tendencias frontend

WebAssembly (WASM)

JavaScript es genial, pero no está exento de fallas. Un problema particular que tiene JavaScript es el rendimiento. Es el mismo problema para todos los lenguajes de programación interpretados, y WebAssembly es la última forma de combatirlo.

Lo mejor de WebAssembly es que no es un lenguaje completamente nuevo. Puede escribir en el idioma que prefiera y luego compilarlo en un archivo WASM para ejecutarlo en los navegadores. Los lenguajes actualmente admitidos por WebAssembly son C / C ++, Elixir, Rust, Python, Go, C # /. Net y Java.

WebAssembly no se inventó en 2019; ya lleva algunos años en el mercado. Pero se está desarrollando rápidamente y ofrece cada vez más opciones. Ahora también es compatible con todos los navegadores principales de forma predeterminada, lo que hace que tenerlo bajo el cinturón de su programador sea una gran cosa.

Aplicaciones web progresivas (PWA)

Una aplicación web progresiva es básicamente una página web con una funcionalidad similar a la de una aplicación móvil nativa:

• Se puede "instalar" en los dispositivos en un momento: los usuarios simplemente anclan la página a la pantalla de inicio de su teléfono inteligente para tener acceso a ella en cualquier momento, incluso sin conexión.
• Responde: se ajusta automáticamente al tamaño y al modo de la pantalla del dispositivo.
• Es seguro: las PWA deben entregarse a través de HTTPS.
• Se ve y funciona como una aplicación nativa, pero ocupa mucho menos espacio.

Todavía existen limitaciones para las PWA, por supuesto, y no pueden eliminar por completo las aplicaciones nativas. (¿Sin embargo, es necesario?) En particular, al ser esencialmente páginas web, las PWA no pueden usar la mayoría de las funciones de hardware como NFC y Bluetooth. Sin embargo, no todas las aplicaciones requieren esta funcionalidad.

Los PWA son más rápidos, más fáciles y más baratos de desarrollar, por lo que están en tendencia en el desarrollo web este año y ciertamente seguirán siendo tendencia en 2021.

Accesibilidad (a11y)

Esta es una de las tendencias más importantes en el desarrollo de aplicaciones web. Creemos que la accesibilidad debe estar en la parte superior de la lista de todos los desarrolladores de sitios web, no solo para los sitios nuevos, sino también para las actualizaciones de los antiguos.

La accesibilidad, o todo, es un principio que dice que los sistemas informáticos deben ser convenientes para todo tipo de usuarios. Los sitios web deberían funcionar bien en todo tipo de dispositivos, sí. Pero también deberían funcionar bien para usuarios con todo tipo de deficiencias y discapacidades . A11y generalmente se refiere a la accesibilidad tanto del software como del hardware.

Cuando se trata de desarrollo web, la accesibilidad se puede lograr a través de:

• tamaños de fuente más grandes o personalizables
• páginas opcionales de alto contraste
• soporte para síntesis de voz / texto a voz
• subtítulos en video
• transcripciones para todos los archivos de audio
• reconocimiento de voz para navegación
• textos en lenguaje sencillo
• destacando partes importantes
• navegación coherente con la menor cantidad de pasos posible
• autorización simplificada (pero sin sacrificar la seguridad de los datos)
• navegación con un teclado en lugar de un mouse / panel táctil
• HTML semántico

El nombre a11y proviene del hecho de que hay 13 letras en "accesibilidad", por lo que hay 11 entre "a" e "y". Pero si miras de cerca, todo se parece a la palabra "aliado": un amigo, un asistente, un socio.

Tendencias de JavaScript

Por supuesto, hay pocas novedades en JavaScript en su conjunto, pero hay varios marcos frontend nuevos que pretenden conquistar el mundo. Hablemos un poco de ellos.

Gatsby.js

Gatsby es un SSG o un generador de sitios estáticos . Y si cree que los sitios estáticos son cosa del pasado, tenemos noticias para usted: se encuentran entre las últimas tendencias tecnológicas.

Una de las mayores ventajas de Gatsby.js es que no requiere servidores tradicionales; funciona con BYOC (Traiga su propio contenido) y puede crear un sitio web basado en datos de un CMS, CSV, API y archivos de rebajas. Gatsby también usa GraphQL, un lenguaje de consulta API de alta gama que hemos mencionado antes, para construir capas de datos.

Dominar Gatsby.js requiere que un desarrollador conozca React Native y / o GraphQL, pero no necesita un conocimiento profundo de inmediato: puede comenzar a aprender los tres al mismo tiempo.

Gatsby.js es un SSG perfecto para desarrollar sitios web de comercio electrónico . Este generador basado en React te ayuda a crear sitios que se cargan en un abrir y cerrar de ojos, literalmente, no estamos hablando de segundos aquí, estamos hablando de milisegundos. Cualquier propietario de un negocio de comercio electrónico sabe que a veces un retraso de una fracción de segundo en la carga de la página puede marcar la diferencia en si el cliente realiza la compra. Esto es cierto para otros tipos de sitios, aunque quizás en menor medida.

Marcos de SPA

Probablemente haya notado que en la mayoría de los sitios web existe la misma interfaz básica para todas o la mayoría de las páginas. Aún así, cuando va a una página diferente dentro del sitio web, la página completa se recarga, incluidos los elementos que son iguales. Eso es lo que sucede con las aplicaciones web de varias páginas.

Las SPA, o aplicaciones de una sola página, son aplicaciones web en las que la página no se recarga por completo cuando un usuario hace clic entre las secciones; solo extrae los datos necesarios en lugar de solicitar una actualización completa del HTML. Esto acorta el tiempo de carga. También requiere mucho menos ancho de banda.

Hoy en día, los SPA se pueden implementar con tres marcos principales: React, Vue y Angular. React tiene la mayor participación de mercado, mientras que Vue, siendo el nuevo chico de la cuadra, tiene la más pequeña. Sin embargo, Vue.js es probablemente el mejor diseñado para trabajar específicamente con SPA: es realmente pequeño pero escalable, flexible y ofrece opciones de integración de primer nivel. Prevemos que se convierta en un jugador influyente el próximo año.

Vue 3

A fines de junio de 2019 , Evan You y el equipo detrás de Vue.js publicaron un RFC (solicitud de comentarios) con respecto a la nueva iteración del marco, Vue 3, que se encontró con bastante negatividad dentro de la comunidad. Pero resultó que esta negatividad era fuerte pero no tan masiva. Además, como suele suceder, nació de una serie de malentendidos.

La razón por la que algunos desarrolladores web tenían sus bragas en un giro fue porque Vue.js de repente obtuvo una API de componente basada en funciones para reemplazar la familiar basada en objetos . Sin embargo, eso no fue exactamente correcto. La nueva API de componentes basada en funciones es una especie de adición y se puede utilizar junto con la API tradicional basada en objetos si lo desea.

La nueva sintaxis en la API de composición de Vue 3 tiene una mejor lógica y permite una mejor estructuración del código . Algunos desarrolladores incluso dicen que acorta un poco el código. En el momento de escribir este artículo, el marco de trabajo Vue 3 está disponible como un complemento para Vue 2 utilizando la biblioteca de composición de Vue.

Svelte.js

Presentado por Rich Harris en JSConf EU 2019, Svelte es al mismo tiempo similar y diferente a Vue. Es similar en que también es un marco de componentes. Sin embargo, a diferencia de Vue, Svelte es un compilador de componentes que se ejecuta durante el tiempo de compilación . Esto hace posible cargar solo los componentes necesarios para mostrar su aplicación. No usa un DOM virtual cuando trabaja con Svelte.

Svelte tiene una sintaxis simple que permite a los desarrolladores acceder a variables desde el marcado en lugar de usar envoltorios de estado que son diferentes para diferentes marcos. Esto hace que Svelte sea un marco casi perfecto para aquellos que son nuevos en el desarrollo web. Para los desarrolladores más experimentados, Svelte significa la posibilidad de escribir código más rápido y, como resultado, obtener sitios web de mayor rendimiento.

En el año transcurrido desde su presentación, Svelte ha pasado por importantes mejoras y actualizaciones , dando como resultado lo que muchos desarrolladores hoy llaman uno de los frameworks más simples y hermosos que existen.

Mecanografiado

TypeScript es un superconjunto de JavaScript y está ganando popularidad a pesar de (o quizás gracias a) el hecho de que no es totalmente nuevo. Ha estado entre las tendencias de programación web durante un par de años y, al ser de código abierto, se desarrolla y actualiza constantemente.

Las ventajas de TypeScript incluyen la escritura estática opcional. También hace que las nuevas funciones de JavaScript sean compatibles con versiones anteriores: ES6 y ES7 se pueden convertir a ES5 y versiones anteriores utilizando el compilador. Esto significa que el código escrito para los navegadores más nuevos seguirá funcionando con los antiguos.

TypeScript es más legible, más flexible en lo que respecta a la refactorización, más fácil de probar y tiene mucha documentación de primera para los desarrolladores. Muchos creen que es el futuro de JavaScript .

Marcos CSS

Los marcos hacen que todo sea más simple, y eso incluye el muy difamado CSS. Veamos cuáles son las tendencias en CSS este año.

CSS de Houdini

Houdini (como en Harry Houdini, el famoso ilusionista) es un marco único entre las últimas tendencias de desarrollo web. Básicamente, Houdini es una colección de API que brindan a los desarrolladores acceso al modelo de objetos CSS . Lo que esto significa es que si necesita estilos que aún no están disponibles en CSS, no es necesario sobrescribir el CSS con JavaScript. Con el marco CSS de Houdini, puede escribir código que los navegadores verán como CSS y analizarán como tal.

El resultado es que el análisis lleva mucho menos tiempo, los desarrolladores no necesitan esperar a que los proveedores de navegadores amplíen CSS y los diseños pueden volverse más personalizados y únicos.

Sin embargo, todavía hay un problema: Houdini aún no es compatible con todos los navegadores principales. Pero el proceso se ha iniciado y estamos esperando que la forma en que usamos CSS cambie por completo.

Bulma

Bulma es una de las tendencias más modernas de la industria. Está construido con la extensión Sass (Syntactically Awesome Style Sheets) y se basa en el módulo de diseño de caja flexible CSS, o Flexbox para abreviar. Flexbox es un módulo que se usa a menudo para crear sitios web receptivos.

Bulma es un marco CSS gratuito de código abierto que ofrece una variedad de temas creados por la comunidad con la menor cantidad de estilos posible . Es fácil de implementar y se puede personalizar gracias a la compilación Sass. Debido a la simplicidad del código CSS de Bulma, los sitios web creados con él suelen ser compatibles con todos los navegadores y plantean pocos o ningún problema. Actualmente, es uno de los marcos CSS más populares entre los desarrolladores, y parece que también ocupará el puesto el próximo año.

Viento de cola

El marco Tailwind CSS existe desde hace algún tiempo, pero su popularidad ha aumentado bastante en los últimos meses.

Lo peculiar de Tailwind es que no es un kit de interfaz de usuario, lo que lo distingue de otros marcos CSS. No tiene componentes de interfaz de usuario integrados . En cambio, Tailwind ofrece un conjunto de widgets para el desarrollo rápido de la interfaz de usuario con clases de utilidad Atomic CSS . Esto significa que podrá construir desde cero y exactamente de la manera que necesita, sin restricciones por temas y estilos que ofrecen otros frameworks CSS.

Sin embargo, tendrás que estar familiarizado con Atomic CSS, lo que hace que Tailwind sea un desafío en comparación con sus rivales. En el lado positivo, le dará el aspecto y la sensación más personalizados.

Diseño de interfaz de usuario de movimiento

Motion UI es la nueva tendencia más importante en diseño y desarrollo web. En pocas palabras, Motion UI significa exactamente lo que dice su nombre: agregar acción a las páginas de su sitio web. Y no solo incluye imágenes. Las microinteracciones son una parte tan importante de Motion UI como las animaciones. Los gestos receptivos pueden ayudar a sus visitantes a comprender el significado detrás de un elemento, por ejemplo, simplemente desplegando una explicación cuando el cursor está sobre él.

Agregar movimiento a la interfaz de su sitio web puede lograr una serie de objetivos:

• Ayude a los usuarios a navegar por el sitio con facilidad
• Atraiga la atención sobre las partes importantes de su sitio web
• Entretenga y distraiga a los usuarios mientras esperan una transición de una pantalla a otra
• Mejora tu identidad de marca

Motion ayuda a los propietarios de sitios web a contar una historia en muy pocas palabras. O sin palabras en absoluto. La clave es hacerlo bien, ni demasiado ni demasiado poco.

Otras tendencias tecnológicas de aplicaciones web

Nos gustaría señalar varias tendencias que no están exactamente relacionadas con el frontend, el backend o el diseño. Estas son cosas simples que importan cada vez más con cada año que pasa y a medida que se desarrolla la tecnología.

Seguridad y privacidad de los datos

Hoy, tenemos pausas cada vez más breves entre los nuevos escándalos de filtración de datos. Pero todavía hace falta una fuga para que alguien intente tapar un agujero. Es lo mismo en el mundo físico y en línea. Por esta razón, constantemente se desarrollan nuevos protocolos de seguridad de alta gama: certificados SSL , controles de seguridad , protección contra ataques DDoS , etc., etc.

En mayo de 2018, la Unión Europea emitió su Reglamento general de protección de datos , o GDPR. Según el GDPR, los sitios web deben informar a los visitantes qué información se recopilará sobre ellos (ya sea a través de cookies o proporcionando una dirección de correo electrónico y completando un perfil) y cómo se utilizará esa información. Como resultado, hemos visto un gran aumento en la inversión en ciberseguridad. La gente exige seguridad en línea ahora que administramos nuestras identidades y finanzas en Internet.

La seguridad de los datos ya no es una tendencia futura. Es la tendencia actual y solo se hará más grande con el tiempo. Entonces, si es propietario de un sitio web, debe mantener los ojos abiertos.

Velocidad de carga

Si ha leído este artículo en su totalidad, es posible que haya notado la cantidad de tecnologías, tanto de backend como de frontend, que se centran en una carga de páginas más rápida , una finalización de tareas más rápida y todo más rápido . Siempre tenemos prisa, y cuando una página se carga demasiado lenta, la abandonamos y buscamos una alternativa. Después de todo, hay muchos. La velocidad de carga fue, es y será tendencia en el desarrollo web en los próximos años, y los desarrolladores web deben tener en cuenta todas las nuevas tecnologías destinadas a acelerar los sitios web.

Esta es nuestra versión de las tecnologías web que esperamos promocionar durante el próximo año.

Escrito por Svitlana Varaksina y Artem Chervichnik