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

Can't you make it more like Bootstrap? (CASCADI...

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
  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 means that a lot of those other 88 websites

    have an incentive to update @alicebartlett
  6. This is the opportunity for a generational shift in the

    way we build websites at the FT @alicebartlett
  7. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .css

    .css .css .rb .css .css .css .rb .css .css .css .rb
  8. atomic design, mono-repo vs single repo, how we’re using Sass

    mixins, dependency management, progressive enhancement, design language… @alicebartlett
  9. 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
  10. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .css

    .css .css .rb .css .css .css .rb .css .css .css .rb … …
  11. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .css

    .css .css .rb .css .css .css .rb .css .css .css .rb QUITE HARD
  12. This is the simplest way to use an abstracted design

    system in your product. @alicebartlett
  13. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .css

    .css .css .rb .css .css .css .rb .css .css .css .rb
  14. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .css

    .css .css .rb .css .css .css .rb .css .css .css .rb QUITE HARD
  15. If your sites use ruby, then a gem is an

    excellent way to deal with this problem @alicebartlett
  16. @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
  17. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .css

    .css .css .rb .css .css .css .rb .css .css .css .rb QUITE HARD
  18. There is no good way to let people include (customisable)

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

    attributes, microformats @alicebartlett
  20. @alicebartlett Components Websites! Application code .rb .rb .rb .rb .css

    .css .css .rb .css .css .css .rb .css .css .css .rb NO GOOD OPTIONS
  21. • Get really good at understanding and resolving dependency problems

    • Pick and stick to a CSS naming convention (we use BEM) @alicebartlett
  22. 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
  23. The Build Service takes any combination of modules and returns

    their CSS and JavaScript @alicebartlett
  24. - no critical path rendering - have to download more

    than they really need (especially for sass) - have to use our classnames @alicebartlett
  25. We took the code behind the Build Service, and made

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

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

    they use Origami Build Tools @alicebartlett
  28. The CDN and Build Tools give us enough flexibility that

    anyone making a site at the FT can use Origami @alicebartlett
  29. … 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
  30. So Origami is competing with any other tool, or the

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

    user research on Origami @alicebartlett
  32. HOW THE [HECK] AM I SUPPOSED TO FIND TIME TO

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

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

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

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

    with the number of users you have (or want) @alicebartlett
  37. And at a certain scale, you’ll need a communications plan

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

    the success of your project as the code you’re writing @alicebartlett
  39. 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
  40. 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
  41. 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