JAMstack Ecommerce 101

➕ Headless CMS

@jameskvidler

About Me

@jameskvidler

linkedin/in/jamesvidler

github/jamesvidler

Our Guest

florantara.dev/

linkedin.com/in/florantara

github.com/florantara

Flor Antara

Full Stack Software Engineer @ Zipwhip

• How a 'traditional' ecommerce solution works
   
• The benefits of a 'modern' approach to e-commerce using headless APIs and JAMstack
   
• The roles of a CMS, ecommerce, and JAMstack in your solution
   
• Example solutions

👀 What We'll Cover

Our Vision

A world where you NEVER have to rebuild your website from scratch!

We Believe

EX

DX

UX

1. User Experience
    
2. Editor Experience
    
3. Developer Experience

Success Depends on:

But first, some questions...

What is JAMstack and why is this is a thing?

The JAMstack

• Javascript, APIs, and Markup (JAM)
   
• Lighting Fast sites - HTML is pre-compiled for each page before it is deployed to your web server
   
• More secure - runs on a static host which drastically reduces potential vulnerabilities
   
• Cheaper to run - no need to pay for beefy dedicated web servers
   
• Enables better UIs - takes advantage of modern development tools that enable developers to do more, faster!

Traditional/Monolithic Ecommerce Solutions

Traditional: Build it 100% Custom

• You build your site
   
• You build your e-commerce functionality custom
   
• You handle shopping cart and payments

Traditional: Build it 100% Custom

• Full control 👍
   
• Very expensive to build and maintain 💰
   
• You are responsible for the security 🔐
   
• You need developers 👩‍💻
   
• Lengthy time-to-deploy ⏳
   
• Lowest transaction fees 💳

Traditional: Custom Integration w/ 3rd Party

• You build your website
   
• Integrate with services such as:
  • Magento
  • PrestaShop
  • WordPress with WooCommerce

Traditional: Custom Integration w/ 3rd Party

• Less control, but still flexible  👍
   
• Quicker time to deploy ⌛
   
• Offload security to 3rd party 🔐
   
• Payments handled for you 💲
   
• Need developers 👩‍💻
   
• Integrations can be hard 🤔

Traditional: All-in-one Solution

• You use a 3rd party solution that includes
  • Website
  • Ecommerce Features
     
• Some Solutions
  • Shopify
  • BigCommerce
  • Square

Traditional: All-in-one Solution

• Fastest to deploy 🚀
   
• Offload security to 3rd party 🔐
   
• Payments handled for you 💲
   
• Don't need developers 🚫👩‍💻
   
• Least amount of flexibility 👎
   
• Highest transaction fees 💳
   
• Vendor lock-in 😖

The JAMstack Approach

• You build your JAMstack website
  • Next.js
  • Gatsby
  • 11ty
     
• You choose your Headless CMS
  • Agility CMS
     
• You choose your ecommerce provider
  • API-based solution
  • Add-on buttons/scripts

The JAMstack Approach

• Still get the benefits of JAMstack 😀
  • Fast, Secure, Cheap, Better UIs
     
• Flexibility to mesh best of breed solutions 🏆
   
• Separation of concerns between Content 📄, Code 👩‍💻, Ecommerce 🛒
   
• Unlimited freedom/flexibility 🌟
   
• More flexible pricing 💰

JAMstack, API-based Ecommerce

• Uses ecommerce APIs to interface with products, shopping cart, and checkout
  • Shopify API
  • BigCommerce API
  • Magento API
  • Saleor
  • Nacelle

JAMstack, Add-on Ecommerce

• Integrates with existing frontend
• Easy to get started
• Less complex
  • Shopify Lite Button
  • Snipcart
  • Paypal Buttons
  • Square Button
     

Hope We've Inspired you!

1. JAMstack keeps your site fast and secure
    
2. Don't re-invent the wheel for ecommerce
    
3. Quick and easy (add-on) ecommerce can get you from 0-60 fast!
    
4. Integrating with APIs provide ultimate flexibility 

• New! next.js 10 ecommerce starer: https://nextjs.com/commerce
   
• More examples https://headlesscommerce.netlify.app/

Learn More 🎓