Modern JAMstack Ecommerce

➕ With Snipcart and Agility CMS

@jameskvidler

About Me

@jameskvidler

linkedin/in/jamesvidler

github/jamesvidler

Our Guests

florantara.dev/

linkedin.com/in/florantara

github.com/florantara

Flor Antara

Full Stack Software Engineer @ Zipwhip

Our Guests

twitter/coullet

github.com/couellet

dev.to/couellet

Charles Ouellet

Co-founder, Lead Dev @ Snipcart

• 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 using Agility CMS and Snipcart

👀 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: 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
     

Snipcart

Snipcart Benefits

• Tech agnostic; works with any web based tech stack

• Customizable checkout experience

• Can be easily integrated into any existing website

• Don't have to duplicate your products inventory

• Custom payment gateway allows you to write your own integration with any payment providers.

• Full feature set available from the get-go (on Standard pricing)

Let's See How This Works!

With Agility CMS, Snipcart, Next.js and Vercel

SAVNstack?

• New! Agility CMS + Snipcart Tutorial
   
• New! Example GitHub Repo

Learn More 🎓