Resilient eCommerce platform with a JAMStack on Azure

Not that long ago, I posted about the idea of building a resilient eCommerce solution based on JAMStack and a cloud-native approach. Quite recently, we followed up on this topic by publishing the reference eCommerce architecture we’re using at Divante. The topic is really hot, but my first approach to it was very generalized. Given that fact, I decided to follow up on it from different angles and provide some more specific examples.

eCommerce on Microsoft Azure

Cloud-native is great, giving the developers much more space for the development of features instead of just keeping things up and running. Using Microsoft Azure, your team can choose from a variety of services because it’s extremely well-integrated and orchestrated with Github Actions.

Before we get into specific examples, let me just share one more observation. Implementing enterprise-scale commerce sites at Divante, we’ve seen the Microsoft ecosystem as being extremely popular across retail chains, B2Bs, and traditional businesses. What I mean is that its popularity is not only because of Windows OS and Office, but it’s also because of the sales support systems like Microsoft Dynamics. Now fully supported by Azure, It’s natural that Microsoft’s cloud offering is a natural next step in the digital transformation processes these companies are facing.

I had an interesting talk about this aspect with the Chief Architect of Mirka.se, a B2B company that manufactures sandpaper. He gave me examples of the IoT and messaging queues they’ve integrated into Azure’s cloud services.

In this blog post, I want to quickly go through all the aspects mentioned in the original article. I’ll map them out based on Azure’s features that can be used to deploy eCommerce solutions that are highly scalable and resilient.

Can you go end to end with SAP CX?

Before we get into the details of building a custom eCommerce solution based on Azure and open source frameworks, it’s worth mentioning the SAP CX offering. It’s actually based fully on Microsoft Azure, and with the Spartacus frontend, it fully supports the cloud-native headless architecture.

Source: https://www.sap.com/cxworks/article/435954690/sap_commerce_cloud_architecture

With the growing list of customers deploying Spartacus to production each month, it’s potentially the quickest and easiest way to deploy large-scale eCommerce on Azure. Spartacus is open source. That being said, you can use all the resources and Azure services together with the Spartacus storefront deployed over the SAP CX cloud. It can be hosted on Azure, too.

JAMStack is for the frontend

Microsoft has a great offering for JAMstack developers. First, let’s start with the CDN. It’s natively supported by CDN leaders like Akamai and Verizon and has thousands of POP edge servers across the world. It might sound like “standing on the shoulders of giants” instead of fully relying on the self-built CDN network. However, it’s actually the approach Microsoft has been using recently by supporting standards like ubuntu, Github, and Kubernetes instead of using its own properiatiery solutions.

You can just use the Dynamic Site Acceleration feature with your existing apps with virtually no code changes. You’ll still have all the benefits from TCP connections acceleration, BGP routing, etc. The service provides powerful APIs and HTTP-headers driven control over the routes, cache invalidation, content purging, and so on.

Another related technology is the Static Web Apps service which is kind of equivalent to Vercel or Netlify. It allows you to easily deploy the static applications generated from engines like Next or Gatsby.

If we’re talking about the content engine, you’ve got quite a few products to pick from. One of them is Vue Storefront. It has amazing SSR Cache support and supports Microsoft CDNs with dynamic cache purging. It lets you cache the content for days or months and clears out the cached versions as soon as they’re updated in the backend.

Next.js is also a pretty interesting option, especially given the Incremental Page Generation and native stale-while-revalidate support. It’s got great support from Azure Static Web Apps, too.

At the moment, by closely working with Facebook and Google, Next.js is probably the easiest way to improve the Web Vitals scores for your frontend. They even support experimental features like React Server Components.

“We work together with a bunch of open-source projects. […] For example, we’re working with the Google Chrome team where they have a bunch of people working with Next.js to improve the Web Vitals metrics. […] We’ve introduced Next Analytics, letting you track and improve metrics like Largest Contentful Paint […] that really helps improve performance and improve conversion rates.”
Tim Neutkens

The framework is being developed at a rapid pace. Some of the coolest features include mixing SSR and SSG.

“This year we spent a lot of time on making static site generation really good […] by providing more features than you would generally get from a static site generator […]. We regenerate the pages, we could also enhance them client-side. […] So we introduced this thing called preview mode where you can […] bypass the static generation and just get an immediately rendered page.”
Tim Neutkens

Serverless is for the backend

Azure Functions and App Services are great for both serverless and Kubernetes-based backend services. They can be fully hosted and deployed with the coherent scripting and CI environment as the frontend application. Moreover, with Azure Edge Zones, you can deploy the serverless functions across the globe in order to lower the latency and increase the reliability of your application. The edges can even be executed within the hybrid cloud architecture, like in your private clouds.