DEV Community

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

Which Frontend Framework Would You Use For an Ecommerce Storefront?

Shahed Nasser on May 23, 2022

Medusa provides 2 starter storefronts for your headless commerce platform, one using Next.js and one using Gatsby. These 2 frameworks not only prov...
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
Kanishka

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
Kanishka • 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

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

Marko.js was so to say made for best ecommerce performance so nobrainer.

Collapse
 
shahednasser profile image
Shahed Nasser

I’m honestly first hearing about it from the comments so that’s interesting to me

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

It is a Framework made by Ebay

Thread Thread
 
shahednasser profile image
Shahed Nasser

Ohh that's so cool I had no idea

Collapse
 
aguilera51284 profile image
Arturo Aguilera

Solid.js

Collapse
 
shahednasser profile image
Shahed Nasser

Interesting choice!

Collapse
 
alaindet profile image
Alain D'Ettorre

I'd like to see Angular

Collapse
 
shahednasser profile image
Shahed Nasser

Would love to see an ecommerce storefront built with Angular

Collapse
 
zainbinfurqan profile image
Zain Ahmed • Edited

I am currently using Next.js for one E-Commerce project and its pretty good in terms of "SEO", "Code quality", "problem solutions response on different website" & much more.

Collapse
 
shahednasser profile image
Shahed Nasser

Agreed it’s a good choice!

Collapse
 
paratron profile image
Christian Engel

Since ecommerce pages are mostly static and need really good SEO, I think I'd pick elderJS to build it.

Collapse
 
shahednasser profile image
Shahed Nasser

Another Svelte framework, I see a lot of love for Svelte!

Collapse
 
shahednasser profile image
Shahed Nasser

I agree with you. And unfortunately a lot of ecommerce platforms don't give you the freedom to choose what frontend framework to use to enhance the user experience. You'll probably end up stuck with something like PHP

Collapse
 
brense profile image
Rense Bakker

Payload, vite, react, vercel, stay headless 😉

Collapse
 
james_palermo_bc208e463e4 profile image
James Palermo

dotNET. Robust, well supported, expandable to massive scale, fully cross platform, and highly opinionated.

Collapse
 
merthod profile image
Merthod

NextJS has one of the strongest templates there is.

There's also another based on a real-time Node fw that adds those kinds of utilities.

NextJS FTW!

Collapse
 
satyamr123 profile image
Satyam Rajvanshi

Vue and Nuxt

Collapse
 
elenajo67265278 profile image
Elena Jones

very insightful!

Collapse
 
christiankozalla profile image
Christian Kozalla

Right. Traditional SSR without client-side hydration is the way to go in my opinion 👍

Collapse
 
jimmoo profile image
Jim Moore

Nuxt works great w SHOP or Commercetools. I wanna try Squarespace too tho

Collapse
 
moutafatin1 profile image
moutafatin1

What about remix ?

Collapse
 
shahednasser profile image
Shahed Nasser

Good choice!

Collapse
 
andrewbaisden profile image
Andrew Baisden

I would go with either React, Next or Medusa.

Collapse
 
shahednasser profile image
Shahed Nasser

Good choices!

Collapse
 
christiankozalla profile image
Christian Kozalla

I'd like to try Marko.js for an e-commerce project!

Collapse
 
shahednasser profile image
Shahed Nasser

That’s a new one!

Collapse
 
alphonso06 profile image
Al Javier

React or Svelte. Both are enjoyable to work with.

Collapse
 
shahednasser profile image
Shahed Nasser

Would you use any specific frameworks with each or as is?

Collapse
 
shahednasser profile image
Shahed Nasser

Interesting, why is that?

Collapse
 
snelson1 profile image
Sophia Nelson

Great post!

Collapse
 
booboboston profile image
Bobo Brussels

Very good stuff