DEV Community

Cover image for Which Frontend Framework Would You Use For an Ecommerce Storefront?
Shahed Nasser for Medusa

Posted on • Updated on

Which Frontend Framework Would You Use For an Ecommerce Storefront?

Medusa provides 2 starter storefronts for your headless commerce platform, one using Next.js and one using Gatsby. These 2 frameworks not only provide a good developer experience, but they also allow you to create fast ecommerce storefronts. This provides users with a good experience when using an online store.

In addition, as Medusa is a headless commerce platform, developers can create a custom storefront with any frontend framework of their choice. They just need to interact with the REST APIs.

If you were to create an ecommerce storefront and had full freedom to choose which frontend framework to use for the storefront, which would you pick and why?

Top comments (56)

Collapse
 
hacker4world profile image
hacker4world

I would use Vue.js it's so fun to work with

Collapse
 
shahednasser profile image
Shahed Nasser

Would you use it with Nuxt.js or any other framework? Or as is?

Collapse
 
joshistoast profile image
Josh Corbett

Definitely recommend using Nuxt because of the SEO and SSR for better and performant storefronts

Collapse
 
hacker4world profile image
hacker4world

Of course i would use nuxt for better seo and performance

Collapse
 
gjorgivarelov profile image
gjorgivarelov

As an owner of an online store, I chose a vendor based on the steapness of their learning curve. The less buttons I had to toggle, the better it looked to me. It took few hours to set up the store on SquareSpace, it wasn't painless but it definitely takes shorter time than building one on my own from scratch. From scratch also means customized- yes, but you'll quickly learn that standardized look sells waaaaay better than the custom one.
I am the producer of the items sold on my store, the photographer, the market research, the social media contact, the customer service, the business owner and not to forget the day job I still have otherwise this web store of mine would not exist. I can't also be the webmaster, security expert and developer- I have to focus on the business itself...
So whenever you set out to build a web store for someone else, mind that number: the number of toggles to press. The less there are, the better it'll look to your customer.

Collapse
 
shahednasser profile image
Shahed Nasser

That’s a good perspective. I agree that it’s important to minimize the number of steps and buttons, to make the navigation from one place to another faster, and to provide an intuitive experience where people can easily find what they need.

Building a custom store doesn’t have to be from scratch though. There has been a lot of open source work that allows you to take something already existing and turn it into your own vision with a few tweaks. You’ll find that a hassle with most enterprise solution and might require a lot of workarounds.

Collapse
 
justkeithcarr profile image
Keith

Hi Shahed. Mind me which templates you tend to look at?

Thread Thread
 
shahednasser profile image
Shahed Nasser

Not sure what templates you mean

Thread Thread
 
justkeithcarr profile image
Keith • Edited

Oh I saw you spoke on templates and I thought you might of actually used a few.

Collapse
 
lukasw12v profile image
lukas
Collapse
 
shahednasser profile image
Shahed Nasser

A great option!

Collapse
 
jimmoo profile image
Jim Moore

Pricey, no?

Collapse
 
codewander profile image
codewander

I have no experience with ecommerce systems, so I wouldn't place much weight on my advice.

Between next.js and gatsy, I would choose next.js because it can support incremental server side generation of content, which means your rebuild times can be fast, while allowing your full catalog of product pages to be generated as they are accessed. Remix's server side rendering might be interesting as well.

Collapse
 
shahednasser profile image
Shahed Nasser

True, they all have their pros and cons

Collapse
 
codewander profile image
codewander • Edited

In an ideal world, python / ruby / golang server side rendering would smoothly interoperate with client side hydration in frameworks that already existed, instead of just having node + js for that option. Then I would pick python server side rendering combined with js client side hydration.

Update: golang has "bud" framework for ssr with js views. So, just waiting for ruby and python ssr frameworks.

Collapse
 
wesen profile image
Manuel Odendahl

Whatever frontend you already know, to be honest. If possible, something that has a cart and checkout component you can reuse. The rest is just standard pages.

Collapse
 
shahednasser profile image
Shahed Nasser

That's a good point! If you can reuse something it's definitely better than reinventing the wheel

Collapse
 
danilovmy profile image
Maxim Danilov

I wrote my own e-commerce backend on python and use vuejs/nuxtjs for the frontend.

I don't understand why I need anything more than nuxtjs.
There are enough components, a large community. And it's very fast.

Does medusa have any advantages?

Collapse
 
shahednasser profile image
Shahed Nasser

It's important to point out here that the comparison shouldn't be Medusa vs python and vue.js. Medusa is composed of 3 components: the headless server, the admin panel, and the storefront.

Medusa's headless server is built with Node.js in an abstract architecture to allow developers to easily customize existing features or integrate third-party services in a plug-and-play process. Instead of being dependent on a specific service, you install an existing plugin (or create your own), add the necessary configuration and code for it, and it will run as part of Medusa.

The headless server also provides you with the freedom to connect any frontend to it uniformly. This means that the implementation for the server is not catered to a specific frontend like a website which would put mobile apps at a disadvantage, instead, the headless server handles all logic independently of what frontend is accessing it.

So, you can choose to create the frontend with Vue.js or any similar framework. There are existing starters that you can set up but you can also use your own.

I think the biggest advantage, however, is the fact that it's an open source platform. It's very cool that you created your own, but you can alternatively utilize an existing open source platform like Medusa and customize the code as you see fit. No limitations or workarounds whatsoever.

This allows you to reuse an existing platform with many ecommerce features instead of reinventing the wheel, and focus on adding your own custom features.

Collapse
 
heyylateef profile image
Lateef Adetona

Shopify announced their Hydrogren framework, its a React based framework that uses GraphQL to query products in the components. I'd probably use this for my own ecommerce storefront

Collapse
 
ajshivali profile image
Shivali Pandey

I would use react or vuejs. I personally prefer vue, it is so easy and fun to use. Also passing props and data bindings are so much easier. Vue also provides you with hooks already so you would not need to create any custom hooks.

Collapse
 
shahednasser profile image
Shahed Nasser

That's cool, would you use any specific frameworks with each?

Collapse
 
danieldozie profile image
Daniel Dozie

I actually used Nextjs for a Shopify custom Storefront I'm working on.

semmslux.com

Speed, SEO et al.
The idea is to use something you're pretty familiar with, so you don't waste time trying to fit in circles and squares. Especially when you have a deadline.

Collapse
 
goldnead profile image
goldnead

I just wrote my own shopify storefront wrapper with alpinejs on an existing site that runs on statamic. Depending on the store complexity and what stack you want/have to work with that is a lightweight and pretty flexible option.
Thought about using it with a Medusajs backend in a future project. Seems promising :)

Collapse
 
shahednasser profile image
Shahed Nasser

Sounds interesting! Looking forward to see it with Medusa