Delivering a multi-site, multilingual decoupled Drupal project in record time

A presentation at Decoupled Days in July 2019 in New York, NY, USA by Bassam Ismail

Slide 1

Slide 1

Delivering a multi-site, multilingual decoupled Drupal project in record time axelerant.com 1

Slide 2

Slide 2

Hello! Piyush Poddar Head of Partnerships and Sales Jaipur, India axelerant.com 2

Slide 3

Slide 3

Agenda ● Business case ○ ● Technical ○ ● Challenges and Resolutions Challenges and Resolutions Q&A axelerant.com 3

Slide 4

Slide 4

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

Slide 5

Slide 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 5

Slide 6

Slide 6

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

Slide 7

Slide 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 7

Slide 8

Slide 8

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

Slide 9

Slide 9

Challenge - Platform ● ● Huge amount of traffic ○ Performance ○ Scalability ○ Financial Security axelerant.com 9

Slide 10

Slide 10

Challenge - Platform ● ● Huge amount of traffic ○ Performance ○ Scalability ○ Financial Headless Drupal with Acquia Site Factory (ACSF) Security axelerant.com 10

Slide 11

Slide 11

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

Slide 12

Slide 12

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

Slide 13

Slide 13

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

Slide 14

Slide 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 14

Slide 15

Slide 15

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

Slide 16

Slide 16

Technical Challenges axelerant.com 16

Slide 17

Slide 17

Bassam Ismail Engineering Manager (Front-end) Srinagar, India axelerant.com 17

Slide 18

Slide 18

Challenge - Components ● ● Flexibility to use any component anywhere Components can be nested to 4 levels axelerant.com 18

Slide 19

Slide 19

Challenge - API ● ● Deeply nested API response Multiple HTTP queries per node axelerant.com 19

Slide 20

Slide 20

Challenge - Components + API ● What components? ● What order? axelerant.com 20

Slide 21

Slide 21

Challenge - Performance ● ● Loading every component on every page More than 1.5mb bundle size axelerant.com 21

Slide 22

Slide 22

Challenge - Preview ● 1 hour cache on prod ● Reviewing content before publishing https://xyz.cloudfront.net/en/preview/node/{token} axelerant.com 22

Slide 23

Slide 23

Challenge - Team ● Initial lack of expertise in Angular ● Techniques axelerant.com 23

Slide 24

Slide 24

Questions? @piyushpoddar | piyush@axelerant.com @skippednote | bassam@axelerant.com axelerant.com 24