The American Botanical Council (ABC), a nonprofit organization dedicated to promoting healthier lives through science-based herb usage education, faced multiple challenges with its existing Content Management System (CMS) built on Umbraco. Operating since the 1990s, ABC sought to enhance its CMS and align it with operational requirements.
Built on Umbraco, ABC’s CMS, hosted on Microsoft Azure with an SQL database server, managed content across various ABC-owned websites through a unified dashboard interface.
Problems
ABC’s application suffered from several issues related to the features and functionality that it offered to its audience.
Members Area
The ABC application integrates with a legacy 3rd-party platform to manage memberships. This integration caused inconvenience, requiring users to log in twice. Migrating members posed challenges due to intricate features on the 3rd-party platform, leading to member dissatisfaction and financial loss.
SSO
Single Sign-On (SSO) across multiple ABC-owned websites was hindered by the limitations of the 3rd-party platform, supporting only server-side rendering.
MFA
Enhancing security with Multi-Factor Authentication (MFA) for client logins proved unattainable due to platform constraints.
Syndication
Syndicating content to 3rd-party platforms with a subscription model was challenging due to the website’s server-side rendering limitation.
ABC’s revenue stream therefore could not scale up as they could not extend their full potential market reach.
Cost
High traffic and large servers were needed to support the Umbraco back office and server-side rendering and that incurred substantial monthly costs.
Solution
In response to these challenges, I advocated for a comprehensive three-tiered restructuring of the application. Additionally, I put forth the recommendation to integrate the M360 API Management Platform, capitalizing on its advanced features designed to facilitate Single Sign-On (SSO), Multi-Factor Authentication (MFA), and seamless content syndication.
Layer 1 » Frontend with VueJs
The existing frontend websites were revamped using VueJs, introducing a more dynamic and responsive user experience. Each website was assigned a unique key, facilitating secure communication with the newly implemented Multitenant API Gateway.
A dual-pronged approach was adopted for the Vuejs front interface, deploying two distributions: one for conventional website rendering and another as a syndicatable widget.
Syndicated widgets were tailored for clients, each accompanied by a unique key. These widgets seamlessly communicate with the Multitenant API Gateway, ensuring a consistent and secure user experience.
Layer 2 » M360API Platform and Microservice
The Multitenant API Gateway emerged as a pivotal component, orchestrating the authorization of keys, loading associated configurations, and intelligently proxying requests to a bespoke microservice crafted specifically for ABC.
This custom microservice, armed with the configurations supplied by the Gateway, adeptly extracted pertinent data from the SQL Database server and seamlessly delivered it to the frontend.
To enhance performance and optimize application responsiveness, the microservice implemented a caching mechanism, storing retrieved content from the database.
Moreover, the microservice introduced an additional layer that not only integrated with the legacy 3rd-party membership platform but also extended functionalities within the members’ area. Notably, it introduced robust support for Single Sign-On (SSO) and Multi-Factor Authentication (MFA), fortifying the security infrastructure of the application.
Layer 3 » Umbraco Back Office
The pre-existing Umbraco back office underwent streamlining to exclusively serve CMS and back-office functions. Consequently, ABC’s initial investments in constructing and upkeeping their CMS over the years remained invaluable. The operational team at ABC continued to utilize the familiar back office, necessitating no additional learning or orientation.
The sole adjustment made to the Umbraco CMS involved the creation of an API. This API played a crucial role in seamlessly extracting data from the database using the Umbraco SDK and channeling it to the custom microservice, ensuring a harmonious integration without disrupting the established workflow.
Application Transformation
The ABC application underwent a transformative shift, transitioning from a monolithic .NET architecture to a more dynamic microservices architecture. This evolution marked the emergence of a sophisticated web 2.0 application, reflecting a paradigm shift in its structure and capabilities.
This meticulously designed architecture not only addressed the immediate challenges but also paved the way for future scalability and adaptability.
The entire system was containerized, enabling deployment flexibility with Docker and/or Kubernetes. This not only streamlined hosting but also introduced autoscaling capabilities, aligning with ABC’s goal of optimizing operational costs.
The integration of the M360 API Management Platform served as the linchpin, offering robust solutions to the intricate issues that had previously hindered ABC’s operational efficiency. By seamlessly unifying the frontend, gateway, and microservice layers, this solution not only resolved existing problems but positioned ABC for enhanced functionality, security, and cost-effectiveness.
The transformation laid the groundwork for a more agile and responsive technological infrastructure, ensuring ABC’s ability to meet evolving demands and scale its operations efficiently.
Key Features
- The custom microservice features a versatile architecture, incorporating a multi-driver engine and a multi-model engine to enhance its flexibility and adaptability. The first driver within the multi-driver engine is specifically designed to connect with the legacy third-party platform responsible for managing memberships. This strategic design not only facilitates the current integration but also sets the stage for potential migration from the existing platform in later stages. Should ABC decide to transition, the process is simplified – a new driver, mirroring the interface of the initial driver, needs to be developed and seamlessly incorporated.
- Similarly, the microservice’s multi-model engine includes a first model that communicates with the .NET and SQL Database Server to retrieve data. This design not only meets the current requirements but also positions ABC for future enhancements. For example, if ABC plans to augment search capabilities on its frontend websites by introducing Elasticsearch as an additional layer to interface with the database, the microservice is well-prepared. To achieve this, a new model, mirroring the interface of the original model within the microservice, can be created to seamlessly integrate and improve search functionalities. This modular and extensible design ensures that the microservice can easily evolve to accommodate additional features and technologies in the future.
- The websites and the widget transformed with the adoption of VueJS. Throughout this redevelopment, the code was crafted to achieve full dynamism. In essence, the frontend now operates with a singular template that dynamically renders based on the structural information provided by the microservice. This innovation empowers ABC operators to craft pages with distinct and diverse look-and-feel attributes directly within the Umbraco back office environment. The result is a heightened level of customization and flexibility in shaping the visual aspects of the web pages.
