Which Frontend Framework Would You Use For an Ecommerce Storefront?
source link: https://dev.to/medusajs/which-frontend-framework-would-you-use-for-an-ecommerce-storefront-3apg
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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?
Discussion (50)
I would use Vue.js it's so fun to work with
Would you use it with Nuxt.js or any other framework? Or as is?
Definitely recommend using Nuxt because of the SEO and SSR for better and performant storefronts
Of course i would use nuxt for better seo and performance
CollapseExpand
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.
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.
Hi Shahed. Mind me which templates you tend to look at?
Thread
Thread
Oh I saw you spoke on templates and I thought you might of actually used a few.
CollapseExpandCollapseExpand
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.
True, they all have their pros and cons
CollapseExpand
I actually used Nextjs for a Shopify custom Storefront I'm working on.
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.
CollapseExpand
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.
That's cool, would you use any specific frameworks with each?
CollapseExpand
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 :)
Sounds interesting! Looking forward to see it with Medusa
CollapseExpand
Marko.js was so to say made for best ecommerce performance so nobrainer.
I’m honestly first hearing about it from the comments so that’s interesting to me
It is a Framework made by Ebay
Thread
Thread
Ohh that's so cool I had no idea
CollapseExpand
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.
That's a good point! If you can reuse something it's definitely better than reinventing the wheel
CollapseExpand
Wouldn’t use a frontend framework for an e-commerce site. I’d serve server-rendered product pages cached as close to the device as possible.
Right. Traditional SSR without client-side hydration is the way to go in my opinion 👍
Interesting, why is that?
CollapseExpand
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?
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.
CollapseExpand
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
CollapseExpand
Since ecommerce pages are mostly static and need really good SEO, I think I'd pick elderJS to build it.
Another Svelte framework, I see a lot of love for Svelte!
CollapseExpand
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.
Agreed it’s a good choice!
CollapseExpand
CollapseExpand
Interesting choice!
CollapseExpandCollapseExpandCollapseExpand
Nuxt works great w SHOP or Commercetools. I wanna try Squarespace too tho
CollapseExpand
CollapseExpand
CollapseExpand
I would go with either React, Next or Medusa.
CollapseExpand
CollapseExpand
Would love to see an ecommerce storefront built with Angular
CollapseExpand
I'd like to try Marko.js for an e-commerce project!
CollapseExpand
React or Svelte. Both are enjoyable to work with.
Would you use any specific frameworks with each or as is?
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK