Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI Libraries: should rolling your own be the way you roll?

166 views

Published on

A presentation given at Web Directions Respond 2015. It covers the broader context and value of UI libraries within design systems; and particularly covers whether you should build your own UI library or use something off the shelf.

A few things that aren't instantly obvious from the slides... RWD = Responsive Web Design. I reference my work on three UI libraries - ACE (Ansarada), AUI (Atlassian), Big UI (Bigcommerce).

I included GNU Terry Pratchett as Pterry had passed just a few days before (http://www.gnuterrypratchett.com).

Published in: Internet
  • Be the first to comment

  • Be the first to like this

UI Libraries: should rolling your own be the way you roll?

  1. 1. Should rolling your own be the way you roll? Respond15, 2015.03.19 Ben Buchanan / @200okpublic
  2. 2. Like any tech agenda... know what you're aiming for have a way to roll it out get social buy-in
  3. 3. t Photo: https://www.flickr.com/photos/booleansplit/3782726220
  4. 4. RWD ♥ UI Libraries
  5. 5. Libraries help... ● Consistent design & interaction ● Code re-use & portability ● Centralised dev & testing ● Rapid updates
  6. 6. Performance ● Remove duplication ● Replace heavy old libraries ● Allow modular loading (http2 will love this!)
  7. 7. RWD limits ● Media queries are limited ● Significant context is often the parent
  8. 8. Solutions? ● Flexbox ● Whole-page patterns ● Judicious JS tweaks ● Polyfill eg. css-element-queries ● Client side MVC (heaviest)
  9. 9. Just chuck in a library? Awesome! Photo: https://www.flickr.com/photos/eschipul/4160817135
  10. 10. All options require work.
  11. 11. Beware the "which library" bikeshed.
  12. 12. It's not just a keel and aIt's not just a keel and a hull and a deck and sails.hull and a deck and sails. That's what a shipThat's what a ship needsneeds but what a shipbut what a ship isis...... is freedom.is freedom.
  13. 13. "Which library are we using?" vs "What is our design language?"
  14. 14. Have you ever defined your design language?
  15. 15. Define a palette Legacy codebase (112+) #000000 #0000ee #0000ff #0066cc #0066ee #0071b5 #0087c0 #0099cc #00ff00 #0782c1 #0a6332 #1392e9 #139ff7 #189de1 #19478a #1a1718 #212121 #221e1f #222222 #333333 #383838 #3875d7 #3e3c3d #444444 #44aee2 #4668c5 #474747 #4a4c4a #4b4d4b #4c4c4c #518013 #551a8b #555555 #595959 #5f6062 #666666 #696b6d #75b81b #777777 #807e7f #808080 #828282 #84bd39 #919191 #979797 #999999 #9fa0a1 #a01f13 #a0a0a0 #a0a6ad #a1a1a1 #aaaaaa #aeb3b9 #b5b5b5 #b6b6b6 #b81b75 #b83b1d #b9b9b9 #babcbe #bcbbb9 #bfbfbf #c0c0c0 #cccccc #cfd1cf #d0d2d0 #d3d3d3 #d4d4d4 #d6d7d8 #d7d7d7 #d7d8d7 #dddddd #dedede #dfdfdf #e0e0e0 #e3e3e3 #e4e0d8 #e4e4e4 #e5e5e5 #eaeaea #ebeae7 #ebebeb #ececec #ed1c24 #eddab7 #ededed #eeeeee #efeeed #eff0ef #f0dddd #f1f2f2 #f1f9e7 #f2f1ef #f2f2f2 #f3f3f3 #f4f4f4 #f5ecdb #f7f7f7 #f8f8f8 #fafabb #fafafa #fcfcfc #fe57a1 #feffde #ff0000 #ff7e00 #ff9900 #ffaaaa #ffccba #ffff00 #ffff99 #fffffc #ffffff ...
  16. 16. Definition sets a target.
  17. 17. Create a common language for your UI.
  18. 18.
  19. 19. OK. Now you can choose a library.
  20. 20. Broad approaches ● Off the shelf ● Bespoke ● Plunder
  21. 21. Why namespace? ● Existing libraries? ● Uncontrolled code – plugins, ads? ● Fresh build or side-by-side rollout?
  22. 22. Off the shelf ● Use without modification ● Reskin & configure ● Trades off flexibility
  23. 23. One size does not fit all.
  24. 24. You will probably end up forking the library.
  25. 25. You need to change your product. Do other people want the change? A new version of the library is out. Can you use the new version? Submit patch.  Definitely!  Submit patch anyway?  Maybe  Did your patch get accepted?  Wait   Yes  You have now forked.  No   Yes! Finally!   No  Update.  Yes   No   Time passes 
  26. 26. Solve your own problems.
  27. 27. Bespoke ● Building everything gives 100% control ● It's expensive though!
  28. 28. Plunder ● Take the best bits ● Modify to your liking ● Build bespoke for the gaps
  29. 29. Some tips... ● Normalise the code ● Build & test outside your product ● Set a lean API ● Templates != API
  30. 30. So you have a library. Now what?
  31. 31. Social impact ● Empower designers ● Engage frontenders ● Free backenders ● Reassure Ops and PMs
  32. 32. Create an ecosystem, not a library.
  33. 33. Design ecosystem ● Living style guide ● Hi-fi rapid prototypes ● Supporting artefacts: ● Code templates ● Graphics and prototyping templates ● Dash docsets
  34. 34. Portable, usable design gets used.
  35. 35. know what you're aiming for have a way to roll it out get social buy-in
  36. 36. your design language informs your library and their creation builds buy-in
  37. 37. Create a design ecosystem which simply includes responsive design.
  38. 38. Thank you. GNU Terry Pratchett

×