Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Can't you make it more like Bootstrap?

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.

Alice Bartlett

July 12, 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
  2. Origami is a 5 person team who develop frontend tools

    and services at the FT @alicebartlett
  3. The Origami team has 2 aims: 1. Unify frontend styles

    across the FT 2. Reduce time spent repeating work @alicebartlett
  4. Today I’m going to talk about Origami and some of

    these projects too @alicebartlett
  5. This is the opportunity for a generational shift in the

    way we build websites 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. There’s a lot of overlap between Origami, Lonely Planet’s Rizzo,

    or FutureLearn’s pattern library @alicebartlett
  8. This is the simplest way to use an abstracted design

    system in your product. @alicebartlett
  9. If your sites use ruby, then a gem is an

    excellent way to deal with this problem @alicebartlett
  10. @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
  11. There is no good way to let people include (customisable)

    templates in their projects @alicebartlett
  12. People leave off or remove things they don’t understand, ARIA

    attributes, microformats @alicebartlett
  13. 1. Build and maintain a tool for every language 2.

    Drop HTML distribution @alicebartlett
  14. IF ONLY THERE WAS A SPEC OR SUITE OF SPECS

    THAT HANDLED DISTRIBUTION OF HTML…
  15. The Build Service takes any combination of modules and returns

    their CSS and JavaScript @alicebartlett
  16. For CSS: - Concatenates module Sass - Runs an auto-prefixer

    across it - Compiles it - Minifies it - Returns it @alicebartlett
  17. For JS: - Concatenates all module JS - Babel -

    Minifies it - Returns it @alicebartlett
  18. We took the code behind the Build Service, and made

    it an npm package called Origami Build Tools @alicebartlett
  19. FT.com has a release cycle of 3 months, they use

    the Build Service @alicebartlett
  20. next.ft.com want a lot more control over their build process,

    they use Origami Build Tools @alicebartlett
  21. So we have these awesome tools that mean, no matter

    what your release cycle is, or your tech stack, you can use Origami @alicebartlett
  22. … 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
  23. So Origami is competing with any other tool, or the

    option to not use Origami at all. @alicebartlett
  24. When I joined the FT in October, I did some

    user research on Origami @alicebartlett
  25. HOW THE F**K AM I SUPPOSED TO FIND TIME TO

    READ ALL OF THIS STUFF? an anonymous Origami user
  26. Using Origami is as easy as pasting a <link> tag

    into your <head> @alicebartlett
  27. We have a documentation style guide, just like we have

    guides for JavaScript and Sass @alicebartlett
  28. Marketing is how you convince people to use your stuff

    without them having to think too hard about it @alicebartlett
  29. The amount of marketing you have to do should scale

    with the number of users you have (or want) @alicebartlett
  30. 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