Can't you make it more like Bootstrap? (CASCADIA CONF)

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

I’m from the FINANCIAL TIMES

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

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

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

Components, tools and services @alicebartlett

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

http://getbootstrap.com/

https://www.lightningdesignsystem.com/

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

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

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

This is not a talk about design systems

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

FIRST: FINANCIAL TIMES

The FT has a lot of websites @alicebartlett

FT.com

aboutus.ft.com

ftchinese.com

@alicebartlett FT.com is the main website, then there’s a lonnnnnng
tail of other stuff

https://www.ftnewspaper.com/cgi-bin/ftusa.cgi/mms/1Y71CtEN9NfpRH1tJYYUkqPzPI97t1Fw/showLoginPage

ig.ft.com

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

Many of these sites share similar designs, but have no
shared code @alicebartlett

@alicebartlett shared design shared code

@alicebartlett shared design & shared code

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

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

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

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

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

Currently: A chaotic trail of salmon pink websites @alicebartlett

THE FT’S SITE IS CHANGING

FT.com

next.ft.com

This means that a lot of those other 88 websites
have an incentive to update @alicebartlett

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

LESS OF THIS SORT OF THING @alicebartlett

WHAT’S IN A COMPONENT SYSTEM?

1. Components 2. Tools 3. The other stuff @alicebartlett

@alicebartlett COMPONENTS COMPONENTS

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

@alicebartlett .js .html .css

@alicebartlett .js .html .css (o-header)

@alicebartlett .js .html .css (o-buttons)

@alicebartlett .js .html .css (o-video)

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

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

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

atomic design, mono-repo vs single repo, how we’re using Sass
mixins, dependency management, progressive enhancement, design language… @alicebartlett

All you need to know for this talk is that
these components exist, and the next question is: how are our developers going to get them into their projects? @alicebartlett

@alicebartlett TOOLS COMPONENTS COMPONENTS

.css .css .rb .css .css .css .rb .css .css .css .rb … …

.css .css .rb .css .css .css .rb .css .css .css .rb QUITE HARD

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

https://www.futurelearn.com/

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

@alicebartlett Website Components and Application code .css .css .css .rb
.css .css .css mono-repo

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

The best tooling is no tooling* @alicebartlett

.css .css .rb .css .css .css .rb .css .css .css .rb

@alicebartlett Now tooling becomes important

@alicebartlett Javascript CSS HTML

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

Templates are the difficult 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

.css .css .css .rb .css .css .css .rb

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

$ gem install rizzo @alicebartlett Step 1:

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

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

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

.css .css .css .rb .css .css .css .rb BUT …

.css .css .css .rb .css .css .css .rb THIS IS ONLY USEFUL IF YOUR APPLICATION IS WRITTEN IN RUBY

Option 1: Template resolution for every language @alicebartlett

.css .css .css .py .css .css .css .java …

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

Option 2: no templating @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 off 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

.css .css .rb .css .css .css .rb .css .css .css .rb NO GOOD OPTIONS

Origami uses copy/ paste

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

Web Components might help us a bit here Alice Bartlett
http://somewebsite.com

Adam Onishi has looked at how we could use bits
of the Web Components spec https://speakerdeck.com/onishiweb/ planes-trains-and-css-components @alicebartlett

Assets are the easy part @alicebartlett

http://origami-build.ft.com/

The Build Service takes any combination of modules and returns
their CSS and 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

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

This is a bit clunky for some of our developers
@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

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

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

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

But that’s not enough. @alicebartlett

@alicebartlett DOCS… MARKETING … SUPPORT TOOLS COMPONENTS

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

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

This keeps us pretty focussed @alicebartlett

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

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

What people told me was mostly positive @alicebartlett

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

http://origami.ft.com

http://registry.origami.ft.com

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

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

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

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

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/financial-times/ft-origami

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

Marketing is also extremely important @alicebartlett

Marketing is how you convince people to use your stuff
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

http://getbootstrap.com/

https://www.lightningdesignsystem.com/

Marketing isn’t just pretty websites @alicebartlett

And at a certain scale, you’ll need a communications 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 to
the success of your project as the code you’re writing @alicebartlett

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

Conclusion: 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 @alicebartlett

Alice Bartlett Origami Lead, Financial Times @alicebartlett Thanks @alicebartlett

Can't you make it more like Bootstrap? (CASCADI...

Can't you make it more like Bootstrap? (CASCADIA CONF)

More Decks by Alice Bartlett

Other Decks in Technology

Featured

Transcript