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
Tweet

More Decks by Andrew Betts

Other Decks in Technology

Transcript

  1. Building a reusable web
    component system at the FT
    Andrew Betts
    Nikkei meetup
    24 March 2016

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Multiple formats

    View full-size slide

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

    View full-size slide

  6. Expectation of speed

    View full-size slide

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

    View full-size slide

  8. Consistent brand experience

    View full-size slide

  9. Maximum developer productivity

    View full-size slide

  10. Summary
    Increased
    challenges
    and demands
    Increased
    complexity
    Problems

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 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 full-size slide

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

    View full-size slide

  19. Registry: publish and find components

    View full-size slide

  20. 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 full-size slide

  21. 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 full-size slide

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

    View full-size slide

  23. 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 full-size slide

  24. Thanks for listening.
    Get in touch with me:
    o  Email/GChat:  [email protected]  
    o  Skype:      triblondon  
    o  Web:      trib.tv  

    View full-size slide