Headless vs Plataformas de Comercio Electrónico Tradicionales: Presentando Commerce Layer

Rate this content
Bookmark

En esta charla relámpago, Fabrizio repasará los aspectos más destacados de Commerce Layer, comparando el enfoque headless con las plataformas de comercio electrónico tradicionales "monolíticas". Hablaremos sobre seguridad, rendimiento y escalabilidad.

This talk has been presented at JSNation Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Commerce Layer es una plataforma de comercio Atlas y un sistema de gestión de pedidos que permite agregar capacidades de compra globales a cualquier tipo de experiencia de usuario, como sitios web, aplicaciones móviles o chatbots.

La principal característica de Commerce Layer es su API, que ofrece una amplia gama de puntos finales para gestionar diferentes aspectos de la experiencia de comercio, como precios, compras, carritos, inventario y pedidos.

Las plataformas monolíticas son menos flexibles y gestionan todas las características dentro de una sola aplicación, lo que dificulta cambios sin una replataforma completa. Commerce Layer, por su estructura modular, permite mayor flexibilidad y escalabilidad sin un único punto de fallo.

La modularidad permite intercambiar o escalar módulos específicos sin realizar una replataforma completa, ofrece mayor seguridad al evitar un único punto de fallo y facilita la integración omnicanal, lo que resulta en una plataforma más adaptable y futura.

Commerce Layer resuelve problemas de flexibilidad, velocidad, seguridad, adaptación móvil y costos que suelen presentarse en plataformas tradicionales monolíticas, gracias a su enfoque en arquitecturas modulares.

Commerce Layer se puede integrar con diversos servicios para crear una experiencia de comercio completa, incluyendo CMS sin fin, generadores de sitios estáticos, plataformas de implementación, servicios de cálculo de impuestos, pasarelas de pago y transportistas de envío.

Commerce Layer ofrece ventajas como la alta flexibilidad para cambios y escalabilidad de módulos, seguridad mejorada al no tener un único punto de fallo, y capacidad omnicanal, lo que la convierte en una solución competitiva y preparada para el futuro para el comercio en línea.

Fabrizio Picca
Fabrizio Picca
8 min
10 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Commerce Layer es una plataforma de comercio electrónico de Atlas que ofrece capacidades de compra globales. Ofrece una variedad de puntos finales para gestionar diversos aspectos del comercio electrónico. La arquitectura modular, como la utilizada por Commerce Layer, ofrece beneficios como flexibilidad, escalabilidad, seguridad, capacidades omnicanal y protección futura.

1. Introducción a Commerce Layer

Short description:

Commerce Layer es una plataforma de comercio Atlas que te permite agregar capacidades de compra globales a cualquier experiencia de usuario. Ofrece una amplia gama de puntos finales para gestionar precios, compras, carritos, inventario, pedidos y más. En comparación con las plataformas monolíticas tradicionales, Commerce Layer ofrece una mayor flexibilidad y evita los problemas de rendimiento asociados con los sitios web lentos.

Hola a todos. Mi nombre es Fabrizio y soy el gerente de asociaciones de Commerce Layer. ¿Qué es Commerce Layer? Commerce Layer es una plataforma de comercio Atlas y un sistema de gestión de pedidos. Y gracias a su naturaleza Atlas, la idea es que puedas agregar capacidades de compra globales a cualquier tipo de experiencia de usuario que tengas en mente. Así que puede ser un sitio web. Puede ser una aplicación móvil, un chatbot. Puede ser un video. En realidad, lo que sea. Y todo esto de una manera muy simple y efectiva. Como nuestro producto es una plataforma de comercio Atlas, por supuesto, el núcleo de Commerce Layer es su API. Por lo tanto, ofrecemos una amplia gama de puntos finales para gestionar todos los diferentes aspectos de la experiencia de comercio. Así que precios, compras, carritos, inventario, pedidos, y así sucesivamente. Desafortunadamente, no puedo revisar toda la lista de puntos finales, pero puedes encontrarlos en nuestra documentación. Y creo que es importante destacar el hecho de que Commerce Layer es una plataforma Atlas. Y esto es muy cierto si lo comparas con la solución monolítica tradicional. Supongo que ya has escuchado este término, plataforma monolítica. Pero, ¿qué significa? En realidad, significa tener una sola plataforma que gestiona todas las características de tu aplicación de comercio electrónico. Así que piensa en la plataforma que realmente gestiona todo. Que gestiona el CMS, la gestión de la información del producto, tal vez el sistema de gestión de pedidos, todo en una sola caja. Esto, desafortunadamente, conlleva algunos desafíos y tratamos de resumirlos en cinco puntos principales. El primero es que dichas plataformas son menos flexibles. ¿Por qué? Tienes que pensar que tienes una sola caja donde todo está implementado. Esto significa que no puedes cambiar ningún módulo de tu aplicación de comercio sin reemplazar todo. Así que este es un gran problema. Entonces, si surgen nuevas necesidades en tu negocio que puedan requerir, no sé, tal vez un nuevo modelo o una nueva aplicación, tu plataforma no lo permitirá sin una re-plataforma completa. Así que puedes imaginar que esto es un gran problema.

