Vue Storefront + Vendure = Comercio Electrónico de Código Abierto de Pila Completa

Rate this content
Bookmark

Crear una tienda en línea en estos días no es una tarea fácil. Con tantos competidores, el Tiempo de Lanzamiento al Mercado es la clave del éxito. Es por eso que decidimos construir una integración entre Vue Storefront, una plataforma de frontend ultrarrápida para el comercio sin cabeza, y Vendure, un marco de comercio electrónico moderno y sin cabeza basado en GraphQL. Ambas herramientas están construidas utilizando una pila de JavaScript moderna (Nuxt.js y Nest.js) y tienen varias integraciones listas para usar, como motores de búsqueda, CMS, pagos, y más. Además, ambos proyectos tienen una gran comunidad de colaboradores de código abierto que respaldan el proceso de desarrollo. En esta presentación, te mostraré lo rápido que puedes crear tu tienda con VSF y Vendure.

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

FAQ

Vue Storefront es una plataforma frontend ultrarrápida para el comercio sin cabeza, que permite conectar con diversas plataformas de comercio electrónico, CMS sin cabeza y otros servicios externos, utilizando tecnologías como Nuxt.js, TypeScript y GraphQL.

El comercio sin cabeza se refiere a la separación del frontend, es decir, la parte de la interfaz de usuario, del backend de una tienda de comercio electrónico. Esto permite mayor flexibilidad y adaptabilidad en la gestión y presentación de contenidos.

Venger es un framework para la parte backend del comercio electrónico. Se conecta con Vue Storefront y juntos permiten una gestión completa del comercio electrónico, desde la interfaz de usuario hasta la gestión de backend y base de datos.

Vue Storefront se construye utilizando Nuxt.js, TypeScript y GraphQL, aunque también es compatible con APIs REST. Estas tecnologías modernas facilitan la personalización y extensión de funcionalidades.

Vue Storefront permite la personalización mediante consultas personalizadas definidas en middleware.config.js, y la extensión de métodos de API y hooks del ciclo de vida de la aplicación utilizando extensiones.

Venture es un framework backend que utiliza NestJS, TypeScript y GraphQL. Ofrece funcionalidades como gestión de inventario, comercio, promociones, múltiples idiomas, monedas, y es escalable y listo para la nube.

Venture permite la personalización a través de campos personalizados para extender estructuras de datos predeterminadas y la modificación del flujo de pedidos, además de soportar la creación y gestión de procesos personalizados.

La combinación de Vue Storefront y Venture ofrece una solución completa de comercio electrónico de código abierto, desde la gestión de interfaz de usuario hasta operaciones de backend, optimizando la eficiencia y la capacidad de personalización.

Jakub Andrzejewski
Jakub Andrzejewski
19 min
20 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute el comercio electrónico de código abierto de pila completa utilizando ViewStorefront y Venge. ViewStorefront es una plataforma de frontend ultrarrápida para el comercio sin cabeza, mientras que Venge es un marco para el backend. Ambas herramientas son altamente personalizables y están construidas utilizando marcos modernos. Crear una tienda en línea con Venge es rápido y fácil. En general, esta charla presenta una pila de ensueño para el comercio electrónico de código abierto y fomenta las contribuciones a los proyectos.

1. Introducción

Short description:

Hola, VJs London. Hablemos de comercio electrónico de código abierto de pila completa, ¿de acuerdo? Mi nombre es Jakub y soy líder tecnológico en Vue Storefront. También soy miembro del equipo principal de storefront.UI, que es una biblioteca de interfaz de usuario para comercio electrónico.

Hola, VJs London. Hablemos de comercio electrónico de código abierto de pila completa, ¿de acuerdo? Mi nombre es Jakub y soy líder tecnológico en Vue Storefront. También soy miembro del equipo principal de storefront.UI, que es una biblioteca de interfaz de usuario para comercio electrónico. También soy el principal responsable de la integración de Vue Storefront y Venger. Aparte del trabajo, también soy un buceador técnico y actualmente estoy haciendo un curso de buceo en cuevas, y también soy un excursionista de montaña. En la segunda imagen, estoy en la cima del volcán Tabor de Tenerife, que en realidad fue nuestra ubicación de Vue Storefront en mayo de este año. Sí, estamos escondidos.

2. Overview of ViewStorefront and Headless Commerce

Short description:

