$30 off During Our Annual Pro Sale. View Details »
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
500
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
2024年のModern Data Stackを振り返ろう~分野別の目玉アップデート情報まとめ~
sagara
0
320
PR TIMESにおけるNext.jsとcacheの付き合い方
apple_yagi
2
240
GDGoC開発体験談 - Gemini生成AI活用ハッカソン / GASとFirebaseで挑むパン屋のフードロス解決 -
hotekagi
1
760
多様なロール経験が導いたエンジニアキャリアのナビゲーション
coconala_engineer
1
160
JAWS-UG 横浜支部 #76 AWS re:Invent 2024 宇宙一早い Recap LT3Amazon EKS Auto Modeと遊び(パーティ)の話
tjotjo
0
130
論理レプリケーションを使ったDB統合
kkato1
0
310
ドメインロジックで考えるテスタビリティ
leveragestech
1
280
深層学習のリペア技術の最新動向と実際 / DNN Repair Techniques for AI Performance Alignment for Safety Requirements
ishikawafyu
0
490
My Generation 年配者がこの先生きのこるには (Developers CAREER Boost 2024 Edition)/My Generation How elder engineers can survive
kwappa
3
370
お悩みハンドブック紹介資料
grafferhandbook
0
1.4k
Empowering Customer Decisions with Elasticsearch: From Search to Answer Generation
hinatades
PRO
0
300
12/4(水)のBedrockアプデ速報(re:Invent 2024 Daily re:Cap #3 with AWS Heroes)
minorun365
PRO
2
420
Featured
See All Featured
Faster Mobile Websites
deanohume
305
30k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
160
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
43
9.3k
Designing for humans not robots
tammielis
250
25k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
It's Worth the Effort
3n
183
27k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
How to Think Like a Performance Engineer
csswizardry
21
1.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
27
2.1k
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