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.

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