Name: Solspace
Price range: $

Full Transcript

[Music] Welcome to the Solspace Podcast. Thanks for listening.

Mitchell: Hi everybody. Welcome back to the Solspace Podcast. Yeah, we've been on a little hiatus, a little break. You can blame the summer for the most part for that. I get deep into specific like R&D projects in the summer and try out new technologies and stuff. And the thing I did this summer was dive into Vercel, React .js, React, build up some API integrations and do some back office things.

So a lot of these sort of suggestions of what to do and what to explore came from David from the Solspace team. He's on the podcast with me today. And today's topic is going to be about headless Shopify.

So hi David.

David: Thanks for having me.

Mitchell: Yeah, thanks for coming back on. So last quarter we thought as we're exploring additional platforms beyond just Craft CMS to have Solspace providing client services on.

We were starting to poke around Shopify. The reason we looked at Shopify was because they have made a lot of progress and headway on moving Shopify's technology stack into the headless and composable space.

And that means it's moving a little bit away or you have a diverse pathway to do development on that platform if like me and a couple of other developers at Solspace, we don't really like the liquid framework in Shopify. We don't like their theming and templating system very much. Kind of have to fight with it. But maybe that was a number of years ago that I had those experiences but so we're looking around an alternative platforms.

The use case that we're bringing to these other platforms is not direct to consumer. It's not business to consumer. We have very few of those clients. We have a lot of clients who are B2B. So B2B e-commerce and our size client is smaller than enterprise, bigger than mom and pop. But for us B2B e-commerce means you're not necessarily putting something really expensive and complicated and heavy and highly configured into your shopping cart and buying it with a credit card. Some clients are doing that. But most are instead just putting sort of CPQ, configure price quote systems in front of their customer base or configurators in front of their customer base so that those customers can explore the SKUs and the product offering and sort of the inner relations with their product line. And then get to a configuration that makes sense for their application and then contact a sales rep.

So a couple of years ago, you built something for a client of ours, Burl Audio. You built a configurator for them. They sell audio equipment for the recording industry, something called a mothership. You built a configurator so their customers can come in and explore the product, come up with a configuration that they think would meet their needs and then they would contact the salesperson, Will, at the time. And then we get some stuff done. So we're shopping around looking at other platforms that can support this type of web development. This type of business activity.

And one of the reasons we like the idea of headless and composable is because it's compatible with Solspace's philosophy of not doing gigantic builds. I don't want to tell someone to move from one platform to another, take 18 months to do it, spend multiple six figures. I don't want to do that anymore. I want to help people gradually transition to new technology in ways that make sense. So headless is appealing in that sense. I call it headless. It's actually composable is probably better language for it. But you did a proof of concept exercise diving in to Shopify's headless stack to see what's possible in there. What are the capabilities? How fast can you get going? How flexible is it? So maybe you could say a few words about the demo that you put together, how you spun it up, how quick it was to build that sort of thing. Maybe talk a little bit about that.

David: Sure. Yeah. How quick was the demo? It was roughly done in two weeks. And it was relatively simple to get started.

Basically, we have Shopify now provides this platform, which is called Hydrogen, which uses underneath, it uses technologies such as React, which you mentioned, and uses remix as well, which is another stack that Shopify just recently purchased in order to expedite the process of building new themes on their headless architecture.

And it provides a lot of an enhanced flexibility and customization. It's also feature proof because it's used in React. And React has been out there for years now. So you can have the ability to do also faster time to market. So it's easier for you to put a percent products or pages or A/B test ideas and put it in front of your customers faster. Also allows you to be careful. In previous CMSs and previous builds or web platforms, you were careful between your backend and your front end. But now with headless, you can let Shopify handle all the backend and you can focus on creating your front end, your headless front end, architecture, customize that to your customer needs and improve overall experience in user integration, user experience throughout the site.

Mitchell: So, imagine a use case where we have a client who, you know, some years prior they got started with the concept of e-commerce on Shopify and they're not selling t-shirts, you know, they're not selling decorated shoelaces, they're selling something complicated and expensive. They're selling like an industrial manufacturing robot or they’re selling programmable power supplies or something in the industrial space where whoever is going to make the purchase from that company, the stakes are high for them. They need to get the right configuration, they need to get the right product, the right setup. It's expensive and it's complicated and configurable. But imagine that they put that on Shopify.

They had a developer do it or they had somebody in-house put it together and now they have some SKUs there and now people are comfortable interacting with it there. Maybe they have some purchases for some, you know, four-figure items in their catalog. But they're finding, you know, they have maybe a new marketing director and that person came on and they're saying, "In order for me to help sell this stuff online, I have to be able to do much better content marketing. I have to put some really good landing pages together. I have to put some posts together where the content is structured in ways that are really flexible for me or I can make really clear arguments for why one should use one set of our solutions over another." You know, it's not widely supported in Shopify to be a really solid CMS. So this composable architecture makes it possible for you to have your SKUs in Shopify but your content in some other CMS and unify them into one single site.

