UI Libraries: should rolling your own be the way you roll?
0 likes165 views
The document discusses the importance of defining a design language before selecting UI libraries for web development. It highlights three approaches to library selection: off the shelf, bespoke, and plunder, emphasizing the need for consistency, code reusability, and social buy-in among teams. Ultimately, it advocates for creating a design ecosystem that integrates responsive design and supports collaboration among different roles in the development process.
UI Libraries: should rolling your own be the way you roll?
- 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
- 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