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
210
Getting more from Git
alicebartlett
0
1.1k
Writing for developers workshop
alicebartlett
1
200
presentations_ft.pdf
alicebartlett
1
330
All Day Hey! - Can't you make it more like bootstrap?
alicebartlett
2
2.1k
Case study on the FT's Responsive Image Service
alicebartlett
0
520
Git for Humans
alicebartlett
66
33k
FT Accessibility 101
alicebartlett
2
610
Can't you make it more like Bootstrap?
alicebartlett
1
450
Other Decks in Technology
See All in Technology
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
データの品質が低いと何が困るのか
kzykmyzw
6
1k
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Producing Creativity
orderedlist
PRO
343
39k
The Language of Interfaces
destraynor
156
24k
BBQ
matthewcrist
86
9.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Done Done
chrislema
182
16k
Code Reviewing Like a Champion
maltzj
521
39k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
4 Signs Your Business is Dying
shpigford
182
22k
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