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

A talk given at Cascadia 2016.
Video is here: https://youtu.be/LAVNOQroZYA

Transcript

1. Alice Bartlett
   Origami Lead, Financial Times
   @alicebartlett
   Can’t you make it more like Bootstrap?
   Considerations for building front end systems
   

   View Slide

2. Hello
   

   View Slide

3. I’m from the
   FINANCIAL TIMES
   

   View Slide

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

   View Slide

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

   View Slide

6. The Origami team has 2 aims:
   1. Unify frontend styles across the FT
   2. Reduce time spent repeating work
   @alicebartlett
   

   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://getbootstrap.com/
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. 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:
    FINANCIAL TIMES
    

    View Slide

17. The FT has a lot of websites
    @alicebartlett
    

    View Slide

18. FT.com
    

    View Slide

19. aboutus.ft.com
    

    View Slide

20. ftchinese.com
    

    View Slide

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

    View Slide

22. View Slide

23. View Slide

24. https://www.ftnewspaper.com/cgi-bin/ftusa.cgi/mms/1Y71CtEN9NfpRH1tJYYUkqPzPI97t1Fw/showLoginPage
    

    View Slide

25. ig.ft.com
    

    View Slide

26. View Slide

27. I don’t know how many
    frontend apps the FT has,
    it’s that many
    

    View Slide

28. Many of these sites share similar
    designs, but have no shared code
    @alicebartlett
    

    View Slide

29. @alicebartlett
    shared design shared code
    

    View Slide

30. @alicebartlett
    shared design & shared code
    

    View Slide

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

    View Slide

32. @alicebartlett
    There are four
    different versions of
    this live on FT.com
    right now.
    

    View Slide

33. button > span (CSS bg)
    a (x sign)
    a (CSS bg)
    a > img
    

    View Slide

34. And those are things we can control
    the design for…
    @alicebartlett
    

    View Slide

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

    View Slide

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

    View Slide

37. THE FT’S SITE IS
    CHANGING
    

    View Slide

38. FT.com
    

    View Slide

39. next.ft.com
    

    View Slide

40. This means that a lot of those other
    88 websites have an incentive to
    update
    @alicebartlett
    

    View Slide

41. This is the opportunity for a
    generational shift in the way we
    build websites at the FT
    @alicebartlett
    

    View Slide

42. LESS OF THIS
    SORT OF
    THING
    @alicebartlett
    

    View Slide

43. WHAT’S IN A
    COMPONENT
    SYSTEM?
    

    View Slide

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

    View Slide

45. @alicebartlett
    COMPONENTS
    COMPONENTS
    

    View Slide

46. @alicebartlett
    A component is some combination
    of CSS, HTML and JavaScript
    .js
    .html
    .css
    

    View Slide

47. @alicebartlett
    .js
    .html
    .css
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

53. View Slide

54. View Slide

55. View Slide

56. So that’s
    ads, header,
    icons, date,
    fonts, grid, tracking,
    colours, buttons
    

    View Slide

57. atomic design, mono-repo vs
    single repo, how we’re using
    Sass mixins, dependency
    management, progressive
    enhancement, design
    language…
    @alicebartlett
    

    View Slide

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
    

    View Slide

59. @alicebartlett
    TOOLS
    COMPONENTS
    COMPONENTS
    

    View Slide

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

    View Slide

61. @alicebartlett
    Components Websites!
    Application code
    .rb
    .rb
    .rb
    .rb
    .css
    .css
    .css
    .rb
    .css
    .css
    .css
    .rb
    .css
    .css
    .css
    .rb
    QUITE HARD
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

67. @alicebartlett
    Website
    Components and
    Application code
    .css
    .css
    .css
    .rb
    .css
    .css
    .css
    mono-repo
    

    View Slide

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

    View Slide

69. The best tooling is
    no tooling*
    @alicebartlett
    

    View Slide

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

    View Slide

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

    View Slide

72. @alicebartlett
    Now tooling
    becomes
    important
    

    View Slide

73. @alicebartlett
    Javascript
    CSS
    HTML
    

    View Slide

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

    View Slide

