Producto

VTEX IO: Desarrollo web simplificado

Eric Breno
Eric Breno May 28, 2021
VTEX IO: Desarrollo web simplificado

Veamos cómo IO facilita el desarrollo, al tiempo que garantiza la compatibilidad y la uniformidad en la documentación y simplifica las integraciones.

Gracias a la popularización y democratización del acceso a Internet, los sitios web, que hace 15 años solo se creaban con el objetivo de mostrar información en forma de texto y algunas ilustraciones, ahora cuentan con recursos cada vez más complejos.

Los programas que antes debían instalarse en una computadora personal, por ejemplo, los servicios de mensajería o los editores de fotos, fueron desplazados por los más diversos tipos de herramientas y funcionalidades en línea. Por este motivo, los sitios web empezaron a exigir infraestructuras cada vez más complejas y servidores más potentes.

Para acompañar este rápido proceso de reinvención y evolución de la web, surge el desafío cada vez mayor de ofrecer a los desarrolladores herramientas que les permitan crear soluciones cada vez más sofisticadas.

Con esto en mente, VTEX creó un recurso para impulsar este proceso y ejecutar de manera más práctica algunos de los pasos que antes los desarrolladores realizaban de forma manual y exhaustiva, en especial, en el caso de los sistemas con millones de líneas de código, a cargo de equipos de cientos de ingenieros, diseñadores y otros profesionales.

A continuación, veamos cómo funciona VTEX IO.

Una herramienta para integrar y simplificar el proceso

Cuando estamos desarrollando una página web, es común consultar información en alguna fuente externa, en general, un servidor propio, para que el usuario pueda visualizar, interactuar y modificarla. Como parte de su trabajo, el desarrollador ejecuta y accede al sitio web desde su computadora, mientras actualiza el código y confirma si el sitio en el navegador refleja tales cambios. Esto es lo que llamamos desarrollo local.

Al realizar este proceso, el desarrollador hace que su sitio web consuma información suministrada por algún servidor (externo o local) mientras modifica el código del propio sitio web. Una vez terminado el desarrollo, el código actualizado se envía a un repositorio en la nube, por ejemplo, Github. Luego, se genera una versión del código. Esa versión puede publicarse en un servidor o una red de distribución de contenidos (CDN), por ejemplo, AWS S3, para que los usuarios puedan acceder y visualizar el sitio web.

Existe una infinidad de herramientas para automatizar cada uno de estos pasos e, incluso, ejecutarlos en una especie de automatización conjunta o pipeline. El número cada vez mayor de herramientas genera algunos problemas, por ejemplo, mantener la compatibilidad, realizar actualizaciones, tener uniformidad entre los documentos, además de exigir más conocimiento específico para poder operar todo en conjunto.

Para simplificar la integración de procesos y facilitar el funcionamiento de este procedimiento, VTEX creó IO.

La propuesta de VTEX IO

Con IO, es posible desarrollar desde una computadora personal y ver los resultados en tiempo real. Al ejecutar un sitio web en un ambiente similar a aquel en el que funcionará la versión final, es posible alcanzar una mayor fidelidad en cuestiones como desempeño e integración con otros componentes del sitio web. Además, no se necesita una configuración inicial ya que IO cuenta con un conjunto de builders que se encargan del tema.

Con IO, basta con saber cuál es el link que se utiliza para que cualquier persona pueda acompañar el desarrollo del sitio web. Esto es muy útil, en especial cuando se trabaja en grandes equipos donde hay desarrolladores que revisan el código y prueban las nuevas funcionalidades que otra persona creó.

Cuando el código actualizado se envía a Github, el propio IO lo reconoce y genera tags (versiones) nuevas de su aplicación de forma automática, poniéndolas a disposición para que se apliquen en el ambiente del usuario final según sea necesario y para volver a versiones anteriores cuando se necesite realizar una reversión o rollback, por ejemplo.

Todo esto funciona de manera simplificada en una única herramienta.

IO también introduce el concepto de desarrollo basado en aplicaciones y, para eso, hace que el código se modularice en partes que forman un todo. La herramienta también orquesta las aplicaciones y establece la comunicación entre ellas. De este modo, es posible organizar los proyectos en partes que funcionan en conjunto, pero que varios equipos desarrollan y mantienen por separado.

VTEX IO en la práctica

Modificar una aplicación es más fácil y ágil con VTEX IO, ya que durante el desarrollo utilizarán lo que llamamos espacio de trabajo de una determinada cuenta. En este caso, utilizaré la cuenta ericshop, una tienda ficticia de ropa.

Después de instalar en sus computadoras el toolbelt de IO, deben iniciar sesión en la cuenta usando sus credenciales con el comando:

vtex login ericshop

Una vez que iniciamos sesión, creamos nuestro espacio de trabajo, que funcionará como funciona un branch con Git, usando el comando use:

vtex use myworkspace
vtex link

Una vez configurado el espacio de trabajo, basta con utilizar el comando link para ejecutar el código y conectarlo a la infraestructura de VTEX en tiempo real, siendo publicado.

No necesitamos preocuparnos por la seguridad, el despliegue o las API, pudiendo enfocarnos en el desarrollo, porque el espacio de trabajo utiliza los mismos permisos que la tienda vinculada o linkeada. En este escenario, pueden ver los cambios mientras programan directamente en: https://myworkspace–ericshop.com.br, que funciona con HMR (Hot Module Replacement, por sus siglas en inglés).

Una vez terminada la codificación, cuando suban un Pull Request a Github, el Bot de IO preguntará qué tipo de cambios están publicando, de la siguiente manera:

