Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building a reusable component system at the FT

Building a reusable component system at the FT

Andrew Betts

March 24, 2016

More Decks by Andrew Betts

Other Decks in Technology


  1. About me •  Head of front end standards •  Founded

    Assanka (2003), acquired by FT in 2011 •  Like: neatness, hate: inconsistency.
  2. Network   TCP/IP   HTTP   HTML   Components  

    Internal standards create a new higher level abstraction to web development
  3. Better usability •  Customers demand simpler, easier UI •  No

    longer acceptable to just do what’s technically easiest
  4. Problems we had at FT •  Repeating work •  Unable

    to let go of old technology •  Experts needed everywhere •  Square pegs, round holes
  5. What is Origami? •  A specification (origami.ft.com) •  Tools to

    help make and use components •  Components
  6. Syntax and encapsulation (JavaScript) •  No globals •  Namespace events

    •  No modifying DOM on parse (or outside of owned DOM) •  ESLint
  7. Syntax and encapsulation (Sass) •  Namespace prefixes for classes (Use

    BEM) •  No styling out of namespace •  No IDs, ever •  BAD: #idselector {} •  Minimise specificity •  OK: .tweet__img--big •  Consider states (use ARIA): •  hover, focus, busy, selected, disabled, active •  Express responsive behaviours with mixins, not media queries: •  .o-tweet—large •  .o-tweet--small
  8. Progressive enhancement (“cuts the mustard”) A  simple  test  that  sets

     a  movable  threshold  for  running  the  JavaScript  
  9. Semantic versioning •  Module version numbers have 3 parts: X.Y.Z

    •  These are called MAJOR, MINOR, PATCH 2.3.14 Major:   Increase  if  changes   break  backwards   compaCbility   Minor:   Increase  when  adding   new  features  which  are   backwards  compaCble   Patch:   Increase  if  just  fixing   bugs    
  10. Spec recap •  Standard build process •  Syntax and encapsulation

    rules •  “Cuts the mustard” for Progressive enhancement •  Semantic versioning (semver)
  11. Registry: publish and find components •  Scan FT’s git servers

    and discover version tags •  Build every version of every module •  Display all the info on one webpage
  12. Build service: instant build integration! •  Build any combination of

    modules on demand •  Build, compress (gzip), optimise, use CDN •  Allow automatic upgrades when new versions are released (eg Pearson -> Nikkei footer!) <script src=“https://build.origami.ft.com/bundles/js? modules=o-tweet,o-header@^1.3.7,o-forms@2”>
  13. A reminder: our objectives •  Consistent brand experience •  “Make

    everything look the same” •  Improve developer productivity •  Do things properly and just once
  14. Our additional benefits •  Supports corporate digital branding strategy • 

    Improves compliance with disability rights and practical help for the blind and partially sighted •  Reduced technological variation between products improves maintainability
  15. Thanks for listening. Get in touch with me: o  Email/GChat:

     [email protected]   o  Skype:      triblondon   o  Web:      trib.tv