// Input
= ui_component("forms/search", {
label: “Search"
})
http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html
This is SO NEAT
Step 2:
Slide 82
Slide 82 text
This is also how GOV.UK’s
component’s system works.
(Inspired by Rizzo!)
@alicebartlett
@alicebartlett
Components Websites!
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
Maintaining a toolset like this is
a lot of work…
@alicebartlett
Slide 89
Slide 89 text
Option 2: Lose HTML delivery
@alicebartlett
Slide 90
Slide 90 text
@alicebartlett
✔ Javascript
✔ CSS
✘ HTML
Slide 91
Slide 91 text
You can resolve the distribution
of CSS and JS quite easily…
@alicebartlett
Slide 92
Slide 92 text
@alicebartlett
Slide 93
Slide 93 text
Bower, npm
@alicebartlett
Slide 94
Slide 94 text
But templates…
@alicebartlett
Slide 95
Slide 95 text
There is no good way to let
people include (customisable)
templates in their projects
@alicebartlett
Slide 96
Slide 96 text
You have to tell users to copy
and paste
@alicebartlett
Slide 97
Slide 97 text
This is a really bad idea…
@alicebartlett
Slide 98
Slide 98 text
People leave off or remove
things they don’t understand,
ARIA attributes, microformats
@alicebartlett
Slide 99
Slide 99 text
You can never change a class
name again
@alicebartlett
Slide 100
Slide 100 text
You can’t automatically push
out changes to components
@alicebartlett
Slide 101
Slide 101 text
You’re duplicating code
@alicebartlett
Slide 102
Slide 102 text
@alicebartlett
Components Websites!
Application code
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
.rb
NO GOOD OPTIONS
Slide 103
Slide 103 text
1. Build and maintain a tool for
every language
2. Drop HTML distribution
@alicebartlett
Slide 104
Slide 104 text
A terrible
choice
Slide 105
Slide 105 text
Origami uses
copy/paste
Slide 106
Slide 106 text
@alicebartlett
✔ Javascript
✔ CSS
✘ HTML
Slide 107
Slide 107 text
IF ONLY THERE WAS A
SPEC OR SUITE OF
SPECS THAT HANDLED
DISTRIBUTION OF
HTML…
Slide 108
Slide 108 text
Yeah, we’re waiting
for web components
Slide 109
Slide 109 text
@alicebartlett
✔ Javascript
✔ CSS
✘ HTML
Slide 110
Slide 110 text
The Origami Build Service
@alicebartlett
Slide 111
Slide 111 text
It’s basically a CDN
@alicebartlett
Slide 112
Slide 112 text
It’s basically a CDN
OK it’s a bit cleverer than a CDN
@alicebartlett
Slide 113
Slide 113 text
@alicebartlett
Slide 114
Slide 114 text
@alicebartlett
Slide 115
Slide 115 text
@alicebartlett
Slide 116
Slide 116 text
@alicebartlett
Slide 117
Slide 117 text
The Build Service takes any
combination of modules and
returns their CSS and
JavaScript
@alicebartlett
Slide 118
Slide 118 text
For CSS:
- Concatenates module Sass
- Runs an auto-prefixer across it
- Compiles it
- Minifies it
- Returns it
@alicebartlett
Slide 119
Slide 119 text
For JS:
- Concatenates all module JS
- Babel
- Minifies it
- Returns it
@alicebartlett
Slide 120
Slide 120 text
People love this
@alicebartlett
Slide 121
Slide 121 text
239,318,470
Build Service requests for April 12 - May 12
via Akamai
Slide 122
Slide 122 text
But some people want more
control
@alicebartlett
Slide 123
Slide 123 text
We took the code behind the
Build Service, and made it an
npm package called Origami
Build Tools
@alicebartlett
Slide 124
Slide 124 text
FT.com has a release cycle of 3
months, they use the Build
Service
@alicebartlett
Slide 125
Slide 125 text
next.ft.com want a lot more
control over their build process,
they use Origami Build Tools
@alicebartlett
Slide 126
Slide 126 text
So we have these awesome tools
that mean, no matter what your
release cycle is, or your tech
stack, you can use Origami
@alicebartlett
Slide 127
Slide 127 text
But that’s not enough.
@alicebartlett
Slide 128
Slide 128 text
@alicebartlett
Docs
Tools
Components
Slide 129
Slide 129 text
FREE MARKET
SOFTWARE
TEAMS
Slide 130
Slide 130 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 131
Slide 131 text
So Origami is competing with
any other tool, or the option to
not use Origami at all.
@alicebartlett
Slide 132
Slide 132 text
This keeps us pretty focussed
@alicebartlett
Slide 133
Slide 133 text
When I joined the FT in October,
I did some user research on
Origami
@alicebartlett
Slide 134
Slide 134 text
I interviewed people around the
business, developers, designers
and journalists, product
managers
@alicebartlett
Slide 135
Slide 135 text
And what people told me was
mostly positive.
@alicebartlett
Slide 136
Slide 136 text
But I did discover one problem.
Our documentation was
confusing people or boring
them
@alicebartlett
Slide 137
Slide 137 text
http://origami.ft.com
Slide 138
Slide 138 text
http://registry.origami.ft.com
Slide 139
Slide 139 text
http://github.com/financial-times/o-gallery
Slide 140
Slide 140 text
HOW THE F**K AM I
SUPPOSED TO FIND
TIME TO READ ALL
OF THIS STUFF?
an anonymous Origami user
Slide 141
Slide 141 text
I wish this was just
more like bootstrap’s
documentation
an anonymous Origami user
Slide 142
Slide 142 text
http://getbootstrap.com/getting-started/
Slide 143
Slide 143 text
Using Origami is as easy as
pasting a tag into your
@alicebartlett
Slide 144
Slide 144 text
It’s as easy as Bootstrap
@alicebartlett
Slide 145
Slide 145 text
https://www.polymer-project.org/1.0/
Slide 146
Slide 146 text
We re-wrote our documentation
using the principles used to
write Django’s docs
@alicebartlett
Slide 147
Slide 147 text
https://jacobian.org/writing/great-documentation/
Slide 148
Slide 148 text
We have a documentation style
guide, just like we have guides
for JavaScript and Sass
@alicebartlett
Slide 149
Slide 149 text
https://github.com/financial-times/ft-origami
Slide 150
Slide 150 text
Along the same track as
documentation, you’ll find
marketing.
@alicebartlett
Slide 151
Slide 151 text
Marketing is how you convince
people to use your stuff without
them having to think too hard
about it
@alicebartlett
Slide 152
Slide 152 text
The amount of marketing you
have to do should scale with the
number of users you have (or
want)
@alicebartlett
Slide 153
Slide 153 text
http://getbootstrap.com/
Slide 154
Slide 154 text
https://www.lightningdesignsystem.com/
Slide 155
Slide 155 text
https://www.futurelearn.com/pattern-library
Slide 156
Slide 156 text
Marketing isn’t just pretty
websites
@alicebartlett
Slide 157
Slide 157 text
And at a certain scale, you’ll
need a communications plan for
new releases.
@alicebartlett
Slide 158
Slide 158 text
You should publish your
incident reports
@alicebartlett
Slide 159
Slide 159 text
With free market software
teams, this matters
@alicebartlett
Slide 160
Slide 160 text
Documentation
isn’t complicated.
It’s just hard.
Slide 161
Slide 161 text
People won’t fight
you, they’ll just
ignore you
Slide 162
Slide 162 text
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
Slide 163
Slide 163 text
Alice Bartlett
Origami Lead, Financial Times
@alicebartlett
Thanks