El otro problema relacionado con esta aplicación tradicional es que la mayoría de las veces el resultado es que los sitios web construidos sobre ellas son simplemente lentos. ¿Por qué? Eso es porque dada la arquitectura de esas aplicaciones es muy difícil aprovechar el poder de nuevos conceptos como CDNs dedicados, por ejemplo. Y como puedes imaginar, un sitio web lento puede ser un gran problema, especialmente si consideras el nuevo algoritmo de Google para clasificar los core web vitals, solo para poner un ejemplo. Así que ser rápido es definitivamente una ventaja competitiva cuando vendes en línea.

2. Arquitectura Modular y Beneficios

Short description:

Existen problemas de seguridad al tener una sola aplicación como único punto de fallo. Las aplicaciones tradicionales pueden carecer de un enfoque móvil primero y pueden ser costosas. La solución es trabajar en arquitecturas modulares, como la basada en Commerce Layer. Este enfoque ofrece flexibilidad, escalabilidad, seguridad, capacidades omnicanal y protección futura. Para cualquier pregunta, contáctenos en commercelayer.io.

También existen problemas de seguridad si tienes una sola aplicación y todo está dentro de esa caja, tienes un único punto de fallo, por lo que si esa aplicación falla, todo falla. Esto es un gran problema. Otro problema es que considerando que estas aplicaciones tradicionales digamos que han sido diseñadas hace bastante tiempo. La mayoría de las veces se construyeron para escritorio, por lo que no tienen un enfoque realmente móvil primero, por ejemplo. Y el último problema es que son costosas. Hay muchas cosas en estas cajas. A veces no necesitas algunas de las cosas que están en estas cajas, pero de todos modos las pagarás todas. Entonces, ¿cuál es la solución? Bueno, la solución es trabajar en arquitecturas modulares y esto significa dividir el monolito. Por ejemplo, esto puede ser un ejemplo de una arquitectura modular basada en Commerce Layer. Commerce Layer sería el motor transaccional que gestiona los precios, la información del stock, las API de pago y las API de cuentas de clientes. Y alrededor de Commerce Layer, comenzarás a integrar todos los diferentes servicios que se necesitan para ofrecer la experiencia de comercio. Por ejemplo, un CMS sin fin, un generador de sitios estáticos, esto es muy cierto si vas en la dirección de gem stock, una plataforma de implementación para optimizar y maximizar el rendimiento y luego vincular Commerce Layer a servicios específicos para las necesidades que puedas tener. Por ejemplo, servicios de cálculo de impuestos, pasarelas de pago, transportistas de envío y también los sistemas heredados como el CRM y ERP.

