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. Building a reusable web component system at the FT Andrew

    Betts Nikkei meetup 24 March 2016
  2. About me •  Head of front end standards •  Founded

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

    Internal standards create a new higher level abstraction to web development
  6. Multiple formats

  7. Better usability •  Customers demand simpler, easier UI •  No

    longer acceptable to just do what’s technically easiest
  8. Expectation of speed

  9. Problems we had at FT •  Repeating work •  Unable

    to let go of old technology •  Experts needed everywhere •  Square pegs, round holes
  10. None
  11. None
  12. Consistent brand experience

  13. Maximum developer productivity

  14. Forms

  15. Header

  16. Footer

  17. Grid

  18. Buttons

  19. Summary Increased challenges and demands Increased complexity Problems

  20. What is Origami? •  A specification (origami.ft.com) •  Tools to

    help make and use components •  Components
  21. npm install –g origami-build-tools Standard build process

  22. None
  23. None
  24. Syntax and encapsulation (JavaScript) •  No globals •  Namespace events

    •  No modifying DOM on parse (or outside of owned DOM) •  ESLint
  25. 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
  26. Progressive enhancement (“cuts the mustard”) A  simple  test  that  sets

     a  movable  threshold  for  running  the  JavaScript  
  27. if ('querySelector' in document && 'localStorage' in window && 'addEventListener'

    in window) { ... } ✓   ✗   ✓  
  28. 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    
  29. Spec recap •  Standard build process •  Syntax and encapsulation

    rules •  “Cuts the mustard” for Progressive enhancement •  Semantic versioning (semver)
  30. Registry: publish and find components

  31. 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
  32. None
  33. None
  34. 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”>
  35. A reminder: our objectives •  Consistent brand experience •  “Make

    everything look the same” •  Improve developer productivity •  Do things properly and just once
  36. 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
  37. Thanks for listening. Get in touch with me: o  Email/GChat:

     andrew.beLs@N.com   o  Skype:      triblondon   o  Web:      trib.tv