En agosto de este año, me propuse una meta a largo plazo y ambiciosa. Me dije a mí mismo que el próximo año me gustaría unirme a Filip Rakowski, quien es el CTO de Vue Storefront, en una de las mejores conferencias de Vue.js y dar una charla. ¿Alguna vez te has preguntado cómo es construir una tienda de comercio electrónico desde cero? ¿Qué tal si te digo que existen soluciones en el mercado que puedes elegir y utilizar en minutos u horas en lugar de esperar a que los desarrolladores desarrollen la solución desde cero? Queremos presentarte lo que llamo una combinación de ensueño para el comercio electrónico de código abierto, que es ViewStorefront y Vengeo. ViewStorefront es una plataforma frontend ultrarrápida para el comercio sin cabeza. Pero en detalle, ¿qué es el comercio sin cabeza? El comercio sin cabeza básicamente significa que estás separando tu frontend, o la parte de interfaz de usuario de tu tienda de comercio electrónico, del backend. Esto permite que incluso las empresas maduras tengan la flexibilidad y maniobrabilidad de una startup. ¿Y qué hay de la pila tecnológica? Básicamente, ViewStoreFront se construye utilizando tres herramientas principales. Nuxt.js, que es un framework para Vue.js. También estamos utilizando TypeScript y GraphQL, pero ViewStoreFront también funciona con API REST. ViewStoreFront utiliza el concepto de composables, que se utilizan para mapear ciertas funcionalidades de tu comercio electrónico o mapear un dominio específico de tu comercio electrónico.

Ahora déjame contarte una breve historia. En agosto de este año, me propuse una meta a largo plazo y ambiciosa. Me dije a mí mismo que el próximo año me gustaría unirme a Filip Rakowski, quien es el CTO de Vue Storefront, en una de las mejores conferencias de Vue.js y dar una charla. Ahora mismo, en dos meses, estoy aquí dando una charla en lugar de esperar al próximo año. Todo es posible, chicos. Solo den este primer paso.

¿Alguna vez te has preguntado cómo es construir una tienda de comercio electrónico desde cero? Manejar todos estos pedidos, productos y categorías lleva tiempo. El tiempo es un recurso que es posible que no tengas como alguien que quiere ser líder en el mercado. ¿Qué tal si te digo que existen soluciones en el mercado que puedes elegir y utilizar en minutos u horas en lugar de esperar a que los desarrolladores desarrollen la solución desde cero? Lo cual básicamente lleva semanas o meses. ¿Qué tal si te digo que estas herramientas son gratuitas, de código abierto y respaldadas por una gran comunidad de colaboradores que hacen todo lo posible para que el proyecto sea lo mejor posible?

Queremos presentarte lo que llamo una combinación de ensueño para el comercio electrónico de código abierto, que es ViewStorefront y Vengeo. ViewStorefront es una plataforma frontend ultrarrápida para el comercio sin cabeza, pero ¿qué es exactamente el comercio sin cabeza? Si has jugado algunos videojuegos en los últimos años, probablemente conozcas a este personaje. Este es un personaje del juego Team Fortress 2 y se llama HeadlessHorselessHorseman. ¿Por qué traigo este ejemplo como una comparación con el comercio sin cabeza? HeadlessHorselessHorseman era un personaje muy poderoso, al igual que el comercio sin cabeza. Pero en más detalles, ¿qué es el comercio sin cabeza? El comercio sin cabeza básicamente significa que estás separando tu frontend, o la parte de interfaz de usuario de tu tienda de comercio electrónico, del backend. Esto permite que incluso las empresas maduras tengan la flexibilidad y maniobrabilidad de una startup. Básicamente significa que, por ejemplo, ViewStoreFront puede conectarse a muchas plataformas de comercio electrónico, CMS sin cabeza, pasarelas de pago, motores de búsqueda y muchos otros servicios de terceros. ¿Y qué hay de la pila tecnológica? Básicamente, ViewStoreFront se construye utilizando tres herramientas principales. Nuxt.js, que es un framework para Vue.js. También estamos utilizando TypeScript y GraphQL, pero ViewStoreFront también funciona con API REST. Algunos conceptos básicos de ViewStoreFront. ViewStoreFront utiliza el concepto de composables, que se utilizan para mapear ciertas funcionalidades de tu comercio electrónico o mapear un dominio específico de tu comercio electrónico. En este caso, veremos el dominio de productos. Cada composable contendrá cuatro elementos principales. El primero será una variable, en este caso, productos. Esta variable de productos contendrá un valor de tu dominio de productos. Luego, tendremos un método de búsqueda o el método de carga que se utilizará para obtener los datos de tu plataforma de comercio electrónico a Vue Storefront. Los composables pueden tener varios métodos, como por ejemplo, usar producto o usar dirección.

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

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.

Workshops on related topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
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