¿Y cuáles son los beneficios de este enfoque? Bueno, como puedes imaginar, ahora todo es extremadamente flexible. Puedes intercambiar módulos fácilmente sin tener que hacer una replataforma completa. La escalabilidad es mucho más fácil porque ahora puedes escalar solo un módulo específico y evitar actualizaciones muy costosas de tu plataforma central. Entonces, puedes escalar selectivamente los módulos de tu arquitectura. Es más seguro porque ahora no tienes un único punto de fallo. Y es omnicanal por diseño porque todos estos módulos tienen una interfaz de API. Entonces, puedes conectar prácticamente todo, cualquier punto de contacto que puedas imaginar, a este tipo de arquitectura. Y por último, pero no menos importante, es a prueba de futuro. Ser a prueba de futuro se basa en el hecho de que puedes cambiar cualquier módulo según tus necesidades sin tener que hacer una replataforma completa. Muchas gracias por su atención y en caso de que tenga alguna pregunta, puede escribirme a mi correo electrónico o simplemente reservar una demostración de nuestra plataforma en commercelayer.io. Muchas gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Escalando WordPress con Next.js
React Summit Remote Edition 2021React Summit Remote Edition 2021
9 min
Escalando WordPress con Next.js
WordPress is still widely used, with over 800 million installs. The Jamstack is a modern approach to building static HTML websites that utilize JavaScript and APIs for dynamic content. Serving static HTML files is faster than server-based solutions like WordPress. Serving static files from storage or a CDN allows for infinite scalability. WordPress is a compelling option for nontechnical users due to its familiarity and thriving ecosystem.
Vue Storefront + Vendure = Comercio Electrónico de Código Abierto de Pila Completa
Vue.js London Live 2021Vue.js London Live 2021
19 min
Vue Storefront + Vendure = Comercio Electrónico de Código Abierto de Pila Completa
This Talk discusses the full stack open-source e-commerce using ViewStorefront and Venge. ViewStorefront is a lightning-fast frontend platform for headless commerce, while Venge is a framework for the back-end. Both tools are highly customizable and built using modern frameworks. Creating an online store with Venge is quick and easy. Overall, this Talk presents a dream stack for open-source e-commerce and encourages contributions to the projects.
Fuera con sus cabezas: El auge de los componentes sin cabeza
React Summit 2023React Summit 2023
25 min
Fuera con sus cabezas: El auge de los componentes sin cabeza
Headless Components are efficient for app development, but there's a lot of work involved, especially for menus. The customizability wall is a problem with component libraries, but it can be solved through reverse engineering and design. Headless Components offer no markup or basic markup to be overwritten, providing flexibility in code and design quality. Radix and React ARIA are recommended stylus component libraries with different APIs. Kodaks' experience with headless components highlights the ability to mix and match easily and the potential for market gaps in the headless space. Radix is a popular choice for headless components due to its well-documented and user-friendly API. Headless components aid in testing, distribution of design systems, and accessibility. MUI is a self-consistent and rich library, while Radix focuses on accessibility and default accessibility. Kodaks integrates well with headless libraries and welcomes feedback through Discord.
Explorando el Gráfico de WordPress con Next.js y WPGraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
23 min
Explorando el Gráfico de WordPress con Next.js y WPGraphQL
WordPress is widely used, and it now supports a REST API for headless usage. Serving static HTML files allows for infinite scaling and surviving viral traffic. GraphQL can be used to interface with WordPress data, reducing complexity. WordPress can be coupled with plugins like Yoast and ACF, and WPGraphQL works seamlessly with these plugins. GraphQL allows for selecting only necessary data and has performance advantages over REST APIs.
Desarrollo API-first con WordPress sin cabeza
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Desarrollo API-first con WordPress sin cabeza
This Talk discusses API-first development with headless WordPress, highlighting its benefits and the availability of resources. It explores the use of plugins and frameworks like WPGraphQL and the headless framework from WP Engine to create custom post types and make GraphQL calls. The Talk also covers building websites, querying and caching data, deploying apps with the Atlas platform, and improving user experience. It touches on authentication, efficiency, backend resources, and WooCommerce integration in headless WordPress, as well as WordPress accessibility and SEO optimization.

