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

All Day Hey! - Can't you make it more like boot...

All Day Hey! - Can't you make it more like bootstrap?

An updated version of my talk about FT Origami, mostly focussing on what things we do (tooling, documentation) to help people use our components system Origami.

Alice Bartlett

April 27, 2017
Tweet

More Decks by Alice Bartlett

Other Decks in Technology

Transcript

  1. Origami is a 4 person team who develop frontend tools

    and services at the FT @alicebartlett
  2. Today I’m going to talk about Origami and some of

    these projects too @alicebartlett
  3. universe slide SUE FT SOLAR SYSTEM NESTED BRANDS (Life&Arts) TOOLS

    & SERVICES (Knowledge Manager Tools) SUB BRANDS (FT Advisor) BRANDED BUSINESSES (Investors Chronicle) MASTERBRAND FT.com
  4. Teams all over the world Some are built in-house Some

    are built by agencies Some are actively maintained Some aren’t @alicebartlett
  5. Managing this complexity and keeping all of these sites aligned

    is what we use Origami for. @alicebartlett
  6. @alicebartlett o-teaser AN HOUR AGO The British government will learn

    about the limits of control in an open economy Renho Murata aims to breathe new life into Japan’s opposition Japan Politics AN HOUR AGO The British government will learn about the limits of control in an open economy Renho Murata aims to breathe new life into Japan’s opposition Japan Politics AN HOUR AGO Healthy competition between parties is best tonic for US America needs a bipartisan approach for economic recovery Eric Cantor
  7. Each of these components are in their own repo, and

    have their own version number @alicebartlett
  8. Most components systems look kind of the same. Origami, Rizzo,

    Carbon, Lightning all have pretty much the same components @alicebartlett
  9. This is the simplest way to use an abstracted design

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

    excellent way to deal with this problem @alicebartlett
  11. @alicebartlett Components Websites! Application code HTML HTML HTML RB HTML

    HTML HTML RB HTML HTML HTML RB Template resolution
  12. @alicebartlett Components Websites! Application code HTML HTML HTML RB HTML

    HTML HTML RB HTML HTML HTML RB Template resolution BUT …
  13. @alicebartlett Components Websites! Application code HTML HTML HTML RB HTML

    HTML HTML RB HTML HTML HTML RB Template resolution THIS DOESN’T SCALE
  14. @alicebartlett Components Websites! Application code HTML HTML HTML RB HTML

    HTML HTML PY HTML HTML HTML PHP Template resolution …
  15. There is no good way to let people include (customisable)

    templates in their projects @alicebartlett
  16. • Pick and stick to a CSS naming convention (we

    use BEM) • Get really good at understanding and resolving dependency problems @alicebartlett
  17. • Concatenates module Sass • Runs an auto-prefixer across it

    • Compiles • Minifies • Returns @alicebartlett Sass / CSS
  18. • Concatenates all module JS • Babel • Minifies it

    • Returns it @alicebartlett JavaScript
  19. • No critical path rendering • Have to download more

    than they really need (especially for Sass) @alicebartlett
  20. • No critical path rendering • Have to download more

    than they really need (especially for Sass) • Have to use our classnames @alicebartlett
  21. We took the code behind the Build Service, and made

    it an npm package called Origami Build Tools @alicebartlett
  22. @alicebartlett The CDN and Build Tools give us enough flexibility

    that anyone making a site at the FT can use Origami
  23. “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
  24. Origami is competing with any other tool, or the option

    to not use Origami at all. @alicebartlett
  25. “HOW THE [HECK] AM I SUPPOSED TO FIND TIME TO

    READ ALL OF THIS STUFF?” an anonymous Origami user
  26. an anonymous Origami user “I wish this was just more

    like bootstrap’s documentation”
  27. Using Origami is as easy as pasting a <link> tag

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

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

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

    with the number of users you have (or want) @alicebartlett
  31. And at some point, you’ll need a comms plan for

    new releases to your components system @alicebartlett
  32. With free market software teams, this is as important as

    the code you’re writing @alicebartlett
  33. @alicebartlett Summary 1. Components at the centre 2. Make the

    simplest tool for the job (maybe no tools at all!)
  34. @alicebartlett Summary 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