Front Page Redesign

Technical Overview

Warning: the following presentation contains technical jargon and assumes an unfair level of familiarity with technologies including, but not limited to: JavaScript, React, Node.js, Morph, HTML, CSS, Web Browsers, HTTP, TCP, Unix, Data Structures, Type Systems, Lambda Calculus, Category Theory, Register-Based Virtual Machines, Hardware Virtualisation, Field Programmable Gate Arrays, CPU Register Access Optimisation, Memory Throughput Bottlenecks, I'm genuinely just making stuff up now...

Made from horizontal "slices"

  • Each section (top stories, must see, most watched, ...) is an independent slice
  • Slices are intended to be themed and reused across BBC products
  • Drastically simpler layout thanks to removed secondary column

Slices built in React

  • Each slice is an independent React component
  • Modular design: common UI components are shared across slices
  • Most slices are higher-order components to enable reuse by other teams
  • We don't run React in the browser! More on this later

Styled with Grandstand

  • Small CSS framework shared between Live, Sport, News, World Service, Weather, Politics, Local, ...
  • Uses GEL grid & typography which are shared by even more BBC teams
  • Provides primitive utility classes rather than bespoke styles for each component (more on why this is important later)

Delivered by Mozart

  • Page assembly service developed by News Frameworks
  • Slices are fetched as HTML from Morph's React-component-as-an-endpoint API
  • Inline styles are de-duplicated
  • Slice HTML is rendered in order into a bare-bones page template

It's fast!

  • Content is rendered 40% faster
  • 85% less CSS (860KB → 125KB)
  • 90% less JS (290KB → 15KB)
  • 30% more HTML but 4% less after gzip
  • Plans to make it faster (even less CSS, better stylesheet bootstrapping mechanism)

Less CSS with Grandstand

  • Most designs can be implemented with the grid
  • Primitive utility classes means a lot (like, a lot) of classes in the HTML
  • But they are the same classes, so they compress really well
  • Modify designs to work with Grandstand rather than writing tonnes of bespoke CSS
.hard-news-unit__summary, .basic-information__body p, .forecast-daily__time, 
.forecast-hourly__time, .forecast-hourly .weather-temperature, .media-feed-item .cta, 
.media-asset-page .story-body .introduction, .live-event-index__summary, 
.live-event-index-item__breaking-news, .live-event-index-item__text, .sport-stories .tabs-list li a, 
.sport-teams-unit__list-item-link, .from-other-news-sites-list-item__source, 
.visual-promo-label__summary, .visual-promo-content__summary, .programme-promo-summary, 
.top-stories-promo-story__summary, .more-from-this-index__link-title, .most-popular__header__tabs li a, 
.most-popular-by-day__list-item-day, .most-popular-by-day__list-item-title, 
.correspondent-promo__article-summary, .digest-list, .navigation--wide, .secondary-navigation--wide, 
.markets-selector-item__link, .markets-index-dropdown-list-item, .markets-index-table thead th, 
.markets-index-table tbody td, .comments-explainer-line, .find-local-overlay__current-location, 
.find-local-overlay__done, .find-local-overlay__cancel, .find-local-overlay #locator-geolocation .link-text, 
.find-local-overlay #locator-search-input, .find-local-overlay #locator #locator-results a, 
.contributor__name, .update__body, .tv-bulletin__summary, .ws-promo__more, .albatross__summary, 
.bold-image-promo__summary, .budgie__summary, .buzzard__summary, .capercaillie .constituency-azlink__link, 
.dove-item__summary, .eagle-item__summary, .election2016-azlink__link, .ni2017-previous-results__link, 
.results-banner__abbr, .results-banner__value, .election2016-results-graph__link, .results-ticker__headline, 
.gallery-images__summary, .heron__item-summary, .kestrel__summary, .loon-item__summary, 
.merlin__summary, .nations-pseudo-nav__link-inner, .osprey__summary, .parakeet-lead-item__summary, 
.parakeet-item__summary, .penguin__item .title-link__title, .pigeon-item__summary, .pukeko-item--stacked .pukeko-item__summary, 
.quetzal__summary, .related-content-links__link, .raven-item__summary, .shoebill-lead-item .title-link, 
.shoebill-lead-item .title-link__title-text, .shoebill-item .title-link, .shoebill-item .title-link__title-text, 
.skylark__summary, .small-image-promo__title, .sparrow-item__summary, .spoonbill-item .title-link__title-text, 
.comp-stream .story-body__list-item, .local-survey, .comp-stream .quote--email, 
.comp-stream .quote--sms, .swift__entry, .swift-source__name, .waterfowl__link--duration, 
.waterfowl__item .title-link, .waterfowl-heading__title {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.28572;
}
.gel-brevier {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 16px;
  line-height: 1rem;
}

Bespoke component styles

Grandstand

Typography settings

↑ rampant abuse of Sass @include

No React in the browser

  • Recap: each slice is a React component
  • Slices can depend on big third-party libraries like Lodash, Moment.js
  • Entire dependency tree must be sent to the browser for slices to render
  • Equates to almost 2MB of JS
  • 100% CPU usage for >20 seconds on low-end devices

Case study: lx-stream

What's next? (Product)

  • Roll it out to domestic users
  • Finish off the international edition
  • "Special treatment" promos
  • Slice library

What's next? (Technology)

  • Work with Morph to improve style bootstrap performance
  • Slim down Grandstand
  • Investigate running Preact or Inferno in the browser
  • Investigate using styled-components

Thanks 💚

Front Page Redesign — Technical Overview

By Joseph Wynn

Front Page Redesign — Technical Overview

  • 273

More from Joseph Wynn