Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Can't you make it more like Bootstrap? (CASCADI...
Search
Alice Bartlett
August 03, 2016
Technology
1
1.1k
Can't you make it more like Bootstrap? (CASCADIA CONF)
A talk given at Cascadia 2016.
Video is here:
https://youtu.be/LAVNOQroZYA
Alice Bartlett
August 03, 2016
Tweet
Share
More Decks by Alice Bartlett
See All by Alice Bartlett
The Journey of a Byline
alicebartlett
0
160
Getting more from Git
alicebartlett
0
1k
Writing for developers workshop
alicebartlett
1
190
presentations_ft.pdf
alicebartlett
1
310
All Day Hey! - Can't you make it more like bootstrap?
alicebartlett
2
2k
Case study on the FT's Responsive Image Service
alicebartlett
0
500
Git for Humans
alicebartlett
66
33k
FT Accessibility 101
alicebartlett
2
580
Can't you make it more like Bootstrap?
alicebartlett
1
430
Other Decks in Technology
See All in Technology
福岡新卒エンジニアの会
teba_eleven
1
180
エンジニア候補者向け資料2024.11.07.pdf
macloud
0
4.5k
マルチモーダルデータ基盤の課題と観点
neonankiti
1
110
製造現場のデジタル化における課題とPLC Data to Cloudによる新しいアプローチ
hamadakoji
0
190
Fargateを使った研修の話
takesection
0
170
Lambdaと地方とコミュニティ
miu_crescent
1
130
コンテナのトラブルシューティング目線から AWS SAW についてしゃべってみる
kazzpapa3
1
120
TinyGoを使ったVSCode拡張機能実装
askua
2
200
20241108_CS_LLMMT
shigashiyama
0
240
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
2
790
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
3
170
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
2
130
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
A Modern Web Designer's Workflow
chriscoyier
693
190k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Statistics for Hackers
jakevdp
796
220k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
4 Signs Your Business is Dying
shpigford
180
21k
Building Adaptive Systems
keathley
38
2.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Transcript
Alice Bartlett Origami Lead, Financial Times @alicebartlett Can’t you make
it more like Bootstrap? Considerations for building front end systems
Hello
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
None
None
https://www.ftnewspaper.com/cgi-bin/ftusa.cgi/mms/1Y71CtEN9NfpRH1tJYYUkqPzPI97t1Fw/showLoginPage
ig.ft.com
None
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
None
None
None
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
@alicebartlett Components Websites! Application code .rb .rb .rb .rb .css
.css .css .rb .css .css .css .rb .css .css .css .rb … …
@alicebartlett Components Websites! Application code .rb .rb .rb .rb .css
.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/
https://www.futurelearn.com/pattern-library
@alicebartlett Components Websites! Application code .css .css .css .rb
@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
@alicebartlett Components Websites! Application code .rb .rb .rb .rb .css
.css .css .rb .css .css .css .rb .css .css .css .rb
@alicebartlett Components Websites! Application code .rb .rb .rb .rb .css
.css .css .rb .css .css .css .rb .css .css .css .rb QUITE HARD
@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
@alicebartlett Components Websites! Application code Tools .css .css .css .rb
.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:
@alicebartlett Javascript CSS HTML
// 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
@alicebartlett Components Websites! Application code Tools .css .css .css .rb
.css .css .css .rb .css .css .css .rb BUT …
@alicebartlett Components Websites! Application code Tools .css .css .css .rb
.css .css .css .rb .css .css .css .rb THIS IS ONLY USEFUL IF YOUR APPLICATION IS WRITTEN IN RUBY
@alicebartlett Components Websites! Application code .rb .rb .rb .rb .css
.css .css .rb .css .css .css .rb .css .css .css .rb QUITE HARD
Option 1: Template resolution for every language @alicebartlett
@alicebartlett Components Websites! Application code Tools .css .css .css .rb
.css .css .css .py .css .css .css .java …
Maintaining a toolset like this is a lot of work…
@alicebartlett
Option 2: no templating @alicebartlett
@alicebartlett Javascript CSS HTML
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
@alicebartlett Components Websites! Application code .rb .rb .rb .rb .css
.css .css .rb .css .css .css .rb .css .css .css .rb NO GOOD OPTIONS
Origami uses copy/ paste
@alicebartlett Javascript CSS HTML
• 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
@alicebartlett Javascript CSS HTML
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/
https://www.futurelearn.com/pattern-library
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 fight 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
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
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