75. Templates are the
    difficult part
    @alicebartlett
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

81. $ gem install rizzo
    @alicebartlett
    Step 1:
    

    View Slide

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

    View Slide

83. @alicebartlett
    Javascript
    CSS
    HTML
    

    View Slide

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:
    

    View Slide

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

    View Slide

86. @alicebartlett
    Components Websites!
    Application code
    Tools
    .css
    .css
    .css
    .rb
    .css
    .css
    .css
    .rb
    .css
    .css
    .css
    .rb
    BUT …
    

    View Slide

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
    

    View Slide

88. @alicebartlett
    Components Websites!
    Application code
    .rb
    .rb
    .rb
    .rb
    .css
    .css
    .css
    .rb
    .css
    .css
    .css
    .rb
    .css
    .css
    .css
    .rb
    QUITE HARD
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

92. Option 2: no templating
    @alicebartlett
    

    View Slide

93. @alicebartlett
    Javascript
    CSS
    HTML
    

    View Slide

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

    View Slide

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

    View Slide

96. This is a really bad idea…
    @alicebartlett
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

100. You’re duplicating code
     @alicebartlett
     

     View Slide

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
     

     View Slide

102. Origami uses copy/
     paste
     

     View Slide

103. @alicebartlett
     Javascript
     CSS
     HTML
     

     View Slide

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

     View Slide

105. Web Components might
     help us a bit here
     Alice Bartlett
     http://somewebsite.com
     

     View Slide

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
     

     View Slide

107. @alicebartlett
     Javascript
     CSS
     HTML
     

     View Slide

108. Assets are the easy part
     @alicebartlett
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

113. 239,318,470
     Build Service requests for April 12 - May 12
     via Akamai
     

     View Slide

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

     View Slide

115. - no critical path rendering
     - have to download more than they really need
     (especially for sass)
     - have to use our classnames
     @alicebartlett
     

     View Slide

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

     View Slide

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

     View Slide

118. FT.com has a release cycle of 3 months,
     they use the Build Service
     @alicebartlett
     

     View Slide

119. next.ft.com want a lot more control
     over their build process, they use
     Origami Build Tools
     @alicebartlett
     

     View Slide

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

     View Slide

121. But that’s not enough.
     @alicebartlett
     

     View Slide

122. @alicebartlett
     DOCS… MARKETING …
     SUPPORT
     TOOLS
     COMPONENTS
     

     View Slide

123. FREE MARKET
     SOFTWARE TEAMS
     

     View Slide

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
     

     View Slide

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

     View Slide

126. This keeps us pretty focussed
     @alicebartlett
     

     View Slide

127. When I joined the FT in October, I did
     some user research on Origami
     @alicebartlett
     

     View Slide

128. I interviewed people around the
     business, developers, designers and
     journalists, product managers
     @alicebartlett
     

     View Slide

129. What people told me was mostly
     positive
     @alicebartlett
     

     View Slide

130. But I did discover one problem. Our
     documentation was confusing people
     or boring them
     @alicebartlett
     

     View Slide

131. http://origami.ft.com
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

136. http://getbootstrap.com/getting-started/
     

     View Slide

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

     View Slide

138. It’s as easy as Bootstrap
     @alicebartlett
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

144. Marketing is also extremely important
     @alicebartlett
     

     View Slide

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

     View Slide

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

     View Slide

147. http://getbootstrap.com/
     

     View Slide

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

     View Slide

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

     View Slide

150. Marketing isn’t just pretty websites
     @alicebartlett
     

     View Slide

151. And at a certain scale, you’ll need a
     communications plan for new releases
     to your components system
     @alicebartlett
     

     View Slide

152. You should publish your incident
     reports
     @alicebartlett
     

     View Slide

153. You should have a support channel
     @alicebartlett
     

     View Slide

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

     View Slide

155. With free market software teams, this
     is as important to the success of your
     project as the code you’re writing
     @alicebartlett
     

     View Slide

156. “People won’t fight you,
     they’ll just ignore you”
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

160. Alice Bartlett
     Origami Lead, Financial Times
     @alicebartlett
     Thanks
     @alicebartlett
     

     View Slide