Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

More Decks by Alice Bartlett

Other Decks in Technology


  1. Alice Bartlett Origami Lead, Financial Times @alicebartlett Can’t you make

    it more like Bootstrap? Considerations for building front end systems
  2. Hello

  3. I’m from the FINANCIAL TIMES

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

  5. Origami is a 5 person team who develop frontend tools

    and services at the FT @alicebartlett
  6. The Origami team has 2 aims: 1. Unify frontend styles

    across the FT 2. Reduce time spent repeating work @alicebartlett
  7. Components, tools and services @alicebartlett

  8. There are lots of companies that have projects similar to

    Origami. @alicebartlett
  9. http://getbootstrap.com/

  10. https://www.lightningdesignsystem.com/

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

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

  13. Today I’m going to talk about Origami and some of

    these projects too @alicebartlett
  14. This is not a talk about design systems

  15. This is about what you build once you have your

    design system @alicebartlett

  17. The FT has a lot of websites @alicebartlett

  18. FT.com

  19. aboutus.ft.com

  20. ftchinese.com

  21. @alicebartlett FT.com is the main website, then there’s a lonnnnnng

    tail of other stuff
  22. None
  23. None
  24. https://www.ftnewspaper.com/cgi-bin/ftusa.cgi/mms/1Y71CtEN9NfpRH1tJYYUkqPzPI97t1Fw/showLoginPage

  25. ig.ft.com

  26. None
  27. I don’t know how many frontend apps the FT has,

    it’s that many
  28. Many of these sites share similar designs, but have no

    shared code @alicebartlett
  29. @alicebartlett shared design shared code

  30. @alicebartlett shared design & shared code

  31. @alicebartlett This is the close button for an overlay in

    the Falcon design
  32. @alicebartlett There are four different versions of this live on

    FT.com right now.
  33. button > span (CSS bg) a (x sign) a (CSS

    bg) a > img
  34. And those are things we can control the design for…

  35. We have three different versions of the twitter logo on

  36. Currently: A chaotic trail of salmon pink websites @alicebartlett


  38. FT.com

  39. next.ft.com

  40. This means that a lot of those other 88 websites

    have an incentive to update @alicebartlett
  41. This is the opportunity for a generational shift in the

    way we build websites at the FT @alicebartlett
  42. LESS OF THIS SORT OF THING @alicebartlett


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

  45. @alicebartlett COMPONENTS COMPONENTS

  46. @alicebartlett A component is some combination of CSS, HTML and

    JavaScript .js .html .css
  47. @alicebartlett .js .html .css

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

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

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

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

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

    .css .css .rb .css .css .css .rb .css .css .css .rb
  53. None
  54. None
  55. None
  56. So that’s ads, header, icons, date, fonts, grid, tracking, colours,

  57. atomic design, mono-repo vs single repo, how we’re using Sass

    mixins, dependency management, progressive enhancement, design language… @alicebartlett
  58. 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

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

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

    .css .css .rb .css .css .css .rb .css .css .css .rb QUITE HARD
  62. @alicebartlett Components Websites Application code .css .css .css .rb

  63. https://www.futurelearn.com/

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

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

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

  67. @alicebartlett Website Components and Application code .css .css .css .rb

    .css .css .css mono-repo
  68. This is the simplest way to use an abstracted design

    system in your product. @alicebartlett
  69. The best tooling is no tooling* @alicebartlett

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

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

    .css .css .rb .css .css .css .rb .css .css .css .rb QUITE HARD
  72. @alicebartlett Now tooling becomes important

  73. @alicebartlett Javascript CSS HTML

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

    .css .css .css .rb .css .css .css .rb
  75. Templates are the difficult part @alicebartlett

  76. If your sites are using the same languages… @alicebartlett

  77. Then you can just make your system work for that

    stack. @alicebartlett
  78. If your sites use ruby, then a gem is an

    excellent way to deal with this problem @alicebartlett
  79. @alicebartlett Components Websites! Application code Tools .css .css .css .rb

    .css .css .css .rb .css .css .css .rb
  80. http://rizzo.lonelyplanet.com/styleguide/

  81. $ gem install rizzo @alicebartlett Step 1:

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

  83. @alicebartlett Javascript CSS HTML

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

    is SO TIDY Step 2:
  85. This is also how GOV.UK’s component’s system works. (Inspired by

    Rizzo!) @alicebartlett
  86. @alicebartlett Components Websites! Application code Tools .css .css .css .rb

    .css .css .css .rb .css .css .css .rb BUT …
  87. @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
  88. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .css

    .css .css .rb .css .css .css .rb .css .css .css .rb QUITE HARD
  89. Option 1: Template resolution for every language @alicebartlett

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

    .css .css .css .py .css .css .css .java …
  91. Maintaining a toolset like this is a lot of work…

  92. Option 2: no templating @alicebartlett

  93. @alicebartlett Javascript CSS HTML

  94. There is no good way to let people include (customisable)

    templates in their projects @alicebartlett
  95. You have to tell users to copy and paste @alicebartlett

  96. This is a really bad idea… @alicebartlett

  97. People leave off or remove things they don’t understand, ARIA

    attributes, microformats @alicebartlett
  98. You can never change a class name again @alicebartlett

  99. You can’t automatically push out changes to components @alicebartlett

  100. You’re duplicating code @alicebartlett

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

    .css .css .rb .css .css .css .rb .css .css .css .rb NO GOOD OPTIONS
  102. Origami uses copy/ paste

  103. @alicebartlett Javascript CSS HTML

  104. • Get really good at understanding and resolving dependency problems

    • Pick and stick to a CSS naming convention (we use BEM) @alicebartlett
  105. Web Components might help us a bit here Alice Bartlett

  106. 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
  107. @alicebartlett Javascript CSS HTML

  108. Assets are the easy part @alicebartlett

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

  110. The Build Service takes any combination of modules and returns

    their CSS and JavaScript @alicebartlett
  111. @alicebartlett <link rel="stylesheet" href="https://origami-build.ft.com/ v2/bundles/css?modules=o- [email protected]^4.0.0,[email protected]^1.4.0" />

  112. We can push minor version changes to components directly to

    the page @alicebartlett
  113. 239,318,470 Build Service requests for April 12 - May 12

    via Akamai
  114. This is a bit clunky for some of our developers

  115. - no critical path rendering - have to download more

    than they really need (especially for sass) - have to use our classnames @alicebartlett
  116. We took the code behind the Build Service, and made

    it an npm package called Origami Build Tools @alicebartlett
  117. Both of these approaches are application language agnostic @alicebartlett

  118. FT.com has a release cycle of 3 months, they use

    the Build Service @alicebartlett
  119. next.ft.com want a lot more control over their build process,

    they use Origami Build Tools @alicebartlett
  120. The CDN and Build Tools give us enough flexibility that

    anyone making a site at the FT can use Origami @alicebartlett
  121. But that’s not enough. @alicebartlett



  124. … 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
  125. So Origami is competing with any other tool, or the

    option to not use Origami at all. @alicebartlett
  126. This keeps us pretty focussed @alicebartlett

  127. When I joined the FT in October, I did some

    user research on Origami @alicebartlett
  128. I interviewed people around the business, developers, designers and journalists,

    product managers @alicebartlett
  129. What people told me was mostly positive @alicebartlett

  130. But I did discover one problem. Our documentation was confusing

    people or boring them @alicebartlett
  131. http://origami.ft.com

  132. http://registry.origami.ft.com

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


    READ ALL OF THIS STUFF? an anonymous Origami user
  135. I wish this was just more like bootstrap’s documentation an

    anonymous Origami user
  136. http://getbootstrap.com/getting-started/

  137. Using Origami is as easy as pasting a <link> tag

    into your <head> @alicebartlett
  138. It’s as easy as Bootstrap @alicebartlett

  139. We re-wrote our documentation using the principles used to write

    Django’s docs @alicebartlett
  140. https://jacobian.org/writing/great-documentation/

  141. We have a documentation style guide, just like we have

    guides for JavaScript and Sass @alicebartlett
  142. https://github.com/financial-times/ft-origami

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

  144. Marketing is also extremely important @alicebartlett

  145. Marketing is how you convince people to use your stuff

    without them having to think too hard about it @alicebartlett
  146. The amount of marketing you have to do should scale

    with the number of users you have (or want) @alicebartlett
  147. http://getbootstrap.com/

  148. https://www.lightningdesignsystem.com/

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

  150. Marketing isn’t just pretty websites @alicebartlett

  151. And at a certain scale, you’ll need a communications plan

    for new releases to your components system @alicebartlett
  152. You should publish your incident reports @alicebartlett

  153. You should have a support channel @alicebartlett

  154. With free market software teams, this matters @alicebartlett

  155. With free market software teams, this is as important to

    the success of your project as the code you’re writing @alicebartlett
  156. “People won’t fight you, they’ll just ignore you”

  157. 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
  158. 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
  159. 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
  160. Alice Bartlett Origami Lead, Financial Times @alicebartlett Thanks @alicebartlett