Can't you make it more like Bootstrap?

Alice Bartlett
Origami Lead, Financial Times
@alicebartlett
Can’t you make it more like
Bootstrap?
Considerations for building front end systems

View Slide

Hello

View Slide

I’m from the
FINANCIAL TIMES

View Slide

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

View Slide

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

View Slide

The Origami team has 2 aims:
1. Unify frontend styles across the FT
2. Reduce time spent repeating work
@alicebartlett

View Slide

Components,
tools and
services
@alicebartlett

View Slide

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

View Slide

http://getbootstrap.com/

View Slide

https://www.lightningdesignsystem.com/

View Slide

https://rizzo.lonelyplanet.com/styleguide/design-elements/colours

View Slide

https://www.futurelearn.com/pattern-library

View Slide

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

View Slide

This is not a talk
about design
systems

View Slide

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

View Slide

THIS IS ABOUT
SOFTWARE

View Slide

FIRST:
FINANCIAL TIMES

View Slide

ft.com

View Slide

This is ft.com

View Slide

This design is
known as
“Falcon”

View Slide

ft.com

View Slide

aboutus.ft.com

View Slide

ftchinese.com

View Slide

The FT has a lot of other sites…
@alicebartlett

View Slide

View Slide

I don’t know how
many frontend
apps the FT has, it’s
that many

View Slide

These designs currently share
little or no code
@alicebartlett

View Slide

Even though many of them have
the same ui design
@alicebartlett

View Slide

@alicebartlett
shared design shared code

View Slide

@alicebartlett
shared design & shared code

View Slide

@alicebartlett
This is the close
button for an
overlay in the
Falcon design

View Slide

button > span (CSS bg)
a (x sign)
a (CSS bg)
a > img

View Slide

@alicebartlett
There are four
different
versions of this
live on FT.com.

View Slide

@alicebartlett
Four different
implementations
of the same
thing

View Slide

And those are things we can
control the design for…
@alicebartlett

View Slide

We have three
different
versions of
the twitter
logo on ft.com

View Slide

THE FT’S SITE IS
CHANGING

View Slide

FT.com

View Slide

next.ft.com

View Slide

This is the opportunity for a
generational shift in the way
we build websites at the FT
@alicebartlett

View Slide

The Origami team has 2 aims:
1. Unify frontend styles across the FT
2. Reduce time spent repeating work
@alicebartlett

View Slide

DOWN WITH
THIS SORT OF
THING
@alicebartlett

View Slide

WHAT’S IN A
COMPONENT SYSTEM?

View Slide

1. Components
2. Tools
3. Documentation
@alicebartlett

View Slide

@alicebartlett
Components

View Slide

@alicebartlett
A component is some combination
of CSS, HTML and JavaScript
.css .html .js

View Slide

@alicebartlett
.css .html .js

View Slide

@alicebartlett
Components Application code Website
.css .html .js
.rb

View Slide

@alicebartlett
Components Websites!
Application code
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb

View Slide

Let’s have a look at an Origami
specific example…
@alicebartlett

View Slide

View Slide

So that’s
ads, header,
icons, date,
fonts, grid, tracking,
colours, buttons

View Slide

There’s a lot of overlap
between Origami, Lonely
Planet’s Rizzo, or FutureLearn’s
pattern library
@alicebartlett

View Slide

@alicebartlett
Tools
Components

View Slide

@alicebartlett
Application code
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb

View Slide

@alicebartlett
Application code
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
QUITE HARD

View Slide

@alicebartlett
Application code
.rb
.rb
.rb
.rb

View Slide

https://www.futurelearn.com/

View Slide


View Slide

@alicebartlett
Application code
.rb
.rb
.rb
.rb

View Slide

@alicebartlett
Website
Components and
Application code
.rb
.rb
.rb
.rb

View Slide

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

View Slide

The best tooling
is no tooling*
@alicebartlett

View Slide

@alicebartlett
Application code
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb

View Slide

@alicebartlett
Application code
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
QUITE HARD

View Slide

@alicebartlett
Now
tooling
becomes
important

View Slide

@alicebartlett
Javascript
CSS
HTML

View Slide

@alicebartlett
Application code
Tools
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb

View Slide

If your sites are using the same
languages…
@alicebartlett

View Slide

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

View Slide

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

View Slide

@alicebartlett
Application code
Tools
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb

View Slide

http://rizzo.lonelyplanet.com/styleguide/

View Slide

$ gem install rizzo
@alicebartlett
Step 1:

View Slide

http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html
// Input
= ui_component("forms/search", {
label: “Search"
})
Step 2:

View Slide

@alicebartlett
✔ Javascript
✔ CSS
✔ HTML

View Slide

// Input
= ui_component("forms/search", {
label: “Search"
})
http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html
This is SO NEAT
Step 2:

View Slide

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

View Slide

@alicebartlett
Application code
Tools
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
BUT WAIT…

View Slide

