All Day Hey! - Can't you make it more like bootstrap?

Alice Bartlett Senior Developer, Financial Times @alicebartlett Can’t you make
it more like Bootstrap?

@alicebartlett Hey!

Photo credit: Nicky Wrightson I’m from the

I lead a project at the FT called Origami. @alicebartlett

Origami is a 4 person team who develop frontend tools
and services at the FT @alicebartlett

@alicebartlett Team aims 1. Reduce time spent repeating work 2.
Unify design across the FT

Components, tools and services @alicebartlett

There are lots of companies that have projects similar to
Origami. @alicebartlett

http://http://getbootstrap.com/

http://carbondesignsystem.com/

http://rizzo.lonelyplanet.com/styleguide

https://www.futurelearn.com/

Today I’m going to talk about Origami and some of
these projects too @alicebartlett

@alicebartlett This is not a talk about design systems

This is about what you build once you have your
design system @alicebartlett

FIRST:

But it has a lot of other businesses too @alicebartlett

universe slide SUE FT SOLAR SYSTEM NESTED BRANDS (Life&Arts) TOOLS
& SERVICES (Knowledge Manager Tools) SUB BRANDS (FT Advisor) BRANDED BUSINESSES (Investors Chronicle) MASTERBRAND FT.com

Teams all over the world Some are built in-house Some
are built by agencies Some are actively maintained Some aren’t @alicebartlett

@alicebartlett The FT has about 250 sites or micro-sites

Managing this complexity and keeping all of these sites aligned
is what we use Origami for. @alicebartlett

@alicebartlett shared design shared code

@alicebartlett shared design & shared code

WHAT’S IN A COMPONENT SYSTEM?

1. Components 2. Tools 3. Documentation @alicebartlett

@alicebartlett Components

@alicebartlett HTML JS CSS

@alicebartlett o-header

@alicebartlett o-buttons

@alicebartlett o-teaser AN HOUR AGO The British government will learn
about the limits of control in an open economy Renho Murata aims to breathe new life into Japan’s opposition Japan Politics AN HOUR AGO The British government will learn about the limits of control in an open economy Renho Murata aims to breathe new life into Japan’s opposition Japan Politics AN HOUR AGO Healthy competition between parties is best tonic for US America needs a bipartisan approach for economic recovery Eric Cantor

@alicebartlett “ What tools are useful to developers that designers don’t
have? ”

@alicebartlett

@alicebartlett ads, header, icons, date, fonts, grid, tracking, colours, buttons

@alicebartlett Over ~5 years, Origami has grown to over 50
components

Each of these components are in their own repo, and
have their own version number @alicebartlett

http://registry.orgiami.ft.com

@alicebartlett Components Websites! Application code HTML HTML HTML RB HTML
HTML HTML RB HTML HTML HTML RB

Most components systems look kind of the same. Origami, Rizzo,
Carbon, Lightning all have pretty much the same components @alicebartlett

Where they diﬀer is in the tooling @alicebartlett

@alicebartlett Tools

HTML HTML RB HTML HTML HTML RB QUITE HARD

@alicebartlett Components Website Application code HTML JS CSS RB

@alicebartlett Components Website Application code HTML JS CSS RB (Mono-repo)

This is the simplest way to use an abstracted design
system in your product. @alicebartlett

The best tooling is no tooling @alicebartlett

@alicebartlett Now you need to build some tools

@alicebartlett - HTML - Javascript - CSS

Templates are the diﬀicult part @alicebartlett

If your sites are using the same languages… @alicebartlett

Then you can just make your system work for that
stack. @alicebartlett

If your sites use ruby, then a gem is an
excellent way to deal with this problem @alicebartlett

HTML HTML RB HTML HTML HTML RB Template resolution

1. Boasting 2. thing 3. thing 4. thing

$ gem install rizzo @alicebartlett Step 1:

// Input = ui_component("forms/search", { label: “Search" }) @alicebartlett Step
2:

@alicebartlett HTML Javascript CSS

// Input = ui_component("forms/search", { label: “Search" }) @alicebartlett Step
2: This is SO TIDY

This is also how GOV.UK’s components system works. (Inspired by
Rizzo!) @alicebartlett

HTML HTML RB HTML HTML HTML RB Template resolution BUT …

HTML HTML RB HTML HTML HTML RB Template resolution THIS DOESN’T SCALE

Option 1: Template resolution for every language @alicebartlett

HTML HTML PY HTML HTML HTML PHP Template resolution …

Maintaining a toolset like this is a lot of work…
@alicebartlett

Option 2: no templating @alicebartlett

HTML Javascript CSS @alicebartlett

There is no good way to let people include (customisable)
templates in their projects @alicebartlett

You have to tell users to copy and paste @alicebartlett

This is a really bad idea… @alicebartlett

