From Enterprise Monolith to Microservices

with Contentful Emil Wiklund, TUI Nordic David Fuchslin, Valtech

Contentful Meetup, Stockholm27 September 2017

Introductions are in order...

• Emil Wiklund, David Fuchslin - Team CMS

• TUI Nordic: tui.se | tui.dk | tui.no | tui.fi

• TUI Group:- 30 million customers from 31 source markets travelling to 180 destinations - 136 airplanes- 300 hotels- 13 cruise ships

The "Monolith"

The "Monolith"

• TUI Group project: "one platform for all markets"

• Hybris: CMS, PIM, hotel search, website booking

• A very large single codebase that makes it slow to deliver features to customers, slow to fix bugs, slow feature feedback

• Large monolithic solutions have too much functionality, can't be the best of everything

Microservice sharding

• Sharded the Monolith into smaller services

• Teams can separately, completely own their product from data to the web

• Internal APIs can provide product content

• Hotel search, hotel configurator, checkout flow completely removed

• Partial loading of fragments on pages with widget-framework

• What's left in the monolith: CMS, PIM

Why change the CMS?

• Editors want an easy-to-use solution

• Developers want freedom

• Teams want to have editable content in each of their microservices

• Reduce costs!

• Headless CMS! Contentful!

Website CMS

• Start page - editorial

• "Trips and Offers" - editorial with partial dynamic

• Concept pages - mostly fully dynamic with some editorial

• Destination pages - mostly fully dynamic with little editorial

• Corporate pages - editorial

• Inspiration blog - editorial

Top navigation

Hero

Text block

Dynamic hotel list

Content cards

Footer

http://tuiwebcoe.github.io/common-ux/

Content design

• Page "components" match already-design organisms in the TUI Nordic Styleguide

• Contentful content models match the Styleguide models

• Easy to build!

Architecture and Infrastructure

• Static (pre-generated) HTML using content from Contentful

• Handlebars templates (styleguide)

• Metalsmith (contentful plugin + handlebar support + nodejs = :) )

• Dynamic content loaded with javascript and edge-side includes

• Microservices hosted in VMs and docker containers onsite in our "Rocketship", can easily be moved to a cloud provider

View page

Generate HTML

Preview

Webhooks

Multimarket

• 1 space per market (4 total)

• 1 shared space for common, translatable content

• Content from same space used in UAT and Production

Contentful GUI

UI Extensions

Advantages• Contentful: good uptime, cloud-hosted, great support

• Simple json api: we can choose the tech stack as needed to render the content, serious flexibility

• Multichannel since we build the channels ourselves, we design the content model ourselves

• Multi-language out-of-the-box

• Fun to work with, stimulating, creative!

• Extensible UI to handle custom/complex types

• Integrated asset API: rescales and optimizes images

• Much faster GUI and fewer clicks than previous CMS

• Fast! We started at the beginning of May!

• High satisfaction and high productivity with the editors now!

"Dis"advantages

• Build everything yourself (both good and bad)

• Content model management between spaces

Next steps for us

• Other teams starting to use Contentful in their microservices

• CMS: Destination pages

• PIM migration

• Episerver migration

• Wordpress migration

Summary

• Contentful was the "missing piece" for us

• We had a microservice architecture but we needed a place to store our content

• Developer-driven!

• More socks please!?

Thank you!