The New Frontier: E-Commerce at the Edge

Rate this content
Bookmark

In this talk I'll explore the evolution of e-commerce infrastructure from traditional co-located servers to the new frontier of serverless and edge computing, and how modern developer tools like Remix and Vendure fit in.

19 min
18 Nov, 2022

Video Summary and Transcription

Today's Talk discusses the new frontier of e-commerce at the edge, focusing on headless commerce and the benefits it offers. The edge, an intermediate server, can improve website loading by rendering HTML on the server and reducing latency. Venger, an open-source headless e-commerce framework, is introduced as a solution to cache API responses at the edge and improve performance. The Venger online shop demonstrates excellent performance, highlighting the benefits of headless and edge computing in e-commerce.

Available in Español

1. Introduction to E-commerce at the Edge

Short description:

Today, I want to talk about the new frontier, e-commerce at the edge. There are two major trends: headless and the edge. Headless commerce is a buzzword that refers to serving JSON through a JSON API instead of serving HTML. It involves removing the head from a monolithic architecture. Let me explain further.

Hi there! My name is Michael and today I want to talk to you about the new frontier, e-commerce at the edge. I've been building e-commerce applications for well over 15 years, from old school PHP 5.4 to now Node.js TypeScript and more modern tooling and that's what I want to talk about today.

I want to tell you about the future of e-commerce and that consists of two major trends that I want to cover today, one being headless, the second being the edge. Let's cover what I mean by these.

First of all headless. Here's a Google trend chart for headless commerce. As you can see, more and more people are searching it, there's a lot of interest there. But what does it mean? Let's Google it and find out. When we Google it, we'll see the first page is just ads. If we scroll down and try and find out what it actually means, we will get, one after the other, content marketing blog posts. What can we tell from this? What can we tell from this? It's a buzz word, that's what we can tell. And if we try and read these and find out what it means, we're going to get lost in jargon and keywords. Let's skip that and I'm going to show you a diagram to make it simple.

We want to build a web-based e-commerce application, an online store. What do we need? We need a server. Okay, we need a database to store our product, customer, and order data. We need some business logic. This is what's going to take that data, put it into some templates, apply some business logic, and produce the website and all of its functionality. We probably have some cloud services, some caching layer, maybe, some third-party APIs to call out to, but at the end of all that, we're going to serve to our customer some HTML. That product data from the database has been put in a template and the server is returning HTML. This is what's known as a monolithic architecture, a traditional architecture for a web app. It's been around for a very long time and will be around for a very long time. This is good, but we're not talking about that now. We're talking about headless. Headless is different. How do we get from monolithic to headless? Well, it's simple. We've just got to remove the head like that. Now, what's happening? So we're no longer serving HTML from the server. Instead, we're serving JSON through a JSON API. That could be a REST API or a GraphQL API.

2. Headless Commerce and its Impact

Short description:

The client takes data and turns it into HTML using a JavaScript-based framework. This approach, known as headless commerce, has gained popularity in the content management and e-commerce spaces. Examples include using WordPress as a headless CMS, as well as pure headless offerings like Commerce Tools and Venger. Even traditional monolithic systems like Shopify are embracing headless commerce, indicating that it is a trend that will shape the future of e-commerce.

The client is responsible for taking that data and turning it into HTML. Typically, that would be a JavaScript-based framework. We'd take the JSON and put it into a template. This is nothing new. We've been doing it for a long time. We used to call it things like AJAX. Now it's being referred to as Headless. But that's all you need to know. I'm sure you've done it. If you've been building single page apps, you've been using this already probably. Nothing new. But that's what we mean when we're talking about headless.

