$30 off During Our Annual Pro Sale. View Details »

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

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

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

Alice Bartlett

August 03, 2016
Tweet

More Decks by Alice Bartlett

Other Decks in Technology

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