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
180
Getting more from Git
alicebartlett
0
1k
Writing for developers workshop
alicebartlett
1
190
presentations_ft.pdf
alicebartlett
1
320
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
510
Git for Humans
alicebartlett
66
33k
FT Accessibility 101
alicebartlett
2
590
Can't you make it more like Bootstrap?
alicebartlett
1
440
Other Decks in Technology
See All in Technology
Storage Browser for Amazon S3
miu_crescent
1
130
10個のフィルタをAXI4-Streamでつなげてみた
marsee101
0
160
ブラックフライデーで購入したPixel9で、Gemini Nanoを動かしてみた
marchin1989
1
510
C++26 エラー性動作
faithandbrave
2
670
オプトインカメラ:UWB測位を応用したオプトイン型のカメラ計測
matthewlujp
0
170
祝!Iceberg祭開幕!re:Invent 2024データレイク関連アップデート10分総ざらい
kniino
2
240
DevOps視点でAWS re:invent2024の新サービス・アプデを振り返ってみた
oshanqq
0
180
PHPからGoへのマイグレーション for DMMアフィリエイト
yabakokobayashi
1
160
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
250
Amazon SageMaker Unified Studio(Preview)、Lakehouse と Amazon S3 Tables
ishikawa_satoru
0
150
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
150
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
BBQ
matthewcrist
85
9.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
The Language of Interfaces
destraynor
154
24k
Into the Great Unknown - MozCon
thekraken
33
1.5k
Faster Mobile Websites
deanohume
305
30k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.3k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
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