Headless commerce is this applied to an e-commerce application. Let's look at some examples. So Headless really caught on big in the content management space, first of all. You've probably heard of some of these services and projects. WordPress is an interesting one. This is like the original old school monolithic CMS system, the granddaddy. But it's in here because you can use it as a headless CMS. It has a rest API, and it has a GraphQL API. So you can use it just like this. In the commerce space, there's lots of software as a service and open source products as well that you can use to build in this way. Again, you have pure headless offerings like Commerce Tools and Venger. And then you've got companies like Shopify, which traditional monolithic system, but have recently bet really big on Headless. And this is fantastic. You've probably heard of the Hydrogen Project and you've probably also heard that they acquired Remix as well. So this shows that a real big player and Shopify is one of the real big players in the e-commerce space. They're betting big on Headless. And this is a very good sign. And this is a sign that this is a trend that is really here to stay and it's going to drive the future of e-commerce.

3. Benefits of Headless Commerce

Short description:

Headless commerce offers numerous benefits. It allows serving multiple clients through the same API, enables the use of any technology for front-end development, and provides freedom in choosing tools and platforms. With a headless architecture, developers are no longer constrained by outdated tooling choices and can leverage the innovative JavaScript node ecosystem.

So we've learned what Headless is, but why are people interested in it? Why is it so big? Why is it the future? Let's look at some of the benefits.

So first off, we see that it's pretty easy now that we've separated the client from the server. We can now serve multiple clients through the same API, a mobile app, maybe an in-store point of sale system and who knows, even an internet connected fridge where you can order your groceries through the same API.

And now that we've decoupled the UI, it means that we're no longer bound to the templating systems imposed on us by a monolithic system, be that the the templates of Magento that you see here or the WordPress style templating system that's used in WooCommerce or liquid templates used by Shopify. A decoupled UI means that we can use absolutely any technology that we want to build our front ends. And this is a key point because in e-commerce, it's not uncommon that the server the platform itself is very long-lived. It's a big investment and it's going to last five years, ten years, even more. By decoupling the UI, it means we're no longer constrained by whatever technology the back end platform is built on. We can build the front end with whatever we like. Remix, for example.

And that brings us to tooling. Let's take an example of Magento. This is a very big open source commerce platform. The last major version came out some years ago, maybe seven or so years ago. And at the time, they had to choose what are they going to build that UI layer on. So the tools that were available at the time looked something like this. And they chose some of these. Like Knockout, RequireJS. And that was a fine choice back then. Now if you were to start a new project and someone said choose whatever tool you want, you may not choose these. I personally wouldn't choose those. I would choose something maybe more like the ones on this side. And the key point here is that with a headless architecture, you are free to do that. You're not constrained by tooling choices that had to be made a decade ago. You can use what makes sense now. And that's a huge thing in terms of not only developer productivity, developer happiness, but also in the results you can get in terms of the experiences you can create for your customers. And this also highlights a strength, a massive strength of the JavaScript node ecosystem, this incredible innovation, this pace of innovation. Some people call it JavaScript fatigue. But on the positive side, we have an amazing array of tools that we can use, and there's continuous innovation. And the innovation is not only in frameworks and build tools, but it's also in the actual platforms that we can run our code on.

4. Explaining the Edge

Short description:

The edge is a server located at the edge of a network. In our case, it is an intermediate server that users go through to access our e-commerce application. This setup reduces network latency and improves user experience. For example, a potential customer in Sydney would send a packet to our server in central Europe, resulting in significant latency. By utilizing the edge, we can render HTML on the server and send it back to the customer, reducing the waiting time and improving performance.

That brings me to the next point that I want to cover. The edge. So what is the edge? Well, to explain this strange new concept, I have a special guest, the Edge. I'm sorry, I had to get a dad joke in somewhere. This is the Edge, the guitarist from YouTube. He's going to help explain what the edge is. So what is it? Okay. He says an edge server is a server located at the edge of a network.

What do we mean by the edge of a network? Well, in the center of this network, we have a cloud region, EU central one. That's where we're hosting our e-commerce application. We have users all around who want to use it. And notice that they're not accessing the cloud directly. They're going through an intermediate server that's close to them. These servers are what we refer to as the edge or edge servers.