You know, is that true or false? Can that actually be done or is it just a fantasy that's been marketed and not actually executed?

David: No, that actually can be done, through Shopify and their LDS architecture. It gives you the ability and flexibility that you mentioned. Also, it gives you the proof and performance. So let's say that you have a huge audience that now is gonna start visiting your new landing page. It gives you the ability to scale down to millions of users with a single click from, so no interaction from there, from you. Shopify has been around for a long, long time, and they have servers all over the place. So with headless, you can deploy your app to the closest server to your customer, so they can visit your site. It's gonna be fast, and it's there. You're not going to have a broken experience.

Mitchell: So a number of episodes ago, I did a four-part series with one of the product leads at Cloudflare, and he was walking me through all the details of edge computing, of CDN architectures of distributed computing and distributed sort of website development. And we've seen that explode. That particular category has really blown up. It's perfectly rational for people to have a hosting account, run a website on a hosting account somewhere. That's fine, but it's becoming more and more possible and more approachable for any web developer to create websites that are running in either sort of heavily edge optimized environments, CDN optimized, or even serverless environments. So I don't want to get too technical, but it is worth saying, defining a few of these terms, because the people usually engaging with SoulSpace are these directors of marketing who have to have this digital overlap. They have to know the language in order to understand what's being pitched to them or understand what they want to go argue to their bosses for in terms of investment and so forth. So with respect to Shopify stack, I'm going to put it in the show notes, but I came across a really good article about sort of summarizing Shopify's overall headless stack. Part of it you mentioned was hydrogen. So I wonder if you could say a little bit more about what this hydrogen thing is.

From the marketing director's point of view, what's the difference between hydrogen and a WordPress template or a WordPress theme?

David: That's an interesting question. Well, to begin with, what hydrogen is, it's a framework. So what it allows you to do and use is like predefined configurations from Shopify. So it comes with baked in code that is going to allow you to expedite the process of creating new pages and not only that, but it's already, it's already built with the mindset of your landing pages, your homepage and all the pages on your side have to be fast. So you can marry this hydrogen framework with or their other service, which is oxygen. And what oxygen is, you can think about it like it's your servers across the blog that are going to be new to your customers. So you can have a performant experience, you can scale it up fast. Oxygen is a platform for hosting your hydrogen apps, your web apps, and it's going to put your storefront, so it's going to put your commerce page in front of all of your customers in a way that is non-intrusive, in a way that is going to be fast for them, and so you can have an experience that is going to be seamless.

Mitchell: So a minute ago you were talking about how hydrogen is based on and packages react.

David: Yes.

Mitchell: And how it builds on the concept of components. First of all, something we haven't said is that all of this is JavaScript dependent. Everything we're talking about is in the JavaScript programming language. And again, for the marketing directors who are like, "I hope Mitchell will ask the dumb questions so I don't have to," the dumb question is, "What is JavaScript?" So JavaScript was a scripting language intended to be used in the browser to make it possible to manipulate the HTML of a page in the browser so that you could have more interactive experiences, like you could have a rollover button, or you could click something and something would dynamically change on the page without the browser having to reload. It happened to be the case that JavaScript was sort of accidentally really well written and somewhere along the way, I don't know how many years ago, five or so years ago, I just saw it explode. So the capabilities of JavaScript really blew up in particular. Somebody had the idea of making it server-side as well as front-end.

So you've got Node, a Node flavor of JavaScript that's capable of running on a server. One of the interesting things about it is, well, two little factors that I think are really useful to keep in mind for our kind of client. First off, it's really fast. JavaScript itself as a programming language is crazy fast. It has so few dependencies that have to be spun up in order for it to function compared to some other languages, PHP being one of our favorites, which is perfectly fast but it's not like JavaScript. The other thing is JavaScript is so package oriented. PHP is too, but JavaScript is like the laziest of web developers show up in code and JavaScript because they don't want to repeat themselves and they don't want to rebuild something that some developer in the world has already done.

So, building on top of all that, you have React, like View, like some of these other JavaScript frameworks, it's sort of building on top of that layer of JavaScript, and React is a highly componentized version of JavaScript. Stop me if I haven't said anything true so far.

David: No, that's pretty much how it is.

Mitchell: Okay. So then you have React, which is highly opinionated about things should be components. Everything ought to be a little discrete little unit, a little package that performs a job. You can nest these things into one another, make more complex systems. All right. So you have React that has that capability. I think it's the case that React was put out by Facebook. So you have this other phenomenon in web development of some of these enterprise businesses like Twitter put out Bootstrap.

So Bootstrap is this sort of framework for writing HTML and CSS that makes it just faster and easier. They deal with browser compatibility issues. So you have these big enterprise businesses putting out these frameworks that support web development, and it's kind of a marketing thing for them. They drive adoption and favorability of their platforms when they contribute. So you have React that Shopify has now fully adopted and they have baked it into what they're calling hydrogen. So you have this componentized system and Shopify has created react components that they just give you to use for free.

