El Futuro es Componible: Por dónde Empezar en la Construcción para Él

Rate this content
Bookmark
Slides

La arquitectura componible está cambiando la trayectoria de la web tal como la conocemos. En esta sesión, Henry Smith, Ingeniero Senior de Soluciones de Netlify, ofrecerá una inmersión profunda en cómo adoptar una arquitectura componible puede ayudar a crear aplicaciones web más ágiles, adaptables y escalables. Explicará por qué el futuro de la web es componible, compartirá ejemplos reales de equipos que construyen experiencias web dinámicas y abordará los desafíos comunes al adoptar la composabilidad y cómo enfrentarlos.

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

FAQ

La composabilidad en la web moderna se refiere a la utilización de una arquitectura donde se federan distintas capas y servicios para facilitar la escalabilidad y la flexibilidad. Esto permite construir sitios web utilizando los mejores servicios y herramientas disponibles, haciéndolos más rápidos, seguros y fáciles de optimizar para SEO.

Los sitios estáticos generados y alojados en una CDN mejoran la velocidad de carga, la optimización SEO mediante HTML preconstruido fácil de rastrear, y aumentan la seguridad al reducir la superficie de ataque. Además, este tipo de arquitectura escala eficientemente, manejando altos niveles de tráfico sin exigir mucha computación.

La composabilidad permite elegir y cambiar entre diferentes proveedores de servicios y herramientas, lo que facilita la adaptación a nuevas tecnologías y necesidades del mercado sin grandes sobrecostos o complicaciones, asegurando así la longevidad y relevancia de las aplicaciones web.

Henry Smith aconseja federar la capa de contenido para facilitar cambios sin afectar otras áreas, mantener la simplicidad iniciando con proyectos pequeños, y considerar la orquestación en el front-end mediante herramientas especializadas para manejar la infraestructura y la entrega de contenido.

Las funciones sin servidor son piezas de lógica en el backend que se escalan automáticamente en respuesta a las solicitudes del front-end. Esto facilita la gestión de la carga sin necesidad de servidores dedicados, permitiendo un desarrollo más ágil y eficiente en costos.

Las funciones en el borde permiten ejecutar lógica en la periferia de la CDN, mejorando la personalización y localización del contenido sin sacrificar la velocidad. Estas funciones son clave para transformar y personalizar el contenido de manera eficiente y segura.

Henry Smith
Henry Smith
9 min
06 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla analiza el futuro de la web y la composabilidad, enfatizando los beneficios de utilizar una arquitectura componible. Proporciona consejos para construir experiencias componibles, como federar la capa de contenido y comenzar con proyectos pequeños. También sugiere utilizar orquestación en el front-end y funciones en el borde para personalización, localización y autenticación.

1. Introducción a la Composabilidad

Short description:

Hola, soy Henry Smith, un ingeniero de soluciones senior en Netlify. Hoy hablaré sobre el futuro de la web y la composabilidad, y dónde comenzar a construir para ello. La composabilidad te permite elegir las mejores herramientas, protegerte para el futuro y beneficiarte de las ventajas de SEO y seguridad. Estas arquitecturas escalan de manera excelente, manejando altos niveles de tráfico. La composabilidad debería verse así.

Hola, soy Henry Smith y soy un ingeniero de soluciones senior en Netlify. Hoy quiero hablarles sobre el futuro de la web y la composabilidad, y dónde comenzar a construir para ello. Una de las ventajas de mi trabajo es que puedo hablar con cientos de clientes diferentes que han emprendido este viaje hacia la composabilidad. Lo que pensamos hacer hoy es recopilar algunos de sus pensamientos y tips y trucos que hemos aprendido en el camino para ayudarte en tu viaje hacia la composabilidad.

Cuando hablamos de composabilidad en la web moderna, también debemos pensar en dónde hemos estado. Ahora, las aplicaciones monolíticas aún constituyen la gran mayoría de las aplicaciones web en este momento. Por monolítico nos referimos a una serie de aplicaciones interdependientes desde nuestra capa de data hasta un servidor web que lo envía a una CDN y finalmente llega a las solicitudes en el navegador. Esto está bien y nos ha servido durante muchos años. Pero tan pronto como intentamos construir sobre esto o cambiar cosas en esta estructura monolítica puede ser un verdadero dolor de cabeza extraer y cambiar la funcionalidad e introducir cosas nuevas en ella. Porque efectivamente todo está interdependiente. Así que tenemos que verificar en cada capa que no esté rompiendo nada o haciendo cambios que rompan algo allí.