People leave oﬀ or remove things they don’t understand: ARIA
attributes, microformats @alicebartlett

You can never change a class name again @alicebartlett

You can’t automatically push out changes to components @alicebartlett

You’re duplicating code @alicebartlett

HTML HTML RB HTML HTML HTML RB NO GOOD OPTIONS

@alicebartlett Origami uses copy/paste

@alicebartlett HTML Javascript CSS

• Pick and stick to a CSS naming convention (we
use BEM) @alicebartlett

• Pick and stick to a CSS naming convention (we
use BEM) • Get really good at understanding and resolving dependency problems @alicebartlett

Getting JS and CSS to people is much easier @alicebartlett

The Build Service takes any combination of modules and returns
their CSS or JavaScript @alicebartlett

@alicebartlett <link rel="stylesheet" href="https://origami-build.ft.com/v2/bundles/ css?modules=o-grid@^4.0.0,o-fonts@^1.4.0" />

We can push minor version changes to components directly to
the page @alicebartlett

• Concatenates module Sass • Runs an auto-preﬁxer across it
• Compiles • Miniﬁes • Returns @alicebartlett Sass / CSS

• Concatenates all module JS • Babel • Miniﬁes it
• Returns it @alicebartlett JavaScript

4.3 Million Build Service requests (edge) for per day via
Splunk

This is a bit clunky for some of our developers
@alicebartlett

• No critical path rendering @alicebartlett

• No critical path rendering • Have to download more
than they really need (especially for Sass) @alicebartlett

• No critical path rendering • Have to download more
than they really need (especially for Sass) • Have to use our classnames @alicebartlett

We took the code behind the Build Service, and made
it an npm package called Origami Build Tools @alicebartlett

Both of these approaches are application language agnostic @alicebartlett

http://mma.ft.com

http://mma.ft.com Sites like this can use the build service

ft.com want a lot more control over their build process,
they can use Origami Build Tools

@alicebartlett The CDN and Build Tools give us enough ﬂexibility
that anyone making a site at the FT can use Origami

But that’s not enough. @alicebartlett

@alicebartlett Documentation, marketing and support

“FREE MARKET SOFTWARE TEAMS”

“teams are allowed and encouraged to pick the best value
tools for the job at hand, be they things developed and supported by internal teams or external to the company” Matt Chadburn, Principal Developer http://matt.chadburn.co.uk/notes/teams-as-services.html

Origami is competing with any other tool, or the option
to not use Origami at all. @alicebartlett

It’s important we keep focussed on this @alicebartlett

When I joined the FT, I did some user research
on Origami @alicebartlett

I interviewed people around the FT: developers, designers and journalists,
product managers @alicebartlett

I discovered one problem. Our documentation was boring and confusing
@alicebartlett

http://origami.ft.com

http://registry.orgiami.ft.com

https://github.com/ﬁnancial-times/o-gallery

“HOW THE [HECK] AM I SUPPOSED TO FIND TIME TO
READ ALL OF THIS STUFF?” an anonymous Origami user

an anonymous Origami user “I wish this was just more
like bootstrap’s documentation”

http://http://getbootstrap.com/

Using Origami is as easy as pasting a <link> tag
into your <head> @alicebartlett

It’s as easy as Bootstrap @alicebartlett

We re-wrote our documentation using the principles used to write
Django’s docs @alicebartlett

https://jacobian.org/writing/great-documentation/

We have a documentation style guide, just like we have
guides for JavaScript and Sass @alicebartlett

https://github.com/ﬁnancial-times/ft-origami

@alicebartlett Documentation isn’t complicated, it’s just hard.

Marketing is also extremely important @alicebartlett

Marketing is how you convince people to use your stuﬀ
without them having to think too hard about it @alicebartlett

The amount of marketing you have to do should scale
with the number of users you have (or want) @alicebartlett

Marketing isn’t just pretty websites @alicebartlett

And at some point, you’ll need a comms plan for
new releases to your components system @alicebartlett

You should publish your incident reports @alicebartlett

You should have a support channel @alicebartlett

With free market software teams, this matters @alicebartlett

With free market software teams, this is as important as
the code you’re writing @alicebartlett

@alicebartlett “People won’t ﬁght you, they’ll just ignore you”

@alicebartlett Summary 1. Components at the centre

@alicebartlett Summary 1. Components at the centre 2. Make the
simplest tool for the job (maybe no tools at all!)

@alicebartlett Summary 1. Components at the centre 2. Make the
simplest tool for the job (maybe no tools at all!) 3. Don’t forget the other stuﬀ

Alice Bartlett Senior Developer, Financial Times @alicebartlett FIN!

All Day Hey! - Can't you make it more like bootstrap?

All Day Hey! - Can't you make it more like bootstrap?

More Decks by Alice Bartlett

Other Decks in Technology

Featured

Transcript