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)
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