Building a reusable component system at the FT

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Multiple formats

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Expectation of speed

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Consistent brand experience

Slide 13

Slide 13 text

Maximum developer productivity

Slide 14

Slide 14 text

Forms

Slide 15

Slide 15 text

Header

Slide 16

Slide 16 text

Footer

Slide 17

Slide 17 text

Grid

Slide 18

Slide 18 text

Buttons

Slide 19

Slide 19 text

Summary Increased challenges and demands Increased complexity Problems

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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 ﬁxing bugs

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Registry: publish and find components

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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!)

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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