Building a reusable component system at the FT

Transcript

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