So you talked about speed a moment ago, Oxygen makes it possible for pages to load really fast in conjunction with hydrogen based and react being fast in and of itself as well. But the other part is it's fast to develop, so I can say, “David go build us a demo.” Two weeks later it comes back and there it is because it's componentized. You can borrow from other people's work and incorporate it into your own. So in those two ways you get speed. So we were talking about, well, how is this different than the old-school templating that you might have in you know WordPress templating or you might have in like a craft CMS twig template or so forth? The difference being it's much easier first of all to share components. So I wonder if we could just talk for a minute about this componentized concept in react and talk about why that wouldn't matter why that wouldn't matter to a digital marketer. Who's building a site like why do they care? Why do I have to rebuild my templates using react? What are the benefits of react?

David: I think one of the benefits is flexibility. That it gives you the ability to since they are so small to swap one component from for another. Let's say for for instance that you want to run some A/B testing on a page and you want to test if the bottom on the left if it gets more clicks than the bottom on the right. So if we create a component which is the bottom we can easily move it around so left to right top bottom so it gives you react react gives you the ability to build sites and use so many components. That is easy for you to test things out. So that in terms of moving things fast is gonna give you like fast time to market. Or if you wanna test like if it's improved, it has improved the performance and user experience as well, it gives you that. It's cost effective 'cause it doesn't take a lot of time for you to test new ideas. So it's easier for you to deploy into new services such as Cloudflare Pages. For instance, you can deploy things to Netlify as well or use this Oxygen, I'm sorry, yeah, Oxygen on Shopify.

Mitchell: When you built that configurator for Burl, Burl Audio, you used Vue.

David: Yes, I did use Vue.

Mitchell: And one of the things I remember in that project as you would expect in a project like that is the client came back after it was up and running and they were testing doing some QA. They came back and said, oh, we made a mistake. If you choose this variant and you choose this board and you put it in this position in the mothership, then you can't have this other piece go here. It has to, you have to have this chunk instead of this one. So that's a mistake we made, we gotta fix that. So how hard was it to go back and change the configurator? I mean, it's a complicated system where all these interrelated configurations and interrelated SKUs are touching each other and dependent on each other. Did it help that you were in that framework to make those changes quickly?

David: Yeah, it did help a lot. 'Cause if you think about it, it just, that configurator used cards. So every card had its logic. Some cards can have inputs and other can only have outputs. And some of them have inputs and outputs. So the ability to have components there, it helps us out a lot because a component can be just a input card. Another component is connected and it has its own rules. So it obeys like you can only go in this slot or from the slot 5 to the slot 10. So you can apply rules to individual components and they're gonna behave according to the rules that you provide.

Mitchell: So then modifying the system over time is I mean arguably less expensive and cumbersome because it's already componentized. It's already ready for change.

David: Yeah definitely your future-proofing your website if you will by building using components. Because if one component is not working as you will expect it, it's easy for you to swap just that one component instead of having to go through the loop or like removing pieces of code from different places. So in this case you just swap that component and whatever in your website that component is being used is gonna be like present with the new functionality that you require.

Mitchell: So the business case here for adopting this kind of technology and it seems like Shopify knows that this business case is out there is that product lines, catalogs, SKUs, they're always changing. These businesses have to change in order to compete. They have to respond to market demand, to customer demand, to competition and so they have to change their product lines and the capabilities. The website needs to not get in the way. So this kind of architecture using this tech stack, this modern tech stack, you're calling it future proof. I don't want to ever promise future proof to a client when I'm selling a project. But you're a lot closer to it these days than you were before.

David: Yeah, definitely, because this new architecture, it's built with the idea that it needs to integrate and adapt with emerging technologies, right? So in a sense, I do get why the hesitation of saying future proof, but as you said, it's close to it, because this was built with that mindset, like it needs to adapt, because nobody knows what the future entails, but yeah. This is like built within that mindset that React was built with the same mindset as well. So React is like, you always say these websites are living organisms, and this is one of the cases. Well, React is not the same React that came out in, I believe, 2014. It's been through a lot of iterations in the past. Now they move away from the way the components were built. Now there are functional components, meaning that there's more pieces of code instead of big pieces of code. And they added hooks, and they added a bunch of functionality that allows you to expedite the process of building new functionality on websites.

Mitchell: Well, let's break here, call this an episode, and come back. Let's talk some more when we get back in a couple of weeks about go deeper into the business case for Shopify. I wanna know, I wanna ask you about Shopify Plus. Like, if I wanna go headless and I like what I've been hearing as a client, does it Shopify Plus or nothing? I think you found a way to do this without going on Shopify Plus, just like a standard-based plan. So let's get into that. Talk about some of the details of this. Talk a little bit more about their stack. I wanna know about remix. So remix is like a flavor of React, and that's pretty geeky and technical, but hopefully we can make it approachable to the clients out there. Thank you, David. Talk to you in two weeks.

[Upbeat music] You’ve been listening to the Solspace podcast.

Who We Serve

What We Do

How We Work

Capabilities

Case Studies

Insights & Publications

Plugins

About Us

Podcast

Shopify Headless with David Estrada, Part 1

Full Transcript