Debido a la pandemia, miles de negocios se conectaron en línea para evitar el cierre y seguir siendo competitivos en el mercado. Esta transición fortaleció la competencia entre las empresas y las soluciones tecnológicas que incluyen lenguajes y marcos de programación.
Entonces, ejecutar un proyecto web se ha vuelto más difícil. Los CTO y los Product Owners pueden sentir FOMO (miedo a perderse algo), considerando la cantidad de tendencias tecnológicas existentes. El alto precio de cualquier error les hace sentir un escalofrío que les recorre la columna vertebral, sobre todo en el caso de proyectos de gran envergadura.
Este artículo ayuda a lidiar con estos problemas. Consideraremos las últimas tendencias e innovaciones de desarrollo web. Se dará preferencia a la pila de tecnología que le permita acortar los tiempos de desarrollo, aumentar el rendimiento y la seguridad.
1. Apostar por la Infraestructura Óptima
Elegir la infraestructura adecuada es crucial para un proyecto de desarrollo web. Para la evaluación y comparación de alternativas arquitectónicas, debemos considerar muchos factores, a saber: rendimiento, escalabilidad, capacidad, costos de mantenimiento, etc. La ambigüedad aquí podría crear confusión. Por ejemplo, una arquitectura de microservicio sin DevOps no siempre funciona más rápido. En cuanto a la velocidad de desarrollo, una plataforma en la nube es una de las mejores opciones, aunque implica gastos considerables.
Dos tipos principales de servicios de infraestructura: backend como servicio (BaaS) y plataforma como servicio (PaaS), están disponibles en la actualidad. La actitud de los desarrolladores hacia BaaS y PaaS y la elección entre ellos difiere.
BaaS , también conocido como Mobile Backend as a Service (MBaaS), proporciona a los desarrolladores un servicio que conecta la aplicación web o móvil al servicio en la nube con la ayuda de API (interfaces de programación de aplicaciones) o SDK (kits de desarrolladores de software). Al aplicar BaaS, una empresa puede reducir el tiempo de comercialización y los costos invertidos en la gestión de la infraestructura. Entre los BaaS destacan Parse, Firebase, AWS Amplify, Azure Mobile Apps, CloudKit.
FaaS (Funciones como servicio) es otro tipo de servicio de computación en la nube integrado en BaaS. Prevé una plataforma para el desarrollo, ejecución y gestión de la funcionalidad de la aplicación. Este modelo permite la creación de aplicaciones de microservicios. La ampliación o reducción en el caso de FaaS podría automatizarse. FaaS famosos son IBM Cloud Functions, AWS Lambda de Amazon, Google Cloud Functions, Microsoft Azure Functions, OpenFaaS.
PaaS (Plataforma como servicio) proporciona infraestructura para el desarrollo de aplicaciones, lo que permite a los clientes diseñar, probar y hospedar. Este servicio basado en plataforma funciona como software en una infraestructura pública, servicio de nube privada o pública. Incluye varias plantillas, herramientas, bibliotecas y códigos. A través de PaaS, el proceso de desarrollo se vuelve más rápido mientras se reducen los costos de implementación.
A continuación, puede ver un ejemplo de cómo se pueden administrar las funciones en varios tipos de infraestructura. Tenga en cuenta que las funciones se nombran de forma genérica.
2. JAMstack como alternativa a herramientas para arquitectura monolítica
El término JAMstack fue introducido por Mathias Billman, CEO de Netlify, e implica la combinación de tres elementos básicos: JavaScript, API y Markup. Podría verse como una metodología o incluso una filosofía de desarrollo web y de aplicaciones rápido, seguro y escalable. Al aplicar JAMstack, los desarrolladores no se molestan con la lógica del servidor back-end y se enfocan en la capa de presentación. La mayor parte de la funcionalidad se mantiene del lado del cliente, y otras características que requieren mucho trabajo se realizan a través de API de terceros. Por lo tanto, muchas aplicaciones SaaS y sitios web destacados ya se han creado con JAMstack.
Y esta tendencia ofrece sólidas perspectivas para el desarrollo web y de aplicaciones, combinando las mejores herramientas y tecnologías, como React, Webpack, React-router, GraphQL, en una sola solución.
Flujo de trabajo de JAMstack
- Escriba el código y envíelo a un repositorio fuente.
- Diseño de contenido preconstruido.
- Envíe archivos creados a CDN (red de entrega de contenido).
- Un usuario solicita una página (no es necesario interactuar con el servidor de origen porque el contenido preconstruido está disponible desde CDN).
En cuanto a las actualizaciones principales, se envían a través de Git. Esto permite reconstruir el sitio a través de herramientas actualizadas. Los generadores de sitios estáticos como Gatsby o Hugo son buenos ejemplos de tales herramientas porque forman parte integral del enfoque JAMstack.
Empresas de renombre mundial como Mozilla , Nike , Smashing Magazine están utilizando JAMstack. Una razón por la que están eligiendo esta solución es diferente. El factor principal es reducir la dependencia de un servidor mediante la resolución de tareas en el lado del cliente, acelerando la carga y mejorando el rendimiento.
Según la encuesta de Netlify , los casos típicos de uso empresarial de Jamstack incluyen software de consumo: 45 %, herramientas internas: 36 % y software empresarial: 35 % (el volumen total es superior al 100 % porque los encuestados podían seleccionar varias opciones).
JAMstack es ideal para proporcionar alta disponibilidad para sitios grandes que atienden a millones de usuarios al año. Pero no es adecuado para el desarrollo de aplicaciones web.
3. El uso extensivo de generadores de sitios estáticos
Los generadores de sitios estáticos (SSG) son aplicaciones de software para crear páginas HTML basadas en la plantilla o un componente y una fuente de contenido. SSG podría ser una alternativa suficiente al CMS (Sistema de gestión de contenido) basado en bases de datos.
La aplicación de SSG es una tendencia cada vez más popular para desarrollar una nueva clase o aplicaciones web. La causa radica en la diferencia entre una pila de aplicación web tradicional y SSG. Los generadores de sitios estáticos permiten obtener la vista de la página por adelantado y servir antes de tiempo, sin necesidad de esperar hasta que se solicite y genere la página. Se refiere a cualquier vista del sitio web en un momento de construcción. Debido al renderizado por adelantado, los sitios web desarrollados con SSG tienen un mayor nivel de seguridad contra el malware.
La tarea de administrar proyectos de contenido a gran escala se simplifica a través de la aplicación de marcos web, desde Gatsby, Gridsome y Next hasta Nuxt. Cabe destacar que Figma y Digital Ocean se basan en GatsbyJS, que se conoce como un marco rápido y fluido con un ecosistema avanzado.
4. Cambiar a CMS sin cabeza
Las empresas que optan por un CMS sin cabeza ganan al implementar soluciones escalables y flexibles. En el CMS sin encabezado, que se conoce como un sistema de administración de contenido de back-end, el "encabezado" de la capa de presentación y el "cuerpo" del repositorio de contenido están separados entre sí.
La interfaz prevista en headless CMS permite a los usuarios gestionar APIs y contenidos. Sin embargo, en esta solución el contenido no recibe atención en términos de cómo se muestra. La idea principal es almacenar y entregar contenido, lo que permite a los editores desarrollarlo juntos.
Hoy en día, los desarrolladores consideran que el CMS sin cabeza es la solución adecuada, por lo que podemos ver la creciente popularidad de Ghost, Strapi y Netlify CMS sin cabeza que se basan en Jamstack . Tinder, Buffer, DuoLingo, Mozilla y DuckDuck usan Ghost para sus blogs. IBM, Walmart, NASA y Societe Generale prefieren Strapi en producción.
Según el estudio de Research and Markets , el mercado de software CMS headless se estimó en US$ 328,5 millones en 2019 y se proyecta que llegue a US$ 1.628,6 millones en 2027; se espera que crezca a una CAGR del 22,6 % entre 2020 y 2027.
5. Uniendo Serverless y Microservicios
Las tendencias de desarrollo de back-end se han movido de monolito a microservicios durante los últimos años. Junto con Docker, Kubernetes y la arquitectura sin servidor, la arquitectura de microservicios es una forma de escalar proyectos de rápido crecimiento con un crecimiento exponencial de la base de usuarios.
Cualquier microservicio sin servidor se encuentra en la infraestructura de un proveedor sin servidor. El lanzamiento comienza si la aplicación lo necesita. Las empresas optan por FaaS cuando están interesadas en una alta velocidad de implementación e inversiones reducidas, o si las curvas de carga son un misterio. Al aplicar los microservicios sin servidor, salen del bloqueo del proveedor y pueden elegir Lambda Serverless , Google Cloud Functions o Microsoft Azure Functions según el proyecto.
6. Acceso a APIs personalizadas
GraphQL se utiliza para proporcionar descripciones de los datos en la API. Podría percibirse como una alternativa a la arquitectura basada en REST. A diferencia de REST, GraphQL es una herramienta adecuada para solicitar datos específicos.
Para representar una página, la mayoría de las aplicaciones necesitan obtener datos complejos. Y gracias a GraphQL, los frontend obtienen los datos necesarios en una consulta sin demoras indebidas. Como resultado, los usuarios reciben aplicaciones más rápidas. Cientos de organizaciones , desde GitHub hasta The New York Times, ya han aplicado GraphQL.
Tendencias de desarrollo web empresarial
El desarrollo de aplicaciones web para empresas tiene sus peculiaridades relacionadas con las necesidades comerciales a nivel empresarial. Con el enfoque de desarrollo adecuado, las aplicaciones para empresas ayudan a resolver los desafíos existentes, lograr el marketing y otros objetivos, incluido un mayor retorno de la inversión.
Como cualquier departamento de una gran empresa tiene sus propios desafíos, las soluciones de software deben estar conectadas con sus necesidades. A veces, las empresas optan por unas pocas aplicaciones empresariales que deberían comunicarse entre sí de forma coherente, obteniendo así ventajas operativas.
7. Ajuste de la hoja de ruta de desarrollo web
Considerar el desarrollo de aplicaciones web en términos de front-end muestra que crear un estilo consistente del producto es el desafío. Este es especialmente el caso de las grandes organizaciones donde numerosos equipos trabajan en los productos. Entonces, para crear un producto digital con un diseño atractivo, las empresas necesitan un equipo con una gran experiencia en sistemas de diseño.
Las guías de estilo en este caso permiten a las empresas encontrar y utilizar las bibliotecas y los documentos necesarios. La guía es un código que se mantiene bajo control de versiones. Por lo tanto, en comparación con cualquier documento simple, es más claro y fácil de mantener. En el desarrollo web, la aplicación de sistemas de diseño se ha convertido en un enfoque óptimo para la cooperación entre equipos y direcciones, lo que genera un mejor enfoque.
La aparición de nuevos desafíos de desarrollo está asociada con una serie de causas, desde microservicios populares, infraestructura como código y orquestación de contenedores hasta Kubernetes. Para enfrentar estos desafíos, las empresas involucran equipos de ingeniería de plataformas responsables del desarrollo web empresarial.
8. Facilitar Soluciones Complejas
La implementación de soluciones de IA en aplicaciones requiere una gran cantidad de recursos computacionales. Pero existe la posibilidad de utilizar las herramientas de ML que ofrecen los proveedores de la nube. Estas herramientas son beneficiosas pero costosas. Además de las tarifas estándar, los proveedores cobran tarifas por el impuesto a las operaciones. Y cualquier nueva herramienta en la arquitectura aumenta los costos totales. Parte de la necesidad de herramientas complejas puede evitarse y los equipos deben tenerlo en cuenta.
Es notable que para resolver los desafíos de ML no siempre se requiere una red neuronal o una GPU. Una combinación de modelos y herramientas simples junto con el código Python apropiado es suficiente para estas tareas.
Con respecto a la modernización de la aplicación heredada, se utiliza el enfoque de "afuera hacia adentro" para realizar la tarea y el código anterior se envuelve en el nuevo. Este enfoque sofistica la capacidad de administrar la funcionalidad. La alternativa para los sistemas heredados es el enfoque "de adentro hacia afuera" que implica incorporar el comienzo de las nuevas SPA (aplicaciones de una sola página) en el documento HTML que contiene el anterior.
Los marcos de SPA ni siquiera necesitan ser los mismos siempre que los usuarios puedan tolerar el impacto en el rendimiento del aumento del tamaño de la página. La inyección de SPA permite retirar el antiguo SPA hasta que el nuevo toma el relevo por completo.
9. Investigar nuevas oportunidades cuidadosamente
Las plataformas de código bajo o sin código ya están en el ojo público. Son adecuados para resolver desafíos específicos en áreas muy limitadas. Las plataformas de código bajo permiten a las empresas desarrollar aplicaciones y procesos con la ayuda de una interfaz visual y una lógica simple en lugar de una codificación intensiva.
Otro método beneficioso es importar mapas para micro frontends. Cuando se combinan varios micro frontends en una aplicación, el sistema selecciona cuál de ellos y cómo cargar. Los desarrolladores crean intensamente soluciones únicas o aplican un marco más grande como un solo spa. Importar mapas, un nuevo estándar que ayuda en ambos casos, ya está disponible. En ambos casos, un nuevo estándar podría resultar útil.
La importación de mapas para micro frontends da como resultado una separación precisa de las preocupaciones. El código JS señala la parte que se va a importar y la etiqueta de secuencia de comandos en el HTML muestra desde dónde cargar las interfaces. El servidor se utiliza para la generación de HTML, por lo que se pueden aplicar configuraciones dinámicas durante el renderizado. Hoy en día, Chrome mantiene los mapas de importación. De todos modos, el polyfill SystemJS hace posible un uso más amplio.
10. Explotación de herramientas empresariales
Sentry es la herramienta óptima para muchos equipos que requieren informes de errores de front-end. Los errores detectados en diferentes dispositivos de usuarios finales se clasifican y procesan a través de funciones integradas: patrones para rechazar errores y herramientas para agrupar. Gracias a la adición de Sentry en la tubería de CD, la depuración se vuelve más conveniente y eficiente porque es más fácil averiguar qué errores de software están relacionados. Sentry es Saas, pero garantiza el acceso público y es gratuito para casos de uso más pequeños.
MLflow es una plataforma de código abierto para administrar el ciclo de vida de Machine Learning. Esta herramienta consta de componentes separados, a saber: una colección de ejecuciones, una colección de métricas y proyectos, y un registro para almacenarlos y descubrirlos en un repositorio central.
MLflow admite estándares abiertos y podría combinarse con varias herramientas del ecosistema. MLflow está disponible en AWS y Azure y está mejorando rápidamente, siendo adecuado para proyectos modernos. Esta herramienta es universal para tareas de administración y seguimiento y es compatible con modelos basados en UI y API. La principal preocupación relacionada con MLflow es una unificación masiva en una sola plataforma, incluida la puntuación y el servicio del modelo.
Los servidores CI y las herramientas de desarrollo tienen una gran demanda. Convierten la gama de simples servicios alojados en la nube en complejos servidores de canalización definidos por código que admiten flotas de máquinas de construcción. Ya está disponible una extensa lista de opciones, por lo que la introducción de GitHub Actions se percibió de manera bastante crítica. De todos modos, las acciones de GitHub permiten a los desarrolladores manejar proyectos pequeños.
La herramienta integrada se encuentra en el repositorio del código fuente. La comunidad se ha unido en torno a esta característica, lo que provocó la aparición de herramientas aportadas por los usuarios. Estas herramientas se están implementando a través de GitHub Marketplace.
El código y el historial de Git están disponibles para exportar en el host alternativo, pero el flujo de trabajo de desarrollo en GitHub Actions no tiene la misma característica. Además, los desarrolladores deben determinar si un proyecto es lo suficientemente grande como para aplicar una herramienta de canalización independiente. Pero para proyectos pequeños, las acciones de GitHub merecen atención.
Futuro del desarrollo web
.NET 5 representa un importante paso adelante en la integración de .NET Core y .NET Framework en una única plataforma. Las organizaciones deben comenzar a desarrollar una estrategia para migrar sus entornos de desarrollo, una combinación fragmentada de marcos según el destino de la implementación, a una única versión de .NET 5 o 6 cuando esté disponible. La ventaja de este enfoque será una plataforma de desarrollo común, independientemente del entorno previsto: Windows, Linux, dispositivos móviles multiplataforma (a través de Xamarin) o el navegador (con Blazor). Si bien el desarrollo políglota seguirá siendo el enfoque preferido para las empresas con la cultura de la ingeniería para respaldarlo, a otras les resultará más eficiente estandarizar en una sola plataforma para el desarrollo de .NET.
Google ha otorgado otro premio reciente a los desarrolladores web en su versión Flutter 2.0 . Hasta ahora, Flutter ha admitido principalmente aplicaciones nativas de iOS y Android. Sin embargo, la visión del equipo de Flutter es apoyar la creación de aplicaciones en todas las plataformas. Flutter para Web es un paso en esa dirección porque es adecuado para crear aplicaciones para iOS, Android y el navegador desde la misma base de código, alcanzando los objetivos comerciales.
La creación de formularios para la web sigue siendo uno de los desafíos perennes del desarrollo front-end, en particular con React. React Hook Form puede sustituir a Formik usado anteriormente. React Hooks ya existía cuando se creó React Hook Form, por lo que podría usarlos como un concepto de primera clase: el marco está registrando y rastreando elementos de formulario como componentes no controlados a través de un gancho, lo que reduce significativamente la necesidad de volver a renderizar. También es bastante liviano en tamaño y en la cantidad de código repetitivo necesario. Por lo tanto, los desarrolladores tienen a su disposición una herramienta moderna para brindar una experiencia de usuario perfecta para cualquier proyecto web empresarial.
He esbozado las tendencias de desarrollo de aplicaciones web más importantes que el CTO debe tener en cuenta al definir la estrategia de desarrollo. Esta lista de tendencias podría complementarse con elementos que cubran otras tendencias, desde la búsqueda por voz impulsada por IoT hasta el diseño de movimiento y la creciente importancia de la ciberseguridad.
Originalmente publicado en: https://dzone.com/articles/top-web-development-trends-how-to-stay-ahead