Origami – A new front end component strategy for FT – Andrew Betts, FT Labs

View Github Repository Open presentation in a new window

triblondon

See all presentation from triblondon

Origami – A new front end component strategy for FT – Andrew Betts, FT Labs

0 1

talk-origami

On Github triblondon / talk-origami

Origami

A new front end component strategy for FT

Andrew Betts, FT Labs

@triblondon, @FTLabs

  • Six hundred domain names
  • Eight hundred ft.com subdomains
  • Three separate digital channels

Problems

  • Repeating work
  • Unable to let go of old tech
  • Experts needed everywhere
  • Square pegs, round holes
  • Learning 'cliff'

Single channel future

Many others (Guardian, BBC, Gov.UK, Boston Globe) have built single-channel sites that serve all devices with a single website. Ultimately, we should too, because

  • Same URL for an article, regardless of platform
  • Much lower cost to maintain
  • More consistent experience for users
  • Easier to comply with accessibility obligations
  • Better prepared for Web Components to change how we build websites

How to get there

  • Build reusable components that we can share between products
  • Design at component level, not page level
  • Have a standard, so things are easy to understand and use
  • Align design with implementation using a living style guide
  • Use powerful and flexible versioning and packaging
  • As far as possible, use public standards
Create a Living style guide to improve performance. Nicole Sullivan

Package dependencies

Consultation

  • BBC (Simon Stevenson)
  • CBC (Barbara Bermes)
  • GDS (Frances Berriman)
  • Sky (Harry Roberts)

Working in public

http://financial-times.github.io/ft-origami

In summary: catching up

  • Build components, not pages
  • Respond to content, not devices
  • Integrate design with dev in a living style guide

In summary: pioneering

  • Make everything modular
  • Package management for SASS
  • Fully scalable architecture

What we've done so far

  • Tested packaging solutions
  • Written a standard
  • Taken extensive advice
  • Built about 10 sample components
  • Started creating tools to support the framework

Roadmap

  • Finish build service and registry tools
  • Build a living style guide
  • Build more components
  • Encourage internal teams to identify component use cases
  • Provide support internally to component authors
  • Use components in production: replace legacy code, remove inconsistencies, use in new projects

That's it!

Contact me: