Part of what makes Nacelle unique in the headless commerce space is that we’re a platform that supports composable commerce. We’re not prescriptive and we want merchants to curate a tech stack with the best tools, platforms, and systems for their unique business needs.
Merchants need that level of flexibility to be responsive and agile as their business grows in the ever-evolving world of eCommerce.
One of the tech stack decisions merchants will face as they build their headless webstore is which JavaScript library to use and build on top of. They’ll also need at least two developers—likely more for mid- to enterprise-level brands—with specific expertise in the library of choice as they build their site.
Vue and React are two of the most common JavaScript frameworks our merchants have success with, and both have features and functionality that make them unique. There’s no universal “right” answer, and merchants need to evaluate their options to make the best selection for their brand.
We’ve tapped Nacelle CEO Brian Anderson and Lead Developer Levi Whalen to discuss some of the nuances between the two.
How do JavaScript libraries fit into the headless commerce picture?
Levi Whalen: With new advancements in JavaScript like state management, you can now send data to the frontend of a website and it will know how to change the UI to reflect that data. Before, you’d have to reach for tools like jQuery, which would manually override the document object model which was a hacky way to make things work. This is how we used to work with Shopify’s platform, using jQuery to try to make the storefront interactive.
That process was really hard, so the idea of using an advanced JavaScript library, like Vue or React, allows you to separate the logic from the presentation. This gives you a programming surface area where you can do things in the browser that you couldn't do before.
The primary benefit of using Vue or React is that you can make applications in the browser. You’re essentially turning a website into an application. We want to give an app-like feel to eCommerce stores because it increases interactivity and radically improves the shopping experience in the process. Customers are also so used to native mobile app experiences on their phones that it sets a high bar for UX. Vue and React are responsible for bringing that app-like feel to websites. That’s really attractive for merchants, and a cornerstone of the headless commerce experience.
Brian Anderson: Right. It’s a bit of a square peg, round hole with the tools that existed before headless, so this opens up the door for getting the right tools to build an experience that meets customer expectations.
Also, there’s a big difference between using JavaScript as a scripting tool and using it to build an application that drives the customer shopping experience. When you’re headless you can leverage JavaScript to build an application on the mobile web and that’s one reason why our merchants see such strong results after they go live.
Levi Whalen: Exactly. You also shouldn’t expect your eCommerce platform to provide a UI layer. That’s sometimes an expectation from the Shopify Plus world, and they’re never going to get that totally right. Merchants should use something that has been built by teams that are solely focused on making the UI great, and making the interactivity experience amazing. Rely on your eCommerce platform for the product data, but don’t rely on it for the presentation, that’s where libraries like Vue and React come in.
Why are these two JavaScript libraries specifically so popular in headless commerce?
Levi Whalen: This gets into human psychology a little bit, asking what tools are more coveted and why. There are a couple of factors that come to mind like the size of the library’s community. People using a tool can inadvertently invoke a “network effect” and people will rally behind leaders in the industry, interested in whatever they’re using.
In the case of React, there’s also the fact that Facebook is the corporate sponsor. There are certain companies that are just going to say, “it’s backed by Facebook so we can trust that it’s going to be around long enough for us to invest in it as our core technology.” The more upmarket we go the more we see people reaching for React due to this reasoning.
Brian Anderson: People also view hiring and resourcing as a risk to headless implementation, and there’s a misconception that it’s easier to hire React developers because the community is bigger. So, it appears that the logical way to reduce that risk is to lean into the most popular libraries and frameworks. But it’s a misconception. Developer expertise and quality need to far outweigh framework popularity while making this decision.
Levi Whalen: I would also say that the word “community” could be a misnomer for popularity. The view of “community” from a developer advocacy perspective might be equal for Vue and React in terms of the people that are building really good content. There’s a lot of people building cool stuff with these two JavaScript frameworks. But I’d say in terms of popularity, the number of repositories that contain React is definitely higher.
It’s important for merchants going headless to make this decision through a development lens and remember that popularity and quality aren’t necessarily the same thing.
Brian Anderson: This also comes full circle on using a JavaScript framework as a scripting language vs. a tool to build an application. Vue and React can both be used as scripting languages, but in the context of headless, we want to leverage them for the latter. A lot of boot camps teach JavaScript as a scripting language, but there’s a big difference between building a whole application or whole storefront and just hacking up some JavaScript to have it do something on the screen. That’s the bar that’s set for Vue and React developers working in headless. Merchants need developers writing full-blown applications with JavaScript as opposed to the script kiddie effect.
Levi Whalen: Right. Because of React’s popularity, more often you run into situations where, for example, a developer attaches a React-driven banner to a Shopify Liquid store and with that they call themselves a React developer. We see people that have a very limited scope of what they’re doing turn around and assume their skills will seamlessly translate to building a full React-based app or webstore.
How are Vue and React different?
Levi Whalen: I would say that Vue thinks of themselves more as a framework, whereas React is more of a library. As a framework, Vue has added their own language that can be used to decorate HTML and whatnot. For example, Vue has a feature called Directives where you can essentially add pseudo JavaScript into the HTML and then Vue knows how to create a loop out of that. So you’re not actually doing that loop in JavaScript, it’s Vue’s own syntax.
Brian Anderson: For me, React always embraced the ideology of JavaScript where there’s many different ways to do things. A lot of the syntax is very JavaScript-oriented. Then Vue came along and was a little more opinionated at first. It essentially said, “here’s the canonical way of doing things, there’s not 100 ways of doing something, there's one way.”
As mentioned, you can use Vue as a scripting language, but I feel it was always more geared towards building serious applications. Because of that, it attracted a community early on that was by default more senior.
Levi Whalen: To add to that, the state management patterns in React are still like the Wild West. They made it more open, rather than recommending state management. Conversely, the core team at Vue built a state management package to be the office state management which is called Vuex. That stance is one that provides a lot more for you out of the box, whereas with React, you’d have to build yourself. That can be daunting and make your code harder to work on.
If you were a merchant going headless, what would be in your tech stack selection?
Brian Anderson: Nacelle works well with either but if I were a merchant, personally, I would choose Vue and Nuxt [a framework built on top of Vue] because I think it would be easier to hire a team that’s really good around it that I can rely on. It would reduce my build risk and my timeline, and it would ensure the storefront is superb. Also, I could hire that team faster and move with higher velocity for a comparable cost.
Levi Whalen: The Vue developers I interview are often living and breathing Vue and very passionate about it. That’s what I want, the kind of people who have a folder full of passion projects.
Brian Anderson: Vue definitely has a cult following.
Levi Whalen: Definitely. Vue developers are usually the kind of people who think about problems more holistically and drive better code. React teams are also usually larger. You see Vue teams of one to two people building Vue applications so they tend to think more big picture and be more agile rather than looking at one little piece of the puzzle.
Are there any stories you can share about merchants who’ve had success with Vue or React?
Brian Anderson: React projects tend to be the ones that take longer and need more QA around it. We’ve noticed a trend that all the React projects we’ve done need a little bit more hand-holding. To me, it’s a result of the nature of the culture around React and Vue that Levi just touched on.
On the flip side, some of the really established frameworks that sit on top of React like Next are brilliant. And I think Nuxt is equally as powerful. But typically the problem is the average React developer doesn’t understand the nuances of the details around building a Next project, and so they get lost in the mix causing a huge impact on the build.
Even here at Nacelle, we’ve been trying to hire some React-specific developers. We have a couple of extremely talented individuals on staff already—but generally speaking, the React developers we interview don’t pass our technical bar.
The pass rate is 10x lower, easily, for React candidates compared to the pass rate for Vue candidates. And I think it’s even harder to hire React developers as an eCommerce merchant than a venture-backed SaaS company.
I encourage merchants to really think about this choice. Don’t go with what everyone else is doing, really think about the pros and the cons of each framework while making your selection.
Next Read: 5 Headless Commerce Pitfalls to Avoid
