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.

Transcript

1. Alice Bartlett
   Senior Developer, Financial Times
   @alicebartlett
   Can’t you make it
   more like Bootstrap?
   

   View Slide

2. @alicebartlett
   Hey!
   

   View Slide

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

   View Slide

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

   View Slide

5. Origami is a 4 person team who
   develop frontend tools and
   services at the FT
   @alicebartlett
   

   View Slide

6. @alicebartlett
   Team aims
   1. Reduce time spent repeating work
   2. Unify design across the FT
   

   View Slide

7. Components,
   tools and
   services
   @alicebartlett
   

   View Slide

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

   View Slide

9. http://http://getbootstrap.com/
   

   View Slide

10. http://carbondesignsystem.com/
    

    View Slide

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

    View Slide

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

    View Slide

13. Today I’m going to talk about
    Origami and some of these
    projects too
    @alicebartlett
    

    View Slide

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

    View Slide

15. This is about what you build
    once you have your design
    system
    @alicebartlett
    

    View Slide

16. FIRST:
    

    View Slide

17. View Slide

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

    View Slide

19. View Slide

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
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. Teams all over the world
    Some are built in-house
    Some are built by agencies
    Some are actively maintained
    Some aren’t
    @alicebartlett
    

    View Slide

28. @alicebartlett
    The FT has about 250
    sites or micro-sites
    

    View Slide

29. Managing this complexity and
    keeping all of these sites aligned
    is what we use Origami for.
    @alicebartlett
    

    View Slide

30. @alicebartlett
    shared design shared code
    

    View Slide

31. @alicebartlett
    shared design & shared code
    

    View Slide

32. WHAT’S IN A
    COMPONENT SYSTEM?
    

    View Slide

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

    View Slide

34. @alicebartlett
    Components
    

    View Slide

35. @alicebartlett
    HTML JS CSS
    

    View Slide

36. @alicebartlett
    o-header
    

    View Slide

37. @alicebartlett
    o-buttons
    

    View Slide

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
    

    View Slide

39. @alicebartlett
    “ What tools are useful to
    developers that designers
    don’t have? ”
    

    View Slide

40. @alicebartlett
    

    View Slide

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

    View Slide

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

    View Slide

43. Each of these components are in
    their own repo, and have their
    own version number
    @alicebartlett
    

    View Slide

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

    View Slide

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

    View Slide

46. Most components systems look kind
    of the same. Origami, Rizzo, Carbon,
    Lightning all have pretty much the
    same components
    @alicebartlett
    

    View Slide

47. Where they differ is in the tooling
    @alicebartlett
    

    View Slide

48. @alicebartlett
    Tools
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

52. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

56. This is the simplest way to use
    an abstracted design system in
    your product.
    @alicebartlett
    

    View Slide

57. The best tooling is
    no tooling
    @alicebartlett
    

    View Slide

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

    View Slide

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

    View Slide

60. @alicebartlett
    Now you need
    to build some
    tools
    

    View Slide

61. @alicebartlett
    - HTML
    - Javascript
    - CSS
    

    View Slide

62. Templates are the difficult part
    @alicebartlett
    

    View Slide

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

    View Slide

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

    View Slide

65. If your sites use
    ruby, then a gem is
    an excellent way to
    deal with this
    problem
    @alicebartlett
    

    View Slide

66. @alicebartlett
    Components Websites!
    Application
    code
    HTML
    HTML
    HTML
    RB
    HTML
    HTML
    HTML
    RB
    HTML
    HTML
    HTML
    RB
    Template
    resolution
    

    View Slide

67. 1. Boasting
    2. thing
    3. thing
    4. thing
    

    View Slide

68. $ gem install rizzo
    @alicebartlett
    Step 1:
    

    View Slide

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

    View Slide

70. @alicebartlett
    HTML
    Javascript
    CSS
    

    View Slide

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

    View Slide

72. This is also how GOV.UK’s
    components system works.
    (Inspired by Rizzo!)
    @alicebartlett
    

    View Slide

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

    View Slide

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

    View Slide

75. @alicebartlett
    Components Websites!
    Application code
    HTML
    HTML
    HTML
    RB
    HTML
    HTML
    HTML
    RB
    HTML
    HTML
    HTML
    RB
    QUITE HARD
    

    View Slide

76. Option 1: Template resolution for
    every language
    @alicebartlett
    

    View Slide

77. @alicebartlett
    Components Websites!
    Application
    code
    HTML
    HTML
    HTML
    RB
    HTML
    HTML
    HTML
    PY
    HTML
    HTML
    HTML
    PHP
    Template
    resolution
    …
    

    View Slide

78. Maintaining a toolset like this is
    a lot of work…
    @alicebartlett
    

    View Slide

79. Option 2: no templating
    @alicebartlett
    

    View Slide

80. HTML
    Javascript
    CSS
    @alicebartlett
    

    View Slide

81. There is no good way to let
    people include (customisable)
    templates in their projects
    @alicebartlett
    

    View Slide

82. You have to tell users to copy
    and paste
    @alicebartlett
    

    View Slide

83. This is a really bad idea…
    @alicebartlett
    

    View Slide

84. People leave off or remove
    things they don’t understand:
    ARIA attributes, microformats
    @alicebartlett
    

    View Slide

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

    View Slide

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

    View Slide

