Into the nooks and crannies of Boden’s digital transformation

While some reports estimate that 87% of UK shoppers buy online, it’s unlikely that many people realize what it takes to run an ecommerce platform — let alone transform the technology stack behind it. This talk will share the challenges, planning, and considerations behind Boden’s move to a completely new technology stack and content delivery network. You’ll hear from Cognifide’s principal systems architect how his team supported Boden’s digital transformation using Fastly and Terraform, and the clever moves they made to get past bumps in the road.

Transcript

1. Into the nooks and crannies of Boden's digital transformation Jakub Wądołowski (@jwadolowski) https://flic.kr/p/bGNxXD
2. • UK-based online clothing retailer • started as mail-order business • multi-market presence (UK, US, AU, DE, etc) The story starts in 1991
3. Digital transformation • the platform was a bit dated • UX-wise • operation-wise • technology-wise • 18 months ago the refresh project has started https://flic.kr/p/pZg3vQ
4. Bird’s eye view of e-commerce platform
5. New platform
6. • dozens of integrations • coexistence of 2 technology stacks • many teams involved Platform overview https://flic.kr/p/nCGank
7. • lift-and-shift was not a viable option • multi-stage process • static pages (+ Fastly) • product listing pages & search • product detail pages • market-by-market rollout Migration process https://flic.kr/p/qKoA2W
8. • way more than just caching • HTTP routing • request/response normalization • request/response enhancements • content assembly (ESI) • WAF • various feature flags • environment-agnostic VCL file Fastly’s role https://flic.kr/p/CGmgy3
9. VCL
10. • new platform serves 5-10% of the traffic • smooth transition • ESI to the rescue • consistent look & feel across the platform • speeds up rendering time at origin level • simplifies invalidation Let’s put all the things together (stage 1) https://flic.kr/p/7F4bHa
11. Edge Side Includes
12. • server-side rendering • fully renders above-the-fold content • static Handlebars template • dynamic product data • client side rendering • below-the-fold view (on scroll) • kicks in on interactions (data filtering) • ReactJS app • search - client side integration Product listing pages & search (stage 2) https://flic.kr/p/dgghVK
13. Product listing pages (stage 2)
14. • the same pattern as for PLPs • render as much as possible on server side (Handlebars) • some dynamic bits rendered by the browser • templates vary by product Product detail pages (stage 3) https://flic.kr/p/maVaDT
15. • ESI + compression • ESI + ETags • ESI + request restarts (req.restarts inheritance) • Last-Modified-driven conditional GETs Things go south sometimes… https://flic.kr/p/7rstvj
16. Last-Modified-driven conditional GETs
17. • defer 3rd-party JS (if possible) • reduce JS footprint • simplify HTML markup • prioritize above-the-fold content • more aggressive caching • compression improvements • remove unused fields from API responses • … Measure everything https://flic.kr/p/9gTRKV
18. • timeline • stage 1: Jul 2018 • stage 2: Dec 2018 • stage 3: Apr 2019 • the story doesn’t end here • on-going performance stream • new features State of the platform https://flic.kr/p/8Mw9gq
19. Thank you! https://flic.kr/p/4u4735