Let's make this more concrete. Here's our node application running in central Europe. This is running our remix app, of course, and we're using a headless commerce back end. And we have a potential customer down here in Sydney. He enters the URL of our website into his browser. His browser is going to send a packet all the way to our server in central Europe, and that is 16,000 kilometers away. Just the network latency for that packet to go across is going to be over 260 milliseconds. Once it arrives on the server, we're going to be rendering HTML. This is a key point. We're talking about e-commerce. We're going to be doing server rendering, okay? SEO is king, so we're definitely going to be server rendering, so there's some work done there. Once the HTML has been rendered, we got to send it back, all the way back to Sydney. Again, 16,000 kilometers latency, so just before the first byte arrives, our customer is going to be waiting for a second, two seconds. Who knows? How is this going to look like from his point of view? Okay, he's entered the URL. The packet's traveling 16,000 kilometers. The HTML is rendering.

5. Improving Website Loading with Edge Rendering

Short description:

The website loading experience can be improved by using CDNs, which store static assets on edge servers. However, fetching the HTML file from the origin server still introduces latency. To solve this, we can render the page at the edge using Remix Edge SSR. Remix is compatible with various JavaScript runtimes and can run on platforms like CloudFlare Workers. By rendering the HTML at the edge, we can significantly reduce latency. However, there is still a problem.

Okay, the first byte has come back. We've got some HTML. That's good. Now, the HTML's fetching some JavaScript, maybe some assets. It's making some more fetches for data that it couldn't serve a render, such as session-specific data. Ah, okay. The shopping cart just loaded. Some more requests going in the background. Lots of latency on every single request. Finally, the image appears. The website's loaded. Not a great experience.

How can we improve this? Something that we've been doing for a very long time is using CDNs, Content Delivery Networks. This is actually a form of edge computing. This stores static assets, like images, JavaScript files, CSS files on a edge server, for example, right there in Sydney. When those assets are required in the future, they're fetched locally. Instead of 500 milliseconds latency, there's 10 milliseconds latency. That solves part of the problem. But we still have to go all the way to the origin server to actually get the HTML file to know what resources we then need to subsequently load.

How can we solve this? Well, what if we could do the rendering not only in our origin server in central Europe, what if we could render right there at the edge as if we'd taken our node server and scattered it around the world? That would be cool. That's what we can do now. So, as well as our static CDN, we can also actually render our page right there on the edge with something like Remix Edge SSR server side rendering. So, one really, really cool thing about Remix is that it can run on any JavaScript runtime. So, we all know Node.js, but there are other JavaScript runtimes. There is Deno, there is CloudFlare Workers, there are probably others, and there are probably more to come. Remix is very smart. It abstracted that part away into adapters so it can run on any JavaScript platform. In this case, we could be running on a CloudFlare Worker, for example, CloudFlare Pages, and Remix can do the rendering right there. So, the HTML is generated there in Sydney, 10 milliseconds away. There's still a problem, though.

6. Edge Computing and Venger Demo

Short description:

To reduce latency in retrieving product data for our website, we can cache API responses at the edge. This revolutionary approach improves performance, global availability, and reduces the load on origin servers. Let me introduce you to Venger, an open source headless e-commerce framework built on Node.js and TypeScript. It offers GraphQL APIs, supports multiple languages and currencies, and has a growing community. You can get started with Venger in just one command and be up and running in five minutes.

To get the product data to put into our page, we still have to make a call back to our headless server in central Europe. We're still going to incur latency. But edge computing can help with that too, because we can cache our API responses at the edge. So, that product has already been requested in the past. The response has been cached right there in Sydney.

So, now let's look at it. When he wants to visit our website, he makes a request. The Edge server can start rendering the page with Remix. When it needs data, it grabs it from the Edge in an API cache. It returns it to the customer, and every resource that is needed by that web page to fully render it is right there in a CDN also. So, everything that he needs is right there in Sydney. Instead of 500 or 1,000 millisecond latency, there's 10 milliseconds or 50 milliseconds. Much better.

