Alice Bartlett
Senior Developer, Financial Times
@alicebartlett
Can’t you make it
more like Bootstrap?
Slide 2
Slide 2 text
@alicebartlett
Hey!
Slide 3
Slide 3 text
Photo credit: Nicky Wrightson
I’m from
the
Slide 4
Slide 4 text
I lead a project at the FT
called Origami.
@alicebartlett
Slide 5
Slide 5 text
Origami is a 4 person team who
develop frontend tools and
services at the FT
@alicebartlett
Slide 6
Slide 6 text
@alicebartlett
Team aims
1. Reduce time spent repeating work
2. Unify design across the FT
Slide 7
Slide 7 text
Components,
tools and
services
@alicebartlett
Slide 8
Slide 8 text
There are lots of companies that
have projects similar to Origami.
@alicebartlett
Slide 9
Slide 9 text
http://http://getbootstrap.com/
Slide 10
Slide 10 text
http://carbondesignsystem.com/
Slide 11
Slide 11 text
http://rizzo.lonelyplanet.com/styleguide
Slide 12
Slide 12 text
https://www.futurelearn.com/
Slide 13
Slide 13 text
Today I’m going to talk about
Origami and some of these
projects too
@alicebartlett
Slide 14
Slide 14 text
@alicebartlett
This is not a talk about
design systems
Slide 15
Slide 15 text
This is about what you build
once you have your design
system
@alicebartlett
Slide 16
Slide 16 text
FIRST:
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
But it has a lot of other
businesses too
@alicebartlett
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Teams all over the world
Some are built in-house
Some are built by agencies
Some are actively maintained
Some aren’t
@alicebartlett
Slide 28
Slide 28 text
@alicebartlett
The FT has about 250
sites or micro-sites
Slide 29
Slide 29 text
Managing this complexity and
keeping all of these sites aligned
is what we use Origami for.
@alicebartlett
@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
Slide 39
Slide 39 text
@alicebartlett
“ What tools are useful to
developers that designers
don’t have? ”
// Input
= ui_component("forms/search", {
label: “Search"
})
@alicebartlett
Step 2:
This is SO TIDY
Slide 72
Slide 72 text
This is also how GOV.UK’s
components system works.
(Inspired by Rizzo!)
@alicebartlett
Slide 73
Slide 73 text
@alicebartlett
Components Websites!
Application
code
HTML
HTML
HTML
RB
HTML
HTML
HTML
RB
HTML
HTML
HTML
RB
Template
resolution
BUT …
Slide 74
Slide 74 text
@alicebartlett
Components Websites!
Application
code
HTML
HTML
HTML
RB
HTML
HTML
HTML
RB
HTML
HTML
HTML
RB
Template
resolution
THIS DOESN’T
SCALE
Slide 75
Slide 75 text
@alicebartlett
Components Websites!
Application code
HTML
HTML
HTML
RB
HTML
HTML
HTML
RB
HTML
HTML
HTML
RB
QUITE HARD
Slide 76
Slide 76 text
Option 1: Template resolution for
every language
@alicebartlett
Slide 77
Slide 77 text
@alicebartlett
Components Websites!
Application
code
HTML
HTML
HTML
RB
HTML
HTML
HTML
PY
HTML
HTML
HTML
PHP
Template
resolution
…
Slide 78
Slide 78 text
Maintaining a toolset like this is
a lot of work…
@alicebartlett
Slide 79
Slide 79 text
Option 2: no templating
@alicebartlett
Slide 80
Slide 80 text
HTML
Javascript
CSS
@alicebartlett
Slide 81
Slide 81 text
There is no good way to let
people include (customisable)
templates in their projects
@alicebartlett
Slide 82
Slide 82 text
You have to tell users to copy
and paste
@alicebartlett
Slide 83
Slide 83 text
This is a really bad idea…
@alicebartlett
Slide 84
Slide 84 text
People leave off or remove
things they don’t understand:
ARIA attributes, microformats
@alicebartlett
Slide 85
Slide 85 text
You can never change a class
name again
@alicebartlett
Slide 86
Slide 86 text
You can’t automatically push out
changes to components
@alicebartlett
Slide 87
Slide 87 text
You’re duplicating code
@alicebartlett
Slide 88
Slide 88 text
@alicebartlett
Components Websites!
Application code
HTML
HTML
HTML
RB
HTML
HTML
HTML
RB
HTML
HTML
HTML
RB
NO GOOD OPTIONS
Slide 89
Slide 89 text
@alicebartlett
Origami uses copy/paste
Slide 90
Slide 90 text
@alicebartlett
HTML
Javascript
CSS
Slide 91
Slide 91 text
• Pick and stick to a CSS naming convention
(we use BEM)
@alicebartlett
Slide 92
Slide 92 text
• Pick and stick to a CSS naming convention
(we use BEM)
• Get really good at understanding and
resolving dependency problems
@alicebartlett
Slide 93
Slide 93 text
Getting JS and CSS to people
is much easier
@alicebartlett
Slide 94
Slide 94 text
1. Boasting
2. thing
3. thing
4. thing
Slide 95
Slide 95 text
The Build Service takes any
combination of modules and
returns their CSS or JavaScript
@alicebartlett
Slide 96
Slide 96 text
@alicebartlett
Slide 97
Slide 97 text
@alicebartlett
Slide 98
Slide 98 text
We can push minor version
changes to components
directly to the page
@alicebartlett
Slide 99
Slide 99 text
• Concatenates module Sass
• Runs an auto-prefixer across it
• Compiles
• Minifies
• Returns
@alicebartlett
Sass / CSS
Slide 100
Slide 100 text
• Concatenates all module JS
• Babel
• Minifies it
• Returns it
@alicebartlett
JavaScript
Slide 101
Slide 101 text
4.3 Million
Build Service requests (edge) for per day
via Splunk
Slide 102
Slide 102 text
This is a bit clunky for some of our
developers
@alicebartlett
Slide 103
Slide 103 text
• No critical path rendering
@alicebartlett
Slide 104
Slide 104 text
• No critical path rendering
• Have to download more than they really
need (especially for Sass)
@alicebartlett
Slide 105
Slide 105 text
• No critical path rendering
• Have to download more than they really
need (especially for Sass)
• Have to use our classnames
@alicebartlett
Slide 106
Slide 106 text
We took the code behind the
Build Service, and made it an npm
package called Origami Build
Tools
@alicebartlett
Slide 107
Slide 107 text
Both of these approaches are
application language agnostic
@alicebartlett
Slide 108
Slide 108 text
http://mma.ft.com
Slide 109
Slide 109 text
http://mma.ft.com
Sites like this can use the build
service
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
ft.com want a lot more control
over their build process, they can
use Origami Build Tools
Slide 112
Slide 112 text
@alicebartlett
The CDN and Build Tools give
us enough flexibility that
anyone making a site at
the FT can use
Origami
Slide 113
Slide 113 text
But that’s not enough.
@alicebartlett
Slide 114
Slide 114 text
@alicebartlett
Documentation,
marketing and support
Slide 115
Slide 115 text
“FREE MARKET
SOFTWARE
TEAMS”
Slide 116
Slide 116 text
“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
Slide 117
Slide 117 text
Origami is competing with any
other tool, or the option to not
use Origami at all.
@alicebartlett
Slide 118
Slide 118 text
It’s important we keep focussed
on this
@alicebartlett
Slide 119
Slide 119 text
When I joined the FT, I did some
user research on Origami
@alicebartlett
Slide 120
Slide 120 text
I interviewed people around the
FT: developers, designers and
journalists, product managers
@alicebartlett
Slide 121
Slide 121 text
I discovered one problem. Our
documentation was boring and
confusing
@alicebartlett
Slide 122
Slide 122 text
http://origami.ft.com
Slide 123
Slide 123 text
http://registry.orgiami.ft.com
Slide 124
Slide 124 text
https://github.com/financial-times/o-gallery
Slide 125
Slide 125 text
“HOW THE [HECK] AM I
SUPPOSED TO FIND TIME
TO READ ALL OF THIS
STUFF?”
an anonymous Origami user
Slide 126
Slide 126 text
an anonymous Origami user
“I wish this was just more
like bootstrap’s
documentation”
Slide 127
Slide 127 text
http://http://getbootstrap.com/
Slide 128
Slide 128 text
Using Origami is as easy as
pasting a tag into your
@alicebartlett
Slide 129
Slide 129 text
It’s as easy as Bootstrap
@alicebartlett
Slide 130
Slide 130 text
We re-wrote our documentation
using the principles used to
write Django’s docs
@alicebartlett
Slide 131
Slide 131 text
https://jacobian.org/writing/great-documentation/
Slide 132
Slide 132 text
We have a documentation style
guide, just like we have guides
for JavaScript and Sass
@alicebartlett
Slide 133
Slide 133 text
https://github.com/financial-times/ft-origami
Slide 134
Slide 134 text
@alicebartlett
Documentation isn’t
complicated, it’s just
hard.
Slide 135
Slide 135 text
Marketing is also
extremely important
@alicebartlett
Slide 136
Slide 136 text
Marketing is how you convince
people to use your stuff without
them having to think too hard
about it
@alicebartlett
Slide 137
Slide 137 text
The amount of marketing you
have to do should scale with the
number of users you have (or
want)
@alicebartlett
Slide 138
Slide 138 text
1. Boasting
2. thing
3. thing
4. thing
Slide 139
Slide 139 text
1. Boasting
2. thing
3. thing
4. thing
Slide 140
Slide 140 text
Marketing isn’t just pretty
websites
@alicebartlett
Slide 141
Slide 141 text
And at some point, you’ll need a
comms plan for new releases to
your components system
@alicebartlett
Slide 142
Slide 142 text
You should publish your
incident reports
@alicebartlett
Slide 143
Slide 143 text
You should have a
support channel
@alicebartlett
Slide 144
Slide 144 text
With free market software
teams, this matters
@alicebartlett
Slide 145
Slide 145 text
With free market software
teams, this is as important as the
code you’re writing
@alicebartlett
Slide 146
Slide 146 text
@alicebartlett
“People won’t fight you,
they’ll just ignore you”
Slide 147
Slide 147 text
@alicebartlett
Summary
1. Components at the centre
Slide 148
Slide 148 text
@alicebartlett
Summary
1. Components at the centre
2. Make the simplest tool for the job (maybe
no tools at all!)
Slide 149
Slide 149 text
@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 stuff
Slide 150
Slide 150 text
Alice Bartlett
Senior Developer, Financial Times
@alicebartlett
FIN!