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
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. FIRST: FINANCIAL TIMES
17. The FT has a lot of websites @alicebartlett
18. FT.com
19. aboutus.ft.com
20. ftchinese.com
21. @alicebartlett FT.com is the main website, then there’s a lonnnnnng tail of other stuff
24. https://www.ftnewspaper.com/cgi-bin/ftusa.cgi/mms/1Y71CtEN9NfpRH1tJYYUkqPzPI97t1Fw/showLoginPage
25. ig.ft.com
27. I don’t know how many frontend apps the FT has, it’s that many
28. Many of these sites share similar designs, but have no shared code @alicebartlett
29. @alicebartlett shared design shared code
30. @alicebartlett shared design & shared code
31. @alicebartlett This is the close button for an overlay in the Falcon design
32. @alicebartlett There are four different versions of this live on FT.com right now.
33. button > span (CSS bg) a (x sign) a (CSS bg) a > img
34. And those are things we can control the design for… @alicebartlett
35. We have three different versions of the twitter logo on ft.com
36. Currently: A chaotic trail of salmon pink websites @alicebartlett
37. THE FT’S SITE IS CHANGING
38. FT.com
39. next.ft.com
40. This means that a lot of those other 88 websites have an incentive to update @alicebartlett
41. This is the opportunity for a generational shift in the way we build websites at the FT @alicebartlett
42. LESS OF THIS SORT OF THING @alicebartlett
43. WHAT’S IN A COMPONENT SYSTEM?
44. 1. Components 2. Tools 3. The other stuff @alicebartlett
45. @alicebartlett COMPONENTS COMPONENTS
46. @alicebartlett A component is some combination of CSS, HTML and JavaScript .js .html .css
47. @alicebartlett .js .html .css
48. @alicebartlett .js .html .css (o-header)
49. @alicebartlett .js .html .css (o-buttons)
50. @alicebartlett .js .html .css (o-video)
51. @alicebartlett Components Application code Website .css .js .html .rb
52. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .css .css .css .rb .css .css .css .rb .css .css .css .rb
56. So that’s ads, header, icons, date, fonts, grid, tracking, colours, buttons
57. atomic design, mono-repo vs single repo, how we’re using Sass mixins, dependency management, progressive enhancement, design language… @alicebartlett
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
59. @alicebartlett TOOLS COMPONENTS COMPONENTS
60. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .css .css .css .rb .css .css .css .rb .css .css .css .rb … …
61. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .css .css .css .rb .css .css .css .rb .css .css .css .rb QUITE HARD
62. @alicebartlett Components Websites Application code .css .css .css .rb
63. https://www.futurelearn.com/
64. https://www.futurelearn.com/pattern-library
65. @alicebartlett Components Websites! Application code .css .css .css .rb
66. @alicebartlett Components Websites! Application code .css .css .css .rb
67. @alicebartlett Website Components and Application code .css .css .css .rb .css .css .css mono-repo
68. This is the simplest way to use an abstracted design system in your product. @alicebartlett
69. The best tooling is no tooling* @alicebartlett
70. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .css .css .css .rb .css .css .css .rb .css .css .css .rb
71. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .css .css .css .rb .css .css .css .rb .css .css .css .rb QUITE HARD
72. @alicebartlett Now tooling becomes important
73. @alicebartlett Javascript CSS HTML
74. @alicebartlett Components Websites! Application code Tools .css .css .css .rb .css .css .css .rb .css .css .css .rb
75. Templates are the difficult part @alicebartlett
76. If your sites are using the same languages… @alicebartlett
77. Then you can just make your system work for that stack. @alicebartlett
78. If your sites use ruby, then a gem is an excellent way to deal with this problem @alicebartlett
79. @alicebartlett Components Websites! Application code Tools .css .css .css .rb .css .css .css .rb .css .css .css .rb
80. http://rizzo.lonelyplanet.com/styleguide/
81. $ gem install rizzo @alicebartlett Step 1:
82. http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html // Input = ui_component("forms/search", { label: “Search" }) Step 1:
83. @alicebartlett Javascript CSS HTML
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:
85. This is also how GOV.UK’s component’s system works. (Inspired by Rizzo!) @alicebartlett
86. @alicebartlett Components Websites! Application code Tools .css .css .css .rb .css .css .css .rb .css .css .css .rb BUT …
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
88. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .css .css .css .rb .css .css .css .rb .css .css .css .rb QUITE HARD
89. Option 1: Template resolution for every language @alicebartlett
90. @alicebartlett Components Websites! Application code Tools .css .css .css .rb .css .css .css .py .css .css .css .java …
91. Maintaining a toolset like this is a lot of work… @alicebartlett
92. Option 2: no templating @alicebartlett
93. @alicebartlett Javascript CSS HTML
94. There is no good way to let people include (customisable) templates in their projects @alicebartlett
95. You have to tell users to copy and paste @alicebartlett
96. This is a really bad idea… @alicebartlett
97. People leave off or remove things they don’t understand, ARIA attributes, microformats @alicebartlett
98. You can never change a class name again @alicebartlett
99. You can’t automatically push out changes to components @alicebartlett
100. You’re duplicating code @alicebartlett
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
102. Origami uses copy/ paste
103. @alicebartlett Javascript CSS HTML
104. • Get really good at understanding and resolving dependency problems • Pick and stick to a CSS naming convention (we use BEM) @alicebartlett
105. Web Components might help us a bit here Alice Bartlett http://somewebsite.com
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
107. @alicebartlett Javascript CSS HTML
108. Assets are the easy part @alicebartlett
109. http://origami-build.ft.com/
110. The Build Service takes any combination of modules and returns their CSS and JavaScript @alicebartlett
111. @alicebartlett <link rel="stylesheet" href="https://origami-build.ft.com/ v2/bundles/css?modules=o- grid@^4.0.0,o-fonts@^1.4.0" />
112. We can push minor version changes to components directly to the page @alicebartlett
113. 239,318,470 Build Service requests for April 12 - May 12 via Akamai
114. This is a bit clunky for some of our developers @alicebartlett
115. - no critical path rendering - have to download more than they really need (especially for sass) - have to use our classnames @alicebartlett
116. We took the code behind the Build Service, and made it an npm package called Origami Build Tools @alicebartlett
117. Both of these approaches are application language agnostic @alicebartlett
118. FT.com has a release cycle of 3 months, they use the Build Service @alicebartlett
119. next.ft.com want a lot more control over their build process, they use Origami Build Tools @alicebartlett
120. The CDN and Build Tools give us enough flexibility that anyone making a site at the FT can use Origami @alicebartlett
121. But that’s not enough. @alicebartlett
122. @alicebartlett DOCS… MARKETING … SUPPORT TOOLS COMPONENTS
123. FREE MARKET SOFTWARE TEAMS
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
125. So Origami is competing with any other tool, or the option to not use Origami at all. @alicebartlett
126. This keeps us pretty focussed @alicebartlett
127. When I joined the FT in October, I did some user research on Origami @alicebartlett
128. I interviewed people around the business, developers, designers and journalists, product managers @alicebartlett
129. What people told me was mostly positive @alicebartlett
130. But I did discover one problem. Our documentation was confusing people or boring them @alicebartlett
131. http://origami.ft.com
132. http://registry.origami.ft.com
133. http://github.com/financial-times/o-gallery
134. HOW THE [HECK] AM I SUPPOSED TO FIND TIME TO READ ALL OF THIS STUFF? an anonymous Origami user
135. I wish this was just more like bootstrap’s documentation an anonymous Origami user
136. http://getbootstrap.com/getting-started/
137. Using Origami is as easy as pasting a <link> tag into your <head> @alicebartlett
138. It’s as easy as Bootstrap @alicebartlett
139. We re-wrote our documentation using the principles used to write Django’s docs @alicebartlett
140. https://jacobian.org/writing/great-documentation/
141. We have a documentation style guide, just like we have guides for JavaScript and Sass @alicebartlett
142. https://github.com/financial-times/ft-origami
143. Documentation isn’t complicated. It’s just hard.
144. Marketing is also extremely important @alicebartlett
145. Marketing is how you convince people to use your stuff without them having to think too hard about it @alicebartlett
146. The amount of marketing you have to do should scale with the number of users you have (or want) @alicebartlett
147. http://getbootstrap.com/
148. https://www.lightningdesignsystem.com/
149. https://www.futurelearn.com/pattern-library
150. Marketing isn’t just pretty websites @alicebartlett
151. And at a certain scale, you’ll need a communications plan for new releases to your components system @alicebartlett
152. You should publish your incident reports @alicebartlett
153. You should have a support channel @alicebartlett
154. With free market software teams, this matters @alicebartlett
155. With free market software teams, this is as important to the success of your project as the code you’re writing @alicebartlett
156. “People won’t fight you, they’ll just ignore you”
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
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
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
160. Alice Bartlett Origami Lead, Financial Times @alicebartlett Thanks @alicebartlett