A presentation at Decoupled Days in in New York, NY, USA by Bassam Ismail
Delivering a multi-site, multilingual decoupled Drupal project in record time axelerant.com 1
Hello! Piyush Poddar Head of Partnerships and Sales Jaipur, India axelerant.com 2
Agenda ● Business case ○ ● Technical ○ ● Challenges and Resolutions Challenges and Resolutions Q&A axelerant.com 3
Client Wunderman Thompson is a leading digital agency with 200 offices in 70 countries and member of international advertising group, WPP. They help achieve impactful results for some of the biggest brands around. Project Development of multiple websites for one of their leading hospitality customers with multiple luxury resort properties throughout Asia. Headquartered in Hong Kong, the client has a large international audience. axelerant.com 4
Challenge - Content Management System ● Content Authoring process highly unorganised and unstructured ● Content Sprawl across multiple brands ● Site visitors spoke multiple languages ( English, Arabic, Korean, Japanese and Simplified Chinese and Traditional Chinese, Greek ) ● API friendly platform axelerant.com 5
Challenge - Content Management System ● Content Authoring process highly unorganised and unstructured ● Content Sprawl across multiple brands ● Site visitors spoke multiple languages ( English, Arabic, Korean, Japanese and Simplified Chinese and Traditional Chinese, Greek ) ● API friendly platform axelerant.com 6
Challenge - Multiple Brands ● They needed to address multiple geographies. ● Their different brands needed to be unified in order to establish a common back-end with multilingual versions. axelerant.com 7
Challenge - Multiple Brands ● They needed to address multiple geographies. ● Their different brands needed to be unified in order to establish a common back-end with multilingual versions. axelerant.com 8
Challenge - Platform ● ● Huge amount of traffic ○ Performance ○ Scalability ○ Financial Security axelerant.com 9
Challenge - Platform ● ● Huge amount of traffic ○ Performance ○ Scalability ○ Financial Headless Drupal with Acquia Site Factory (ACSF) Security axelerant.com 10
Challenge - China ● The Chinese audience was tremendously important and the solution needed to make their websites accessible within the country as much as to outside world. ● Great Firewall of China Great Firewall of China axelerant.com 11
Challenge - China Image Assets Acquia Servers (Sit Factory) Client’s editorial staff Aliyun CDN Aliyun OSS Decoupled Drupal Aliyun API Gateway Aliyun Function Compute axelerant.com 12
Challenge - Delivery & Timeline ● Ambitious delivery timeline ( 3 months ) ● Requirement clarity concerns ● Risk spiking needing frequent experimentation and validation. AGILE DECOUPLED TEAMS REMOTE WORK CULTURE axelerant.com 13
Challenge - Multiple Stakeholders ● Shared code repository with multiple stakeholders dilute our authority to maintain coding standards and quality ● Lack of a standard communication and information strategy across all Multiple stakeholders ● Accessibility inconvenience and additional overhead due to the use of virtual desktop infrastructure axelerant.com 14
Challenge - Multiple Stakeholders ● Shared code repository with multiple stakeholders dilute our authority to maintain coding standards and quality ● Lack of a standard communication and information strategy across all Multiple stakeholders ● Accessibility inconvenience and additional overhead due to the use of virtual desktop infrastructure axelerant.com 15
Technical Challenges axelerant.com 16
Bassam Ismail Engineering Manager (Front-end) Srinagar, India axelerant.com 17
Challenge - Components ● ● Flexibility to use any component anywhere Components can be nested to 4 levels axelerant.com 18
Challenge - API ● ● Deeply nested API response Multiple HTTP queries per node axelerant.com 19
Challenge - Components + API ● What components? ● What order? axelerant.com 20
Challenge - Performance ● ● Loading every component on every page More than 1.5mb bundle size axelerant.com 21
Challenge - Preview ● 1 hour cache on prod ● Reviewing content before publishing https://xyz.cloudfront.net/en/preview/node/{token} axelerant.com 22
Challenge - Team ● Initial lack of expertise in Angular ● Techniques axelerant.com 23
Questions? @piyushpoddar | piyush@axelerant.com @skippednote | bassam@axelerant.com axelerant.com 24
Our engagement with a leading global agency—to overhauling one of their client’s important project comprising of multiple websites across multiple brands—was challenging in many ways, especially since we didn’t have a team familiar with the technology at the start. What we had was a prior experience of building decoupled applications, robust, agile management practice and a strong decoupled (read: remote) work culture in place.
In this session, we’ll see how we scaled up and conquered these challenges to deliver the client’s headless Drupal solution successfully — all within a timespan of just a few months.
We’ll cover how a robust agile project methodology brought sanity to this multiple stakeholders-based engagement, along with how decoupled teams enabled parallel independent work streams based on established communication protocols.
We will also look at some of the crucial technical aspects of the project along with business case supporting them:
Component driven architecture using Angular as a front-end
7-step content moderation workflow supporting multi-geography based compliance requirements
A unique deployment architecture across multiple infrastructures ( Amazon Web Services, Alibaba Cloud) with Lambda-based proxy.
CI pipeline built on Jenkins with Terraform used for front-end infrastructure.
Others
for free. You
can too.