As eCommerce becomes more mainstream and accessible to retailers of all size, innovative companies are finding new ways to enhance the customer experience by building totally customized eCommerce systems that are scalable, repeatable and sustainable.
A typical enterprise-grade eCommerce system is often a highly complex monolith. It’s made up of a bunch of different subsystems including the core, commerce, personalization, etc. all of which have to integrate with other third-party services like your CMS, loyalty program, payment gateway and marketing tools. The result can be expensive, complicated and difficult to scale. Even seemingly minor front-end changes (like changing a font) may require deploying an update to the entire system. Performance optimization becomes an important issue, especially in eCommerce, where the server is responsible for handling numerous requests every time a user takes an action like adding items to a cart, updating quantities and performing searches.
But what if there was a way to break away from tradition?
A way to make it easier and faster for development teams to create a better user experience overall? Forward-thinking retailers are doing just that by adopting a more service-oriented approach to architecting even the most complex eCommerce sites. By isolating a specific set of features and decoupling the backend components from the front-end user experience, savvy companies can eliminate the need for a complex codebase that was once required to support a variety of services. From here, deploying new features becomes easier, less intimidating and more cost-effective. Changes can be made to the front-end completely independent of the backend. When properly architected, a single backend system (ie. SAP Hybris) can serve data to many different touchpoints (including web, mobile, in-store kiosk, smart TVs, etc.), creating a consistent user experience across all channels.
That sounds great, but how do we get there?
An isomorphic approach, which renders the same code both client-side and server-side (check out Azat Mardan’s great post about isomorphic JavaScript), in conjunction with RESTful web services or microservices, opens up all kinds of opportunities in eCommerce. Improvements to performance optimization, scalability and maintainability – all of which have a significant impact on eCommerce retailers, are a few compelling reasons to take this approach. Previous SEO/JavaScript concerns are also null now that Google has added JavaScript rendering capabilities to their crawlers, eliminating the need for old school workarounds like headless browsers.
One of the biggest performance boosts comes because data can be loaded asynchronously, meaning the user can take other actions while the data loads, without waiting for page content to refresh. For example, a user can add multiple items to their shopping cart without waiting for the first action to finish processing, as opposed to a typical scenario where calls to the server mean the page must refresh with every action taken (resulting in an annoying user experience). When dealing with an eCommerce site, even 100ms extra load time can have a drastic impact on your conversion rate. There are plenty of examples of brands taking isomorphic design to the next level. Take a look at how Netflix is using React to evolve their UI development in order to improve performance, startup speed and modularity. Airbnb was also early adopter and wrote about their approach.
By rendering the code client-side, the server can remain stateless – with state only being maintained in the browser. As opposed to a stateful application (the majority of existing web apps) that records information about changes in state on the server during each request, stateless apps do not maintain any in-memory state (including info. related to user settings or actions taken in a session). Instead, responsibility is put on the client to maintain state, minimizing the amount of data that must be transferred. In eCommerce especially, stateless applications are more scalable, portable and integrate better with other cloud-based services. With a stateless application, you’re covered if any individual application server goes down or if you encounter any other issues with your infrastructure (obviously a concern for retailers, with Cyber Week fast approaching). The user won’t be affected because state is only maintained in his or her browser, as opposed to stateful application where when this happens their state may be lost. Overall, stateless offers a better user experience and can be easily scaled horizontally.
How does omnichannel factor in?
The rise in mobile shopping means eCommerce retailers must offer a best-in-class omnichannel experience with every interaction, and brands that invest in the mobile experience will reap the rewards. In fact, mobile now accounts for about 30% of all US eCommerce sales and is growing at a rate three times faster than that of overall US eCommerce sales. Add to this that a mobile experience typically differs greatly from the desktop experience. For example, a mobile version of an eCommerce site would typically offer a scaled-down version to avoid opening lots of connections, drawing on resources like data and battery life. Traditionally mobile applications have leveraged general-purpose backend APIs that are designed to service a number of different front-end user experiences. This can be a frustrating and limiting way to handle an omnichannel experience.
Front-end and back-end and microservices, oh my!
As the microservice ecosystem evolves and continues to grow in complexity, it becomes more challenging to design front-ends that are consistent across all channels – especially when there could be hundreds of microservices involved. Using the Backend for Frontend (BFF) pattern, where you maintain one backend per user experience (ie. mobile vs. desktop), is a more scalable and cleaner solution. Here’s how SoundCloud achieved success using a BFF approach to move away from the monolith.
Put it into practice.
WalmartLabs has developed Electrode, a platform for building universal React/Node.js applications. Electrode follows industry best practices with standardized structure and modern technologies. Definitely worth checking out!
What does this mean for the future of eCommerce?
Breaking away from the traditional eCommerce monolith is still a relatively new concept, but when properly architected, retailers that adopt this kind of approach to development will benefit from a huge impact on their overall customer experience. Development teams will be able to deploy new functionality faster and more cost-effectively, allowing companies to respond faster to customer demands.
Also read: From monolith to microservices-based commerce platform: a sample architecture roadmap
Interested in what breaking away from the traditional eCommerce monolith could mean for your business development?