Entonces, kubectl, o arquitectura componible, o JAMstack, tiene muchos términos diferentes. Pero me gusta verlo en términos de esta especie de arquitectura de tiempo de construcción versus runtime. Entonces, lo que estamos viendo en el tiempo de construcción es tomar nuestra base de código de nuestro proveedor de Git y luego tomar todas esas fuentes de backend data. Entonces nuestro CMS, nuestro sistema PIM, nuestras bases de datos, etc. Y llevar todo eso a un generador de sitios estáticos. Esto nos permite construir nuestro sitio y construir todos esos activos y luego darnos una experiencia preconstruida que luego podemos distribuir globalmente en nuestra red Edge o nuestra CDN. Esto nos lleva ahora a la fase de runtime, por lo que los clientes pueden ir y buscar esa data en caché, esa versión en caché del sitio. Y para cualquier aspecto dinámico que queramos en nuestro sitio, podemos hacer solicitudes a servicios de terceros desde el cliente, o podemos iniciar funciones sin servidor y realizar varias tareas de lógica dentro de ellas.

Entonces, ¿por qué la gente se está inclinando hacia esta ruta más componible? Bueno, en primer lugar, te permite elegir las mejores herramientas para todos estos diferentes bloques de construcción, y esto puede ser realmente poderoso. Significa que puedes protegerte para el futuro al poder cambiar entre diferentes proveedores, pero también significa que no tienes que administrar tantos de estos servicios tú mismo, y muchas veces no hacer un trabajo tan bueno como alguien que se dedica a eso. Además, esta idea de empaquetar estáticamente tu sitio y enviarlo a una CDN tiene varios beneficios en términos de SEO, porque tenemos HTML preconstruido que es fácil de rastrear. También es mucho más rápido, y esto se nota en un sitio JAMstack o Componible. La velocidad es increíble. Además, el aspecto de security es que ahora ya no tenemos una única fuente de verdad a la que tenemos que acceder para todas nuestras solicitudes. Esto significa que nuestra superficie de ataque ha aumentado drásticamente, y por lo tanto nuestro sitio se vuelve más seguro por defecto. Y finalmente, este tipo de arquitecturas escalan de manera excelente. Debido a que tenemos réplicas de nuestra aplicación almacenadas en todo el mundo, significa que puede manejar altos niveles de tráfico y no tenemos que usar mucha computación y renderizar y extraer páginas. Esto simplemente se escala según sea necesario.

Ahora hay una especie de Instagram versus realidad cuando se trata de la Composabilidad, y esto es realmente

2. Tips for Building Composable Experiences

Short description:

Tenemos todos nuestros servicios y fuentes de datos dispares en un sitio de comercio electrónico componible. Pero construir productos componibles puede llevar a un monolito componible. Para evitar esto, federar tu capa de contenido y mantenerla simple. Comienza con un proyecto pequeño y construye gradualmente. Considera la orquestación en el front-end y aprovecha las funciones en el borde para personalización, localización y autenticación.

