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).

1. Should rolling your own
be the way you roll?
Respond15, 2015.03.19
Ben Buchanan / @200okpublic

2. Like any tech agenda...
know what you're aiming for
have a way to roll it out
get social buy-in

3. t
Photo: https://www.flickr.com/photos/booleansplit/3782726220

4. RWD ♥ UI Libraries

5. Libraries help...
●
Consistent design & interaction
●
Code re-use & portability
●
Centralised dev & testing
●
Rapid updates

6. Performance
●
Remove duplication
●
Replace heavy old libraries
●
Allow modular loading (http2 will love this!)

7. RWD limits
●
Media queries are limited
●
Significant context is often the parent

8. Solutions?
●
Flexbox
●
Whole-page patterns
●
Judicious JS tweaks
●
Polyfill eg. css-element-queries
●
Client side MVC (heaviest)

9. Just chuck in a library? Awesome!
Photo: https://www.flickr.com/photos/eschipul/4160817135

10. All options require work.

11. Beware the "which library" bikeshed.

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. "Which library are we using?"
vs
"What is our design language?"

14. Have you ever defined your design language?

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 ...

18. Definition sets a target.

21. Create a common language for your UI.

22. ≡

23. OK. Now you can choose a library.

24. Broad approaches
●
Off the shelf
●
Bespoke
●
Plunder

26. Why namespace?
●
Existing libraries?
●
Uncontrolled code – plugins, ads?
●
Fresh build or side-by-side rollout?

27. Off the shelf
●
Use without modification
●
Reskin & configure
●
Trades off flexibility

28. One size does not fit all.

29. You will probably end up forking the library.

30. 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

31. Solve your own problems.

32. Bespoke
●
Building everything gives 100% control
●
It's expensive though!

33. Plunder
●
Take the best bits
●
Modify to your liking
●
Build bespoke for the gaps

34. Some tips...
●
Normalise the code
●
Build & test outside your product
●
Set a lean API
●
Templates != API

35. So you have a library. Now what?

36. Social impact
●
Empower designers
●
Engage frontenders
●
Free backenders
●
Reassure Ops and PMs

38. Create an ecosystem, not a library.

39. Design ecosystem
●
Living style guide
●
Hi-fi rapid prototypes
●
Supporting artefacts:
●
Code templates
●
Graphics and prototyping templates
●
Dash docsets

40. Portable, usable design gets used.

42. know what you're aiming for
have a way to roll it out
get social buy-in

43. your design language
informs your library
and their creation builds buy-in

44. Create a design ecosystem which
simply includes responsive design.

45. Thank you.
GNU Terry Pratchett