Architectures for Modern Websites
Modern websites have come to mean much more than simple corporate landing pages. A modern, API-first modular architecture allows for teams to get up and running quickly.
Modern websites have come to mean much more than simple corporate landing pages. A modern, API-first modular architecture allows for teams to get up and running quickly, using existing services to provide better user experiences. In the case of modern websites, this approach can be particularly useful to optimize a team’s marketing website with minimal effort and enable them to keep their focus on their core business.
In breaking down the monolith, teams are able to work more flexibly and quickly adapt to changes in their scope or product offering quickly. Teams can take a DIY approach by building a custom tech stack without building all of the services in-house. Teams take advantage of having a custom tech stack without having to worry about each system’s maintenance, vendor lock-in, or whether or not their system will scale.
Modern websites consider user experience every step of the way and it is essential that the tech stacks used work together to create a highly performant, fluid user experience. As user-generated content begins to define the modern web experience, building a tech stack that is flexible enough to incorporate these needs seamlessly is critical. As teams begin to search for tools to build their modular, API-first tech stack, it can be a daunting task. That’s why we have created some high-level architectures to give you a place to start and serve as a guide for building an optimized modular tech stack.
ArchitectureAnchor
To view the higher resolution image click here.
Architecture BreakdownAnchor
Authentication/AuthorizationAnchor
Authentication and Authorization software center around confirming the identity of users and ensuring that only the correct people have access to the system. Systems such as Okta and Onelogin are popular choices for handling authentication and authorization.
Global CacheAnchor
Global caching improves performance by storing copies of files or data in regions that are globally distributed. Future requests of the same data are pulled from the region closest to the request enabling the data to load more quickly. This can be particularly helpful for content that is accessed repeatedly. Cloudflare is a popular option due to its robust network of data centers.
CDNAnchor
A content delivery network (CDN) is a globally distributed group of servers that allow for quick transfer of assets. CDNs reduce hosting bandwidth and can improve security by pulling content closer to website visitors.
AnalyticsAnchor
Analytics is a broad category of tools that are critical for having oversight on the performance of a website. These tools can be essential for ensuring the health of a website and can give an overview of the status of various pages and services. Popular tools such as Google Analytics give users insights into page speed, traffic, errors, and more. Analytics tools can be useful for planning based on concrete information such as user engagement.
Asset ManagementAnchor
Asset Management tools make it easy to upload, transform, manipulate assets for your website or digital project. These services give users more control over their assets, a critical component of any modern digital project. Popular tools for asset management include Filestack and Fastly.
PersonalizationAnchor
Personalization tools allow teams to test and iterate content, easily. They make it easy for teams to understand how different content (such as wording, case studies, assets, or even user journeys) performs relative to one another. These tools serve multiple variations of content and collect data on the performance. Tools such as Optimizely and Dynamic Yield are popular options for A/B Testing and Personalization.
Localization and TranslationAnchor
Localization and translation services help digital products serve the needs of a globalized user base. These tools range in their specific product offering; however, they either allow for easy translation or localization of content. This can be particularly helpful if localization is being outsourced or are looking to use an AI translation tool.
API-first ServicesAnchor
API-first services is a general way to describe how easy it is to connect using case-specific services that have an API. With Hygraph these services can be connected in a variety of ways, including via content federation or using the Mutations API. API-first services make it easy for teams to create their ideal tech stacks without having to build them themselves from scratch.
Explore a wider range of such best-of-breed services that compose better stacks on Build Your DXP.
Architecture Best PracticesAnchor
In order to get the most out of your modular, API-first tech stack, there are some critical best practices that should be considered.
Avoid content silosAnchor
Services must easily communicate to one another to ensure that content does get stuck in a single system. While it may be a good idea for data to have a single home where it can be manipulated, it should still be distributed to the necessary systems to keep architectures tidy and data current.
Ensure the redundancies are intentionalAnchor
While it may be the case that you want to build some redundancies into your tech stack for extra security, it is important to make sure that they serve a real purpose. Creating too many redundancies or unnecessary ones can lead to a bloated tech stack rather than an agile, flexible system.
Strike the balance of how many systems to useAnchor
One of the best things about a modular tech stack is that it is easy to add and remove services as the needs of the team change. It may take some refinement over time but it is important to ensure that business needs are met but that not too many different services are implemented that the architecture becomes bloated or content silos are formed. Decentralizing various components can be the key to high performance but only when used wisely.
Consider data privacy standards when choosing servicesAnchor
Data privacy varies wildly from region to region and it is important to consider how various services will handle data. For example, the EU has much stricter data privacy laws than other countries. Ensuring that data is stored in the regions that match your standards can be a key consideration when choosing your tech stack.
