Can't you make it more like Bootstrap?

Can't you make it more like Bootstrap?

Slides from a talk I gave at June's MK Geek Night. This talk covers what the FT is doing to unify design across the FT and speed up development time.

Df057cdadda4cd7a2a2db52576de1bf2?s=128

Alice Bartlett

July 12, 2016
Tweet

Transcript

  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
  16. THIS IS ABOUT SOFTWARE

  17. FIRST: FINANCIAL TIMES

  18. ft.com

  19. This is ft.com

  20. This design is known as “Falcon”

  21. ft.com

  22. aboutus.ft.com

  23. ftchinese.com

  24. The FT has a lot of other sites… @alicebartlett

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

    it’s that many
  28. These designs currently share little or no code @alicebartlett

  29. Even though many of them have the same ui design

    @alicebartlett
  30. @alicebartlett shared design shared code

  31. @alicebartlett shared design & shared code

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

    the Falcon design
  33. button > span (CSS bg) a (x sign) a (CSS

    bg) a > img
  34. @alicebartlett There are four different versions of this live on

    FT.com.
  35. @alicebartlett Four different implementations of the same thing

  36. And those are things we can control the design for…

    @alicebartlett
  37. We have three different versions of the twitter logo on

    ft.com
  38. THE FT’S SITE IS CHANGING

  39. FT.com

  40. next.ft.com

  41. This is the opportunity for a generational shift in the

    way we build websites at the FT @alicebartlett
  42. The Origami team has 2 aims: 1. Unify frontend styles

    across the FT 2. Reduce time spent repeating work @alicebartlett
  43. DOWN WITH THIS SORT OF THING @alicebartlett

  44. WHAT’S IN A COMPONENT SYSTEM?

  45. 1. Components 2. Tools 3. Documentation @alicebartlett

  46. @alicebartlett Components

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

    JavaScript .css .html .js
  48. @alicebartlett .css .html .js

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

  50. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .rb

    .rb .rb .rb .rb .rb .rb .rb
  51. Let’s have a look at an Origami specific example… @alicebartlett

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

    buttons
  56. There’s a lot of overlap between Origami, Lonely Planet’s Rizzo,

    or FutureLearn’s pattern library @alicebartlett
  57. @alicebartlett Tools Components

  58. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .rb

    .rb .rb .rb .rb .rb .rb .rb
  59. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .rb

    .rb .rb .rb .rb .rb .rb .rb QUITE HARD
  60. @alicebartlett Components Websites! Application code .rb .rb .rb .rb

  61. https://www.futurelearn.com/

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

  63. @alicebartlett Components Websites! Application code .rb .rb .rb .rb

  64. @alicebartlett Components Websites! Application code .rb .rb .rb .rb

  65. @alicebartlett Website Components and Application code .rb .rb .rb .rb

  66. This is the simplest way to use an abstracted design

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

  68. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .rb

    .rb .rb .rb .rb .rb .rb .rb
  69. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .rb

    .rb .rb .rb .rb .rb .rb .rb QUITE HARD
  70. @alicebartlett Now tooling becomes important

  71. @alicebartlett Javascript CSS HTML

  72. @alicebartlett Components Websites! Application code Tools .rb .rb .rb .rb

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

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

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

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

    .rb .rb .rb .rb .rb .rb .rb .rb
  77. http://rizzo.lonelyplanet.com/styleguide/

  78. $ gem install rizzo @alicebartlett Step 1:

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

    2:
  80. @alicebartlett ✔ Javascript ✔ CSS ✔ HTML

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

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

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

    .rb .rb .rb .rb .rb .rb .rb .rb BUT WAIT…
  84. @alicebartlett Components Websites! Application code Tools .rb .rb .rb .rb

    .rb .rb .rb .rb .rb .rb .rb .rb WHAT IF YOUR CONSUMING APPLICATIONS AREN’T ALL IN THE SAME LANGUAGE
  85. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .rb

    .rb .rb .rb .rb .rb .rb .rb QUITE HARD
  86. Option 1: Tools for every language @alicebartlett

  87. @alicebartlett Components Websites! Application code Tools .rb .rb .rb .rb

    .rb .rb .rb .py .rb .rb .rb .java
  88. Maintaining a toolset like this is a lot of work…

    @alicebartlett
  89. Option 2: Lose HTML delivery @alicebartlett

  90. @alicebartlett ✔ Javascript ✔ CSS ✘ HTML

  91. You can resolve the distribution of CSS and JS quite

    easily… @alicebartlett
  92. <link …> <script …> @alicebartlett

  93. Bower, npm @alicebartlett

  94. But templates… @alicebartlett

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

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

  97. This is a really bad idea… @alicebartlett

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

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

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

  101. You’re duplicating code @alicebartlett

  102. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .rb

    .rb .rb .rb .rb .rb .rb .rb NO GOOD OPTIONS
  103. 1. Build and maintain a tool for every language 2.

    Drop HTML distribution @alicebartlett
  104. A terrible choice

  105. Origami uses copy/paste

  106. @alicebartlett ✔ Javascript ✔ CSS ✘ HTML

  107. IF ONLY THERE WAS A SPEC OR SUITE OF SPECS

    THAT HANDLED DISTRIBUTION OF HTML…
  108. Yeah, we’re waiting for web components

  109. @alicebartlett ✔ Javascript ✔ CSS ✘ HTML

  110. The Origami Build Service @alicebartlett

  111. It’s basically a CDN @alicebartlett

  112. It’s basically a CDN OK it’s a bit cleverer than

    a CDN @alicebartlett
  113. @alicebartlett <link rel="stylesheet" href="https://origami-build.ft.com/ v2/bundles/css?modules=o- grid@^4.0.0,o-fonts@^1.4.0" />

  114. @alicebartlett <link rel="stylesheet" href="https://origami-build.ft.com/ v2/bundles/css?modules=o- grid@^4.0.0,o-fonts@^1.4.0" />

  115. @alicebartlett <link rel="stylesheet" href="https://origami-build.ft.com/ v2/bundles/css?modules=o- grid@^4.0.0,o-fonts@^1.4.0" />

  116. @alicebartlett <script async href="https://origami-build.ft.com/ v2/bundles/js?modules=o- grid@^4.0.0,o-fonts@^1.4.0" />

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

    their CSS and JavaScript @alicebartlett
  118. For CSS: - Concatenates module Sass - Runs an auto-prefixer

    across it - Compiles it - Minifies it - Returns it @alicebartlett
  119. For JS: - Concatenates all module JS - Babel -

    Minifies it - Returns it @alicebartlett
  120. People love this @alicebartlett

  121. 239,318,470 Build Service requests for April 12 - May 12

    via Akamai
  122. But some people want more control @alicebartlett

  123. We took the code behind the Build Service, and made

    it an npm package called Origami Build Tools @alicebartlett
  124. FT.com has a release cycle of 3 months, they use

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

    they use Origami Build Tools @alicebartlett
  126. So we have these awesome tools that mean, no matter

    what your release cycle is, or your tech stack, you can use Origami @alicebartlett
  127. But that’s not enough. @alicebartlett

  128. @alicebartlett Docs Tools Components

  129. FREE MARKET SOFTWARE TEAMS

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

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

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

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

    product managers @alicebartlett
  135. And what people told me was mostly positive. @alicebartlett

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

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

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

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

  140. HOW THE F**K AM I SUPPOSED TO FIND TIME TO

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

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

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

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

  145. https://www.polymer-project.org/1.0/

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

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

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

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

  150. Along the same track as documentation, you’ll find marketing. @alicebartlett

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

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

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

  154. https://www.lightningdesignsystem.com/

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

  156. Marketing isn’t just pretty websites @alicebartlett

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

    for new releases. @alicebartlett
  158. You should publish your incident reports @alicebartlett

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

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

  161. People won’t fight you, they’ll just ignore you

  162. Conclusion: 1. Components at the centre 2. Make the simplest

    tool for the job (maybe no tools at all!) 3. Care for your documentation @alicebartlett
  163. Alice Bartlett Origami Lead, Financial Times @alicebartlett Thanks