una buena visión de cómo debería ser la Composabilidad. Tenemos todos nuestros servicios dispares. Esto es para un sitio de comercio electrónico componible. Todos ellos son interdependientes y aislados en diferentes áreas, y luego nuestra fuente de datos se alimenta de eso, y finalmente nuestro front-end desacoplado lo sirve y se lo entrega a nuestros usuarios finales. Pero la realidad una vez que comienzas a construir este tipo de productos componibles puede ser un poco diferente. Comienzas a construir enlaces y dependencias entre los diferentes servicios y los productos de datos y todas esas cosas, y lo que terminas haciendo en realidad es construir un monolito componible. Todos estos diferentes bloques de construcción que ahora son interdependientes entre sí. Así que vamos a repasar algunos consejos y trucos rápidos sobre cómo evitar eso y construir experiencias componibles realmente increíbles. Entonces, el primero es federar tu capa de contenido y esto es realmente muy importante. Si te aseguras de tener una abstracción frente a toda tu capa de contenido y todo se alimenta y se conecta a ella, esto significa que cuando quieras sacar algo y reemplazarlo, lo cambias en una sola capa y todo lo que está arriba y debajo de eso no se ve afectado. Y esto puede ser realmente poderoso en términos de futurizar tu aplicación pero también en términos de asegurarte de que sea fácil para los desarrolladores cruzar datos entre diferentes fuentes sin tener que tener todos estos conectores diferentes en una capa inferior en la capa de datos. Mi siguiente consejo es mantenerlo simple. Trata de comenzar con un proyecto realmente pequeño. Aún puedes ejecutar tu sistema heredado junto a él y quitar algo simple, el carrito o el blog o algo así. Comienza a construir eso como una arquitectura componible y luego construye gradualmente con el tiempo. La naturaleza de estos proyectos es que se vuelven más complejos a medida que se agregan más piezas pero si eres realmente inteligente al construir cuidadosamente y tienes un patrón de migración realmente claro en términos de migrar literalmente una página a la vez a veces, entonces puedes evitar meterte en este lío y en los detalles y construirlo realmente correctamente desde los cimientos hacia arriba. Mi siguiente consejo es sobre la orquestación en el front-end. Ahora, este es el clásico debate de construir versus comprar. Sí, puedes construir un flujo de CI/CD realmente increíble con tus entornos de desarrollo y puesta en escena, ya sabes, orquestación de infraestructura y luego implementarlo en clústeres de Kubernetes y ejecutar entornos de producción con conmutación por error y luego ponerlo todo detrás de una CDN y tener este tipo de contenido localizado a través de ella también. Pero la realidad es, es realmente difícil armar todo eso, te llevará mucho, mucho tiempo y en realidad, probablemente no obtendrás todas las características y funcionalidades que obtendrías de la herramienta de orquestación en el front-end. Y de eso estamos hablando, hay algunas frameworks súper increíbles que te brindan modos de renderizado increíbles y todas esas cosas, y para que todo eso funcione armoniosamente con cosas como funciones sin servidor y funciones en el borde es un verdadero dolor de cabeza. Entonces, definitivamente este es uno en el que iría a ver el mercado, ver qué se ofrece y ver qué herramienta de orquestación en el front-end te conviene. Uno de mis favoritos personales son las funciones sin servidor y las funciones sin servidor son tus amigos. Porque nuestro front-end se escala hacia arriba y hacia abajo con las solicitudes de manera tan fácil debido a la CDN, necesitamos lógica en el back-end que pueda hacer lo mismo, o también necesitamos construir conectores para esos sistemas en el back-end, y las funciones sin servidor pueden ser muy útiles para esto. Esto se debe a que podemos escalar hacia arriba y hacia abajo ese cómputo y podemos iniciarlos solo para solicitudes individuales y asegurarnos de que nunca nos encontraremos con este problema en el que las solicitudes provenientes del front-end simplemente no se pueden manejar. Mi último consejo es aprovechar el borde. Ahora, las funciones en el borde son algo realmente, realmente genial. Son lógica distribuida en el propio borde de la CDN y esto te brinda la capacidad de hacer cosas geniales en términos de personalización, localización, autenticación, cosas que antes eran típicamente más del lado del servidor o del lado del cliente. Ahora puedes moverlo todo a una función en el borde y esto significa que obtienes todos los beneficios de cosas como una transformación del lado del servidor de tu página, pero no pierdes velocidad. Esto puede ser realmente poderoso, especialmente en términos de esa parte de localización donde quiero redirigir o reescribir páginas o manipular el HTML en sí en el borde. Entonces, definitivamente comenzaría a mirar esto desde el principio y ver si puedes incorporarlo en tu proyecto. Así que ahí tienes mis cinco mejores consejos. Espero que esta haya sido una charla relámpago útil y hayas aprendido algo de eso. No dudes en contactarme y espero que tengas un excelente resto de tu conferencia. Muchas gracias.