Workshops on related topic

Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico
React Summit 2023React Summit 2023
139 min
Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico
Top Content
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: por qué lo construimos, qué es y cómo funciona- Crea una cuenta gratuita- Crea un nuevo proyecto con Next.js y Tailwind- Explora la estructura del directorio- Anatomía de un Brick- Crea un nuevo Brick (Texto-Imagen)- Añade un título y descripción con edición visual RichText- Añade una imagen con edición visual- Añade controles de barra lateral para editar props (relleno y lado de la imagen)- Anidación de Bricks utilizando el componente Repeater- Crea un brick de galería de imágenes- Publica en Netlify o Vercel- Tipos de página y campos personalizados- Acceso a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias y incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de aterrizaje creadas visualmente en React Bricks- Características empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados
Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix
React Advanced 2023React Advanced 2023
104 min
Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix
WorkshopFree
Alexandra Spalato
Alexandra Spalato
I. Introducción- Visión general de Shopify Hydrogen y Remix- Importancia del comercio electrónico sin cabeza y su impacto en la industria
II. Configurando Shopify Hydrogen- Instalando y configurando Hydrogen con Remix- Configurando la estructura del proyecto y los componentes
III. Creando Colecciones y Productos- Creando colecciones y productos utilizando los componentes React de Hydrogen- Implementando un Carrito de Compras- Construyendo un carrito de compras utilizando los componentes incorporados de Hydrogen
VI. Construyendo la página de inicio con Storyblok- Clonando el espacio y explicando cómo funciona- Implementando Storyblok en el repositorio- Creando los componentes Blok- Creando los componentes Shopify- Implementando personalización
Construye una Tienda Personalizada en Shopify con Hydrogen
React Advanced 2021React Advanced 2021
170 min
Construye una Tienda Personalizada en Shopify con Hydrogen
Workshop
Matt Seccafien
Cathryn Griffiths
2 authors
Hydrogen es un marco de trabajo y SDK React con opiniones para construir tiendas personalizadas rápidas, alimentadas por Shopify. Hydrogen adopta los Componentes del Servidor React y utiliza Vite y Tailwind CSS. En este masterclass, los participantes tendrán una primera vista de Hydrogen, aprenderán cómo y cuándo usarlo, todo mientras construyen una tienda personalizada completamente funcional con el equipo de Hydrogen.
Creación de tiendas personalizadas en Shopify con Hydrogen
React Summit 2022React Summit 2022
71 min
Creación de tiendas personalizadas en Shopify con Hydrogen
WorkshopFree
Abe Haskins
Megan Majewski
2 authors
Sumérgete en Hydrogen, un marco basado en React impulsado por Shopify. En este masterclass, exploraremos el marco y pondremos en marcha una tienda personalizada rápidamente. Aprenderás cómo (y cuándo) aprovechar los Componentes del Servidor de React y los mecanismos de almacenamiento en caché para construir tiendas personalizadas rápidas y dinámicas.
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
React Advanced 2022React Advanced 2022
81 min
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
WorkshopFree
David Witt
David Witt
Sumérgete en Hydrogen, un marco de trabajo basado en React para construir tiendas en línea sin cabeza. Hydrogen está diseñado para el comercio de Shopify con todas las características que necesitas para una tienda en línea lista para producción. Proporciona un inicio rápido y un entorno de desarrollo rápido para que puedas centrarte en lo divertido: construir experiencias de comercio únicas. En este masterclass, crearemos una nueva tienda en línea y construiremos rápidamente una página de producto. Cubriremos cómo empezar, enrutamiento basado en archivos, obtener datos de la API de Storefront, los componentes integrados de Hydrogen y cómo aplicar estilos con Tailwind.Aprenderás:- Empezar con la plantilla hello-world en StackBlitz- Enrutamiento basado en archivos para crear una ruta /productos/ejemplo- Enrutamiento dinámico /productos/:handle- Consultar la API de Storefront con GraphQL- Mover la consulta dentro de la aplicación de Hydrogen- Actualizar la consulta para obtener un producto por su identificador- Mostrar título, precio, imagen y descripción.- Estilizado con Tailwind- Selector de variantes y botón de compra ahora- Bonus si hay tiempo: página de colecciones
Requisitos previos: - Un navegador basado en Chromium (StackBlitz)- Idealmente experiencia con React. Un conocimiento general de desarrollo web también es válido.