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.

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
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
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