All Day Hey! - Can't you make it more like bootstrap?

All Day Hey! - Can't you make it more like bootstrap?

An updated version of my talk about FT Origami, mostly focussing on what things we do (tooling, documentation) to help people use our components system Origami.

Df057cdadda4cd7a2a2db52576de1bf2?s=128

Alice Bartlett

April 27, 2017
Tweet

Transcript

  1. Alice Bartlett Senior Developer, Financial Times @alicebartlett Can’t you make

    it more like Bootstrap?
  2. @alicebartlett Hey!

  3. Photo credit: Nicky Wrightson I’m from the

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

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

    and services at the FT @alicebartlett
  6. @alicebartlett Team aims 1. Reduce time spent repeating work 2.

    Unify design across the FT
  7. Components, tools and services @alicebartlett

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

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

  10. http://carbondesignsystem.com/

  11. http://rizzo.lonelyplanet.com/styleguide

  12. https://www.futurelearn.com/

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

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

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

    design system @alicebartlett
  16. FIRST:

  17. None
  18. But it has a lot of other businesses too @alicebartlett

  19. None
  20. universe slide SUE FT SOLAR SYSTEM NESTED BRANDS (Life&Arts) TOOLS

    & SERVICES (Knowledge Manager Tools) SUB BRANDS (FT Advisor) BRANDED BUSINESSES (Investors Chronicle) MASTERBRAND FT.com
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. Teams all over the world Some are built in-house Some

    are built by agencies Some are actively maintained Some aren’t @alicebartlett
  28. @alicebartlett The FT has about 250 sites or micro-sites

  29. Managing this complexity and keeping all of these sites aligned

    is what we use Origami for. @alicebartlett
  30. @alicebartlett shared design shared code

  31. @alicebartlett shared design & shared code

  32. WHAT’S IN A COMPONENT SYSTEM?

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

  34. @alicebartlett Components

  35. @alicebartlett HTML JS CSS

  36. @alicebartlett o-header

  37. @alicebartlett o-buttons

  38. @alicebartlett o-teaser AN HOUR AGO The British government will learn

    about the limits of control in an open economy Renho Murata aims to breathe new life into Japan’s opposition Japan Politics AN HOUR AGO The British government will learn about the limits of control in an open economy Renho Murata aims to breathe new life into Japan’s opposition Japan Politics AN HOUR AGO Healthy competition between parties is best tonic for US America needs a bipartisan approach for economic recovery Eric Cantor
  39. @alicebartlett “ What tools are useful to developers that designers don’t

    have? ”
  40. @alicebartlett

  41. @alicebartlett ads, header, icons, date, fonts, grid, tracking, colours, buttons

  42. @alicebartlett Over ~5 years, Origami has grown to over 50

    components
  43. Each of these components are in their own repo, and

    have their own version number @alicebartlett
  44. http://registry.orgiami.ft.com

  45. @alicebartlett Components Websites! Application code HTML HTML HTML RB HTML

    HTML HTML RB HTML HTML HTML RB
  46. Most components systems look kind of the same. Origami, Rizzo,

    Carbon, Lightning all have pretty much the same components @alicebartlett
  47. Where they differ is in the tooling @alicebartlett

  48. @alicebartlett Tools

  49. @alicebartlett Components Websites! Application code HTML HTML HTML RB HTML

    HTML HTML RB HTML HTML HTML RB
  50. @alicebartlett Components Websites! Application code HTML HTML HTML RB HTML

    HTML HTML RB HTML HTML HTML RB QUITE HARD
  51. @alicebartlett Components Website Application code HTML JS CSS RB

  52. None
  53. @alicebartlett Components Website Application code HTML JS CSS RB

  54. @alicebartlett Components Website Application code HTML JS CSS RB

  55. @alicebartlett Components Website Application code HTML JS CSS RB (Mono-repo)

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

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

  58. @alicebartlett Components Websites! Application code HTML HTML HTML RB HTML

    HTML HTML RB HTML HTML HTML RB
  59. @alicebartlett Components Websites! Application code HTML HTML HTML RB HTML

    HTML HTML RB HTML HTML HTML RB QUITE HARD
  60. @alicebartlett Now you need to build some tools

  61. @alicebartlett - HTML - Javascript - CSS

  62. Templates are the difficult part @alicebartlett

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

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

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

    excellent way to deal with this problem @alicebartlett
  66. @alicebartlett Components Websites! Application code HTML HTML HTML RB HTML

    HTML HTML RB HTML HTML HTML RB Template resolution
  67. 1. Boasting 2. thing 3. thing 4. thing

  68. $ gem install rizzo @alicebartlett Step 1:

  69. // Input = ui_component("forms/search", { label: “Search" }) @alicebartlett Step

    2:
  70. @alicebartlett HTML Javascript CSS

  71. // Input = ui_component("forms/search", { label: “Search" }) @alicebartlett Step

    2: This is SO TIDY
  72. This is also how GOV.UK’s components system works. (Inspired by

    Rizzo!) @alicebartlett
  73. @alicebartlett Components Websites! Application code HTML HTML HTML RB HTML

    HTML HTML RB HTML HTML HTML RB Template resolution BUT …
  74. @alicebartlett Components Websites! Application code HTML HTML HTML RB HTML

    HTML HTML RB HTML HTML HTML RB Template resolution THIS DOESN’T SCALE
  75. @alicebartlett Components Websites! Application code HTML HTML HTML RB HTML

    HTML HTML RB HTML HTML HTML RB QUITE HARD
  76. Option 1: Template resolution for every language @alicebartlett

  77. @alicebartlett Components Websites! Application code HTML HTML HTML RB HTML

    HTML HTML PY HTML HTML HTML PHP Template resolution …
  78. Maintaining a toolset like this is a lot of work…

    @alicebartlett
  79. Option 2: no templating @alicebartlett

  80. HTML Javascript CSS @alicebartlett

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

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

  83. This is a really bad idea… @alicebartlett

  84. People leave off or remove things they don’t understand: ARIA

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

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

  87. You’re duplicating code @alicebartlett

  88. @alicebartlett Components Websites! Application code HTML HTML HTML RB HTML

    HTML HTML RB HTML HTML HTML RB NO GOOD OPTIONS
  89. @alicebartlett Origami uses copy/paste

  90. @alicebartlett HTML Javascript CSS

  91. • Pick and stick to a CSS naming convention (we

    use BEM) @alicebartlett
  92. • Pick and stick to a CSS naming convention (we

    use BEM) • Get really good at understanding and resolving dependency problems @alicebartlett
  93. Getting JS and CSS to people is much easier @alicebartlett

  94. 1. Boasting 2. thing 3. thing 4. thing

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

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

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

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

    the page @alicebartlett
  99. • Concatenates module Sass • Runs an auto-prefixer across it

    • Compiles • Minifies • Returns @alicebartlett Sass / CSS
  100. • Concatenates all module JS • Babel • Minifies it

    • Returns it @alicebartlett JavaScript
  101. 4.3 Million Build Service requests (edge) for per day via

    Splunk
  102. This is a bit clunky for some of our developers

    @alicebartlett
  103. • No critical path rendering @alicebartlett

  104. • No critical path rendering • Have to download more

    than they really need (especially for Sass) @alicebartlett
  105. • No critical path rendering • Have to download more

    than they really need (especially for Sass) • Have to use our classnames @alicebartlett
  106. We took the code behind the Build Service, and made

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

  108. http://mma.ft.com

  109. http://mma.ft.com Sites like this can use the build service

  110. None
  111. ft.com want a lot more control over their build process,

    they can use Origami Build Tools
  112. @alicebartlett The CDN and Build Tools give us enough flexibility

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

  114. @alicebartlett Documentation, marketing and support

  115. “FREE MARKET SOFTWARE TEAMS”

  116. “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
  117. Origami is competing with any other tool, or the option

    to not use Origami at all. @alicebartlett
  118. It’s important we keep focussed on this @alicebartlett

  119. When I joined the FT, I did some user research

    on Origami @alicebartlett
  120. I interviewed people around the FT: developers, designers and journalists,

    product managers @alicebartlett
  121. I discovered one problem. Our documentation was boring and confusing

    @alicebartlett
  122. http://origami.ft.com

  123. http://registry.orgiami.ft.com

  124. https://github.com/financial-times/o-gallery

  125. “HOW THE [HECK] AM I SUPPOSED TO FIND TIME TO

    READ ALL OF THIS STUFF?” an anonymous Origami user
  126. an anonymous Origami user “I wish this was just more

    like bootstrap’s documentation”
  127. http://http://getbootstrap.com/

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

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

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

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

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

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

  134. @alicebartlett Documentation isn’t complicated, it’s just hard.

  135. Marketing is also extremely important @alicebartlett

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

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

    with the number of users you have (or want) @alicebartlett
  138. 1. Boasting 2. thing 3. thing 4. thing

  139. 1. Boasting 2. thing 3. thing 4. thing

  140. Marketing isn’t just pretty websites @alicebartlett

  141. And at some point, you’ll need a comms plan for

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

  143. You should have a support channel @alicebartlett

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

  145. With free market software teams, this is as important as

    the code you’re writing @alicebartlett
  146. @alicebartlett “People won’t fight you, they’ll just ignore you”

  147. @alicebartlett Summary 1. Components at the centre

  148. @alicebartlett Summary 1. Components at the centre 2. Make the

    simplest tool for the job (maybe no tools at all!)
  149. @alicebartlett Summary 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
  150. Alice Bartlett Senior Developer, Financial Times @alicebartlett FIN!