@alicebartlett
Application code
Tools
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
WHAT IF YOUR CONSUMING
APPLICATIONS AREN’T ALL
IN THE SAME LANGUAGE

View Slide

@alicebartlett
Application code
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
QUITE HARD

View Slide

Option 1: Tools for every
language
@alicebartlett

View Slide

@alicebartlett
Application code
Tools
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.py
.rb
.rb
.rb
.java

View Slide

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

View Slide

Option 2: Lose HTML delivery
@alicebartlett

View Slide

@alicebartlett
✔ Javascript
✔ CSS
✘ HTML

View Slide

You can resolve the distribution
of CSS and JS quite easily…
@alicebartlett

View Slide

<br/>@alicebartlett<br/>

View Slide

Bower, npm
@alicebartlett

View Slide

But templates…
@alicebartlett

View Slide

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

View Slide

You have to tell users to copy
and paste
@alicebartlett

View Slide

This is a really bad idea…
@alicebartlett

View Slide

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

View Slide

You can never change a class
name again
@alicebartlett

View Slide

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

View Slide

You’re duplicating code
@alicebartlett

View Slide

@alicebartlett
Application code
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
NO GOOD OPTIONS

View Slide

1. Build and maintain a tool for
every language
2. Drop HTML distribution
@alicebartlett

View Slide

A terrible
choice

View Slide

Origami uses
copy/paste

View Slide

@alicebartlett
✔ Javascript
✔ CSS
✘ HTML

View Slide

IF ONLY THERE WAS A
SPEC OR SUITE OF
SPECS THAT HANDLED
DISTRIBUTION OF
HTML…

View Slide

Yeah, we’re waiting
for web components

View Slide

@alicebartlett
✔ Javascript
✔ CSS
✘ HTML

View Slide

The Origami Build Service
@alicebartlett

View Slide

It’s basically a CDN
@alicebartlett

View Slide

It’s basically a CDN
OK it’s a bit cleverer than a CDN
@alicebartlett

View Slide

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

View Slide

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

View Slide

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

View Slide

For CSS:
- Concatenates module Sass
- Runs an auto-prefixer across it
- Compiles it
- Minifies it
- Returns it
@alicebartlett

View Slide

For JS:
- Concatenates all module JS
- Babel
- Minifies it
- Returns it
@alicebartlett

View Slide

People love this
@alicebartlett

View Slide

239,318,470
Build Service requests for April 12 - May 12
via Akamai

View Slide

But some people want more
control
@alicebartlett

View Slide

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

View Slide

FT.com has a release cycle of 3
months, they use the Build
Service
@alicebartlett

View Slide

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

View Slide

So we have these awesome tools
that mean, no matter what your
release cycle is, or your tech
stack, you can use Origami
@alicebartlett

View Slide

But that’s not enough.
@alicebartlett

View Slide

@alicebartlett
Docs
Tools
Components

View Slide

FREE MARKET
SOFTWARE
TEAMS

View Slide

… 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

View Slide

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

View Slide

This keeps us pretty focussed
@alicebartlett

View Slide

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

View Slide

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

View Slide

And what people told me was
mostly positive.
@alicebartlett

View Slide

But I did discover one problem.
Our documentation was
confusing people or boring
them
@alicebartlett

View Slide

http://origami.ft.com

View Slide

http://registry.origami.ft.com

View Slide

http://github.com/financial-times/o-gallery

View Slide

HOW THE F**K AM I
SUPPOSED TO FIND
TIME TO READ ALL
OF THIS STUFF?
an anonymous Origami user

View Slide

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

View Slide

http://getbootstrap.com/getting-started/

View Slide

Using Origami is as easy as
pasting a tag into your

@alicebartlett

View Slide

It’s as easy as Bootstrap
@alicebartlett

View Slide

https://www.polymer-project.org/1.0/

View Slide

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

View Slide

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

View Slide

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

View Slide

https://github.com/financial-times/ft-origami

View Slide

Along the same track as
documentation, you’ll find
marketing.
@alicebartlett

View Slide

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

View Slide

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

View Slide

http://getbootstrap.com/

View Slide

https://www.lightningdesignsystem.com/

View Slide


View Slide

Marketing isn’t just pretty
websites
@alicebartlett

View Slide

And at a certain scale, you’ll
need a communications plan for
new releases.
@alicebartlett

View Slide

You should publish your
incident reports
@alicebartlett

View Slide

With free market software
teams, this matters
@alicebartlett

View Slide

Documentation
isn’t complicated.
It’s just hard.

View Slide

People won’t ﬁght
you, they’ll just
ignore you

View Slide

Conclusion:
1. Components at the centre
2. Make the simplest tool for the
job (maybe no tools at all!)
3. Care for your documentation
@alicebartlett

View Slide

Alice Bartlett
Origami Lead, Financial Times
@alicebartlett
Thanks

View Slide

Can't you make it more like Bootstrap?

Can't you make it more like Bootstrap?

Alice Bartlett

More Decks by Alice Bartlett

Other Decks in Technology

Featured

Transcript