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
   

   View Slide

2. About me
   •  Head of front end standards
   •  Founded Assanka (2003), acquired
   by FT in 2011
   •  Like: neatness,
   hate: inconsistency.
   

   View Slide

3. View Slide

4. View Slide

5. Network  
   TCP/IP  
   HTTP  
   HTML  
   Components  
   Internal standards
   create a new higher
   level abstraction to
   web development
   

   View Slide

6. Multiple formats
   

   View Slide

7. Better usability
   •  Customers demand
   simpler, easier UI
   •  No longer acceptable to
   just do what’s technically
   easiest
   

   View Slide

8. Expectation of speed
   

   View Slide

9. Problems we had at FT
   •  Repeating work
   •  Unable to let go of old technology
   •  Experts needed everywhere
   •  Square pegs, round holes
   

   View Slide

10. View Slide

11. View Slide

12. Consistent brand experience
    

    View Slide

13. Maximum developer productivity
    

    View Slide

14. Forms
    

    View Slide

15. Header
    

    View Slide

16. Footer
    

    View Slide

17. Grid
    

    View Slide

18. Buttons
    

    View Slide

19. Summary
    Increased
    challenges
    and demands
    Increased
    complexity
    Problems
    

    View Slide

20. What is Origami?
    •  A specification (origami.ft.com)
    •  Tools to help make and use components
    •  Components
    

    View Slide

21. npm install –g
    origami-build-tools
    Standard build process
    

    View Slide

22. View Slide

23. View Slide

24. Syntax and encapsulation (JavaScript)
    •  No globals
    •  Namespace events
    •  No modifying DOM on parse (or outside of
    owned DOM)
    •  ESLint
    

    View Slide

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
    

    View Slide

26. Progressive enhancement (“cuts the mustard”)
    A  simple  test  that  sets  a  movable  threshold  for  running  the  JavaScript  
    

    View Slide

27. if ('querySelector' in document &&
    'localStorage' in window &&
    'addEventListener' in window) { ... }
    ✓  
    ✗   ✓  
    

    View Slide

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  
     
    

    View Slide

29. Spec recap
    •  Standard build process
    •  Syntax and encapsulation rules
    •  “Cuts the mustard” for Progressive enhancement
    •  Semantic versioning (semver)
    

    View Slide

30. Registry: publish and find components
    

    View Slide

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
    

    View Slide

32. View Slide

33. View Slide

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!)
    modules=o-tweet,o-header@^1.3.7,o-forms@2”><br/>

    View Slide

35. A reminder: our objectives
    •  Consistent brand experience
    •  “Make everything look the same”
    •  Improve developer productivity
    •  Do things properly and just once
    

    View Slide

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
    

    View Slide

37. Thanks for listening.
    Get in touch with me:
    o  Email/GChat:  andrew.beLs@N.com  
    o  Skype:      triblondon  
    o  Web:      trib.tv  
    

    View Slide