Al seleccionar el tipo adecuado y realizar el merge, automáticamente se crea una tag en el repositorio siguiendo el versionamiento semántico; la versión que se generó queda disponible para el despliegue en el ambiente que deseen. El mismo Bot le responde a su PR indicándole el comando que se utilizará, de la siguiente manera:

Aquí pueden consultar toda la documentación de IO: https://vtex.io/docs/
Versionamiento semántico: https://semver.org/lang/pt-BR/
Hot Module Replacement: https://webpack.js.org/concepts/hot-module-replacement/

Además de un desarrollo práctico, IO también permite unir diversos repositorios como parte de un mismo dominio/sitio web. Esto es interesante para cuando diversos equipos desarrollan varios módulos que componen un mismo producto, ya que permite que cada módulo se actualice y modifique de manera independiente, aunque forme parte de un mismo sitio web, desde el punto de vista del usuario final.

Por ejemplo, podemos tener los módulos Financiero y Catálogo en un sitio web administrativo para tiendas. En este escenario, es posible que cada módulo sea un proyecto que responda a distintas rutas para presentar sus contenidos. IO orquesta dicho funcionamiento siguiendo el mismo flujo de trabajo presentado. Este esquema de configuración se realiza a través de las interfaces de las aplicaciones para definir qué ruta corresponde a cada componente.

Aquí pueden consultar la documentación sobre las interfaces: https://vtex.io/docs/concepts/interfaces/

Con IO también se pueden crear BFF o Back-end For Front-end en las aplicaciones. Estos BFF son servicios Node que corresponden a una capa intermedia entre la aplicación de front y algún servidor, o incluso otros BBF, que usan el propio dominio de la tienda y los recursos definidos por IO Routes. El acceso a las rutas definidas en BFF se realiza a través del dominio de la cuenta en que se publican.

Por ejemplo, si quieren consultar una API de direcciones, pero no quieren exponer en el front los detalles de qué servicio están usando, las credenciales y demás, se puede crear un BFF que encapsule y oculte esa información. El front se comunica con el propio dominio a través de la ruta en la que esté configurado el BFF.

Aquí pueden ver la documentación relacionada con las rutas: https://vtex.io/docs/concepts/routes//

Flujo de trabajo más simple e integrado

Con las más diversas herramientas que pueden integrarse de varias formas, VTEX ofrece una solución que busca simplificar el flujo de trabajo, integrando sus distintos pasos del flujo de trabajo en un mismo toolbelt y simplificando la ejecución del código en ambientes más similares al real, incluso durante el desarrollo.

Con IO, las aplicaciones pueden dividirse semánticamente en partes menores, sin perjudicar la evolución de las aplicaciones y sin limitar la tecnología y frameworks que se utilizan en cada sección. Tampoco se aumenta la complejidad de la administración de la arquitectura de publicación y actualización de dichos proyectos.

También, el concepto de las aplicaciones hace que haya una buena modularidad al «conectar» y «desconectar» partes de las aplicaciones según las necesidades de evolución, migración e, incluso, de las estrategias de negocio.

¿Quieres ser parte del equipo? Accede a careers.vtex.com

Continúe leyendo: historias relacionadas
Customer Stories

VTEX IO potencia el SEO de Miniso posicionándolo en el número 1 del ranking de búsqueda

Miniso es un minorista japonés especializado en brindar productos de bajo costo y de alto impulso para el…

Nicole Huby
Nicole Huby
Producto

Start-up vs. unicornio: cómo es trabajar con producto en estas realidades diferentes

¿Dirigir una pequeña start-up o liderar un equipo en una empresa unicornio grande? Gustavo Vedotti, Product Manager de…

Gustavo Vedotti
Gustavo Vedotti
Producto

VTEX Community: una comunidad para impulsar la colaboración en el ecosistema de comercio digital

Inspirados por nuestro charter, en el que nos comprometimos a compartir conocimientos valiosos que abren camino al futuro,…

Cassiane Vilvert
Cassiane Vilvert
Producto

¡Hoi, salut, 안녕하세요! La plataforma VTEX está ahora disponible en neerlandés, francés y coreano

Dando otro paso fundamental hacia nuestro objetivo de escribir el futuro del comercio, anunciamos que nuestra plataforma ya…

Larissa Dias
Larissa Dias
Producto

Ocho acciones concretas para quien quiere migrar al área de producto

¿Estás pensando en hacer una transición de carrera y trabajar en el área de producto? Conoce el recorrido…

Alice Sabino
Alice Sabino
Producto

‘¡Kon’nichiwa, Japón!’ La plataforma VTEX ya está disponible en japonés

Después de la apertura de una oficina en Singapur para brindar mejor servicio a la región Asia-Pacífico, VTEX…

Cassiane Vilvert
Cassiane Vilvert
Estrategia

Las dos migraciones de doto y cómo con VTEX la tercera, fue la vencida

Tomar decisiones nunca es sencillo y más cuando de éstas depende tu negocio online. ¿Qué plataforma elijo? ¿será…

Scarlett Garza
Scarlett Garza
Producto

Dentro del roadmap de una empresa visionaria: qué es lo que aún puede esperar de VTEX en 2020

Recientemente, VTEX recibió la denominación de Visionaria en el Cuadrante Mágico de Gartner para el Comercio Digital de…

Cassiane Vilvert
Cassiane Vilvert
Historias de Clientes

La experiencia de búsqueda impulsada por IA de Grupo Éxito

Productos textiles, perecederos, electrónicos o muebles. Si usted puede nombrarlo, Grupo Éxito probablemente lo tiene. El continuo éxito…

Sorana Gheorghiade
Sorana Gheorghiade
Leer Más
Suscripción realizada con éxito.