87. You’re duplicating code
    @alicebartlett
    

    View Slide

88. @alicebartlett
    Components Websites!
    Application code
    HTML
    HTML
    HTML
    RB
    HTML
    HTML
    HTML
    RB
    HTML
    HTML
    HTML
    RB
    NO GOOD OPTIONS
    

    View Slide

89. @alicebartlett
    Origami uses copy/paste
    

    View Slide

90. @alicebartlett
    HTML
    Javascript
    CSS
    

    View Slide

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

    View Slide

92. • Pick and stick to a CSS naming convention
    (we use BEM)
    • Get really good at understanding and
    resolving dependency problems
    @alicebartlett
    

    View Slide

93. Getting JS and CSS to people
    is much easier
    @alicebartlett
    

    View Slide

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

    View Slide

95. The Build Service takes any
    combination of modules and
    returns their CSS or JavaScript
    @alicebartlett
    

    View Slide

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

    View Slide

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

    View Slide

98. We can push minor version
    changes to components
    directly to the page
    @alicebartlett
    

    View Slide

99. • Concatenates module Sass
    • Runs an auto-prefixer across it
    • Compiles
    • Minifies
    • Returns
    @alicebartlett
    Sass / CSS
    

    View Slide

100. • Concatenates all module JS
     • Babel
     • Minifies it
     • Returns it
     @alicebartlett
     JavaScript
     

     View Slide

101. 4.3 Million
     Build Service requests (edge) for per day
     via Splunk
     

     View Slide

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

     View Slide

103. • No critical path rendering
     @alicebartlett
     

     View Slide

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

     View Slide

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

     View Slide

106. We took the code behind the
     Build Service, and made it an npm
     package called Origami Build
     Tools
     @alicebartlett
     

     View Slide

107. Both of these approaches are
     application language agnostic
     @alicebartlett
     

     View Slide

108. http://mma.ft.com
     

     View Slide

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

     View Slide

110. View Slide

111. ft.com want a lot more control
     over their build process, they can
     use Origami Build Tools
     

     View Slide

112. @alicebartlett
     The CDN and Build Tools give
     us enough flexibility that
     anyone making a site at
     the FT can use
     Origami
     

     View Slide

113. But that’s not enough.
     @alicebartlett
     

     View Slide

114. @alicebartlett
     Documentation,
     marketing and support
     

     View Slide

115. “FREE MARKET
     SOFTWARE
     TEAMS”
     

     View Slide

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
     

     View Slide

117. Origami is competing with any
     other tool, or the option to not
     use Origami at all.
     @alicebartlett
     

     View Slide

118. It’s important we keep focussed
     on this
     @alicebartlett
     

     View Slide

119. When I joined the FT, I did some
     user research on Origami
     @alicebartlett
     

     View Slide

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

     View Slide

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

     View Slide

122. http://origami.ft.com
     

     View Slide

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

     View Slide

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

     View Slide

125. “HOW THE [HECK] AM I
     SUPPOSED TO FIND TIME
     TO READ ALL OF THIS
     STUFF?”
     an anonymous Origami user
     

     View Slide

126. an anonymous Origami user
     “I wish this was just more
     like bootstrap’s
     documentation”
     

     View Slide

127. http://http://getbootstrap.com/
     

     View Slide

128. Using Origami is as easy as
     pasting a tag into your
     
     @alicebartlett
     

     View Slide

129. It’s as easy as Bootstrap
     @alicebartlett
     

     View Slide

130. We re-wrote our documentation
     using the principles used to
     write Django’s docs
     @alicebartlett
     

     View Slide

131. https://jacobian.org/writing/great-documentation/
     

     View Slide

132. We have a documentation style
     guide, just like we have guides
     for JavaScript and Sass
     @alicebartlett
     

     View Slide

133. https://github.com/financial-times/ft-origami
     

     View Slide

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

     View Slide

135. Marketing is also
     extremely important
     @alicebartlett
     

     View Slide

136. Marketing is how you convince
     people to use your stuff without
     them having to think too hard
     about it
     @alicebartlett
     

     View Slide

137. The amount of marketing you
     have to do should scale with the
     number of users you have (or
     want)
     @alicebartlett
     

     View Slide

138. 1. Boasting
     2. thing
     3. thing
     4. thing
     

     View Slide

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

     View Slide

140. Marketing isn’t just pretty
     websites
     @alicebartlett
     

     View Slide

141. And at some point, you’ll need a
     comms plan for new releases to
     your components system
     @alicebartlett
     

     View Slide

142. You should publish your
     incident reports
     @alicebartlett
     

     View Slide

143. You should have a
     support channel
     @alicebartlett
     

     View Slide

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

     View Slide

145. With free market software
     teams, this is as important as the
     code you’re writing
     @alicebartlett
     

     View Slide

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

     View Slide

147. @alicebartlett
     Summary
     1. Components at the centre
     

     View Slide

148. @alicebartlett
     Summary
     1. Components at the centre
     2. Make the simplest tool for the job (maybe
     no tools at all!)
     

     View Slide

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
     

     View Slide

150. Alice Bartlett
     Senior Developer, Financial Times
     @alicebartlett
     FIN!
     

     View Slide