CocoStack

El primer newsletter sobre Jamstack, HeadlessCMS y Static Site Generators en castellano.

El e-commerce es el nuevo campo de batalla #8

Noté que algo estaba cambiando cuando conocidos youtubers que emiten desde España cambiaron de tercio.

Empezaron a hablar de Shopify y dejaron a un lado a Prestashop o WooCommerce.

Fue hace unos meses y se ha ido extendiendo.

Shopify es una plataforma muy poderosa, un player importante y con buenas alforjas.

Y, aunque no sea Jamstack, hace que las miradas se dirijan hacia el ecosistema porque si tiene una relación íntima con él.

Las responsabilidades de cada parte

El Headless e-commerce es otro término acuñado para generar nuevas herramientas con los mismos propósitos (vender más y online) pero con diferentes aproximaciones técnicas.

Al ser Headless quiere decir que por una parte estará el gestor de productos, pedidos y facturación.

Por otra estará el frontend con los estilos, los elementos gráficos y la experiencia de usuario.

Cada uno con su preocupación.

Una tienda online tiene que ofrecer una gran experiencia de usuario. Rápida, práctica, intuitiva.

El clic en el botón de pagar tiene que estar lo más cerca posible en la línea temporal. La conversión, maldita conversión.

Evidentemente en esto juega un papel determinante que el producto que se vende sea bueno y esté bien presentado (aunque pese más lo segundo que lo primero).

La separación de responsabilidades puede hacer, bien manejada, que la parte de gestión del e-commerce pierda peso en la relación con el usuario, donde lo que interesa es el diseño, el producto y un checkout ágil.

Necesitamos una clasificación

François Lanthier, CEO de Snipcart, ha creado una guía para poner las piezas en su sitio.

Nos habla de 5 capas en el e-commerce moderno:

  1. Diseño web
  2. Gestión del contenido
  3. Gestión del producto
  4. Carrito y checkout
  5. Gestión de la tienda

Traza a continuación un mapa hacia soluciones de varios tipos:

  • Monolito: Magento, Shopify, Prestashop
  • Add-on: WooCommerce, Gumroad, Snipcart
  • Storefront: Shogun, Vue Storefront
  • API: CommerceJS, Nacelle
  • Custom: hecho por tu cuenta

Luego coloca cada una de ellas las capas que representa y nos las ofrecen de forma visual en Headless & coupled e-commerce solutions.

Conclusión

Es muy difícil salir de un stack cuando lo manejas con soltura.

Todo son pegas. Ya sabes hacer las cosas. Estás en armonía y perdonas hasta los defectos porque sabes que línea tocar para funcionar.

Pero, siempre me pregunto, ¿y si te estás perdiendo algo?

¿Venderían más tus e-commerce si utilizaras herramientas más modernas?

Creo que sí, pero no es flor de un día.

Por eso es un campo de batalla y no un bonito jardín.

(Y si el Jamstack gana posiciones estaremos aquí para contarlo.)

El artículo completo: A Developer’s Guide to Headless E-Commerce (2020)

Imperdibles

Un e-commerce 600 veces más rápido con Jamstack

ButcherBox es un servicio de suscripción para recibir carne en casa.

Han migrado desde WordPress al Jamstack y nos lo cuentan con bastante detalle en este artículo.

Las cosas se pusieron difíciles, la web cada vez tardaba más en cargar, la conversión bajaba.

Usando el patrón Strangler Fig Application fueron transformando su stack monolítico a otro con una pléyade de servicios: GatsbyJS, Auth0, Netlify, Laravel Nova...

En el cuento acaban comiendo perdices: de 4 segundos a 600ms en tiempo de carga.

➡️ How ButcherBox Made E-Commerce 600% Faster with Jamstack

La web creativa contra el COVID-19

Un nuevo caso de estudio, en esta ocasión del United Nations COVID-19 response site for creative content.

Un lugar lleno de talento donde hacer un cambio en el código de Scala y Play framework parece ser era un completo dolor.

El equipo de Bejamas desarrolló una primera versión del producto en solo 6 días.

Como podéis imaginar bien de Jamstack para cada pata del sistema.

Muy significativo es el impacto en la base de datos elegida (FaunaDB): más de 80 millones de peticiones.

➡️ United Nations COVID-19 Response Creative Content Hub Case Study

Píldoras CocoStack

Nuevo diseño y contenidos para Jamstack.org

#jamstack #list

El portal oficial de Jamstack cambia de diseño y aglutina toda la información que antes albergaba staticgen.com y headlesscms.org sobre herramientas disponibles.

Scully, sitios estáticos con Angular

#javascript #ssg

También es posible trabajar con Angular para construir sitios estáticos. Scully tiene una actividad notable en el repositorio y puede ser una buena alternativa si conoces el framework.

Zoop, alojamiento gratuito

#cloud #free

Alojamiento gratuito en la nube para sitios estáticos (SSG) con sólo una línea en la consola.

Glorious Makefile: Building Your Static Website

#ssg #tutorial

Por supuesto que puedes generar sitios con make, ¿acaso lo dudabas? Mickaël Riga te cuenta en detalle cómo hace todo el proceso.

Nuxt Google Maps #code #nuxt Un starter para Nuxt para trabajar de forma inmediata con Google Maps.

¿Cuanto dinero pierdes por cada segundo que tarda en cargar tu aplicación web?

#article #jamstack #spanish

Rubén Sahagún cuenta en este artículo con cifras lo que puedes ahorrarte si utilizas Jamstack para el desarrollo de tu web.

FAQ DIV

#code #javascript

FAQ DIV es una solución rápida basda en un script de JavaScript cuando quieres generar un listado de preguntas frecuentes sin complicarte la vida.

La polémica entre Matt de WordPress y Matt de Jamstack ha continuado estas semanas. Espero encontrar algo enriquecedor para traértelo a CocoStack.

¡Nos leemos en el próximo número!

Dani

#CocoStack8 #CocoStack