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.

8 min
10 Jun, 2021

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.

Available in English

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

React Summit Remote Edition 2021React Summit Remote Edition 2021
9 min
Scaling WordPress with Next.js
As modern as the web is, WordPress is still king. It’s not the most scalable, but is still compelling with its long history and UX. How can we leverage Next.js to bring WordPress to the modern web? We’ll walk through the tools that Next.js provides us to scale WordPress to the world. We’ll talk about what APIs we can use to easily wrangle WordPress content and how we can make the dynamic bits static.
Vue.js London Live 2021Vue.js London Live 2021
19 min
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
Building an online store these days is not an easy task. With so many competitors Time to Market is the key to success. That's why we decided to build an integration between Vue Storefront- Lightning-Fast Frontend Platform for Headless Commerce, and Vendure - modern, headless GraphQL-based e-commerce framework. Both tools are built using modern JavaScript stack (Nuxt.js and Nest.js) and have several out of the box integrations like search engines, CMS's, payments, and so on. Also, both projects have a huge community of Open Source contributors who support the development process. In this presentation, I will show you how fast you can create your store with VSF and Vendure.
GraphQL Galaxy 2021GraphQL Galaxy 2021
23 min
Exploring the WordPress Graph with Next.js & WPGraphQL
Headless Wordpress using its built-in REST API is a powerful solution to scale WordPress to the web, but complex relationships can easily turn into chains of requests, making maintainability difficult along with the potential cost of performance.
With WPGraphQL, we can harness the benefits of GraphQL, leading to a better developer experience and optimized request logic, making sure we’re only delivering what we need to our users.We’ll explore these advantages and how these pieces fit together with modern tools like Next.js to build great experiences for the web.

Slides & more
React Summit 2023React Summit 2023
25 min
Off with Their Heads: Rise of the Headless Components
Aren't You Tired of Repeating Yourself? Tired of repeating the same code over and over again in your React projects? In this talk, we'll discover the power of headless components, a design pattern that separates the logic from the presentation layer, allowing you to create reusable and flexible UI components.
We'll explore how headless components can simplify your development process, saving you both time and effort. We'll examine popular headless component libraries and provide tips for integrating them into your projects. Whether you're a beginner or an experienced developer, join us to discover how headless components can help you streamline your React development and create high-quality, customizable UIs.
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
API-first Development with Headless WordPress
When the burden of rendering is removed from WordPress, it becomes an open source API platform. With a few plugins like WPGraphQL, you can create an extensible backend for your React apps to consume which enables modern architectures and development practices in WordPress.

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
WorkshopFree
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components
React Advanced Conference 2023React Advanced Conference 2023
104 min
Building High-Performance Online Stores with Shopify Hydrogen and Remix
WorkshopFree
I. Introduction- Overview of Shopify Hydrogen and Remix- Importance of headless e-commerce and its impact on the industry
II. Setting up Shopify Hydrogen- Installing and setting up Hydrogen with Remix- Setting up the project structure and components
III. Creating Collections and Products- Creating collections and products using Hydrogen’s React components- Implementing a Shopping Cart- Building a shopping cart using Hydrogen’s built-in components
VI. Building the home page with Storyblok- Cloning the space and explaining how it works- Implementing Storyblok in the repo- Creating the Blok components- Creating the Shopify components- Implementing personalisation
React Advanced Conference 2021React Advanced Conference 2021
170 min
Build a Custom Storefront on Shopify with Hydrogen
Workshop
Hydrogen is an opinionated React framework and SDK for building fast, custom storefronts powered Shopify. Hydrogen embraces React Server Components and makes use of Vite and Tailwind CSS. In this workshop participants will get a first look at Hydrogen, learn how and when to use it, all while building a fully functional custom storefront with the Hydrogen team themselves.
React Advanced Conference 2022React Advanced Conference 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.