So, this is why I call it the new frontier. It's really a revolution in the way that we can serve applications and increase performance, increase global availability, and decrease the load that we actually have to serve on our origin servers. So, this new frontier, as I said, consists of headless architecture and edge computing. Now, what does this look like in practice? I've got a demo for you. So, let me introduce you to Venger. Venger is an open source project that I've been working on for the past four years. It's an e-commerce framework. So, it allows developers to build custom e-commerce applications. It's built on Node.js using TypeScript, and it's headless. It exposes its functionality via GraphQL APIs. Not only that, it's highly extensible. You can pretty much build anything on it. It supports multiple languages, multiple currencies, and it's got a growing and active community. It's used by lots of companies, from Fortune 500s to Unicorn startups, Y Combinator backed startups, national supermarket chains, and everything in between. If you want to try it out, you can get started in one command, npx at Venger slash create myshop. It supports SQLite, so you don't need to have a database running locally, you can literally be up and running in five minutes. Try it out after this talk or after this conference day.

7. Venger Online Shop Performance

Short description:

Today, I want to show you an online shop backed by Venger and built with Remix. It runs on CloudFlare pages, an edge computing platform, and the API is cached by Stellate, an API caching service that uses the Fastly edge network. Let's take a quick tour of the website at remix-storefront.venger.io. It's running fast, with features like filtering, adding to cart, modifying the cart, and searching. But how fast is it? Let's use page speed insights to measure its performance. The results show lots of green circles and high scores, both on mobile and desktop.

This is what I want to show you today. It's an online shop backed by Venger. It's built, of course, with Remix. Running on CloudFlare pages, which is an edge computing platform. And the API is cached by Stellate, which is an API caching service which uses the Fastly edge network to cache API responses.

So we've got everything in the mix that I've talked about. So this should be good. Let's take a look. So here's the website. It's available at remix-storefront.venger.io. I'll just take you on a really quick tour. Here's the landing page. We can drill down, look at these categories, camera, photo, take a look at this. And as you can see, it's running pretty fast. We can filter, add to cart, we can take a look at the cart. Modify it. All of this is happening against against a real API. We can search.

So, that's what it's like to use. I'm sure you can agree it's pretty fast. But just how fast? Can we have an objective measure of it? Let's take a look at page speed insights. And we will take this product detail page and drop it in there. And now, it's going to run an analysis. And what we're hoping to see, of course, is lots of green circles with big numbers approaching 100, hopefully. Let's see what it gives us. First of all, we're going to see the mobile results. Okay. Lots of green circles. And almost 100 in all of those. If we go over to the desktop version, okay, this is looking really nice.

8. Benefits of Headless and Edge Computing

Short description:

We have achieved excellent performance in almost all aspects, with the exception of accessibility which requires some improvement. The website is incredibly fast, as evidenced by the response times from different locations around the world. The results clearly demonstrate the benefits of headless and edge computing. This concludes the demo, and we will now return to the slides to recap the future of e-commerce.

We have basically 100 in everything almost. Accessibility needs a little tweak. And these numbers right here are ridiculously good. So it's fast. It's objectively very fast.

Let's see if we can get a measure of the benefits that edge computing is bringing in this situation. Our origin server in this case is in Europe. I'm in Austria. So we're not really seeing the full capabilities of the edge. But let's see if we can view this website from different locations around the world. Here's a page that I found that lets us do this. So it's going to make a request to this website from Singapore, Brazil, Virginia, California, Ireland, Australia. And let's see what the results are. So they all come in. Look at these. Six milliseconds. 14 milliseconds from Brazil, Virginia, one millisecond, Australia, 14 milliseconds, California, two milliseconds.

I can't think of a better illustration of this entire concept of headless and edge than this. The results speak for themselves. I'm going to shut up now. That's the end of the demo. Let's head back to the slides. To recap, we've talked about the future of e-commerce being headless, edge computing built on Venger using Remix.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.