Components, patterns and sh*t it’s hard to deal with @ Intersection

This talk will cover one of the open questions of modern development:
When a pattern is a pattern?
How do we reuse one in a slightly different use case?

Not a recipe for success, more of a way to frame the problem, identify some coding strategies we tried and re-discuss the way we approach componentisation.

Transcript

1. INTERSECTION CONFERENCE UX & Development - Milan - October 1-2 2018
3. Modular architecture
4. Modular architecture Classes and components
5. Modular architecture classes and Components and modifiers
6. Modular architecture classes and Components, modifiers and overrides
7. Modular architecture classes, modifiers and overrides Components, 
 patterns and sh*t it’s hard to deal with
8. @cedmax Webmaster before it was cool 
 Tech Lead 
 Condé Nast International
9. Components,
 patterns and sh*t it’s hard to deal with
10. or… How I came up with a good use of quotes from Lost in Translation Components,
 patterns and sh*t it’s hard to deal with
11. Basically Lost in Translation?
12. “This movie is an hour and some odd minutes of my life I will never get back.” JoeB. on Metacritic Disclaimer
13. “Meaning is complex and often gets lost in translation. Everybody has their own mental model of things” Alla Kholmatova Lost in Translation
14. Modular design
15. 2013 - 2015
17. Atomic design Brad Frost · October 2013
18. Web components announced in November 2011
19. Pattern Library “Pattern libraries are something I do a lot for client projects. […] It’s a technique I first saw […] Natalie Downe develop for client projects back in 2009” Anna Debenham
20. MISSING SLIDE* ABOUT PATTERN LIBRARIES * on purpose, I promise
21. Pattern Library “Pattern libraries are something I do a lot for client projects. […] It’s a technique I first saw […] Natalie Downe develop for client projects back in 2009” Anna Debenham
22. ReactJS First release: March 2013
23. Where are we at, today?
24. Basically Frame the issue
25. It's not that simple “When you actually try to apply a modular approach to your day to day work, it isn’t really that simple” Alla Kholmatova · June 2015
26. The issue
27. The issue How do we manage our code, to re-use patterns without making them too rigid for the day to day activities?
28. The issue How do we manage our code, to re-use patterns without making them too rigid for the day to day activities? 
 How do we re-use our patterns in slightly different use cases?
29. Wish I could sleep
30. It’s NOT about any specific tech stack or module implementation: most of the patterns can be applied with BEM, styled components, css modules… *
 
 It’s about modularity at its core
 
 It’s about modules responsibilities
 
 It’s about maintainability
 (among other coding practices)
31. Classname 
 injection I'll be in the bar for the rest of the week
32. <IconButton className="content-actions__button" iconId="close" />
33. <IconButton className="content-actions__button" iconId="close" />
34. //_content-actions.scss .content-actions { //[...] &__button { flex: 1 0 auto; padding: 1rem; line-height: 1.5; &:hover, &:focus { background: $grey-1; } &:active { background: $grey-2; } } }
35. //_content-actions.scss .content-actions { //[...] &__button { flex: 1 0 auto; padding: 1rem; line-height: 1.5; &:hover, &:focus { background: $grey-1; } &:active { background: $grey-2; } } }
36. //_content-actions.scss .content-actions { //[...] &__button { flex: 1 0 auto; padding: 1rem; line-height: 1.5; &:hover, &:focus { background: $grey-1; } &:active { background: $grey-2; } } } What's the effect on the base button?
37. //_content-actions.scss .content-actions { //[...] &__button { flex: 1 0 auto; padding: 1rem; line-height: 1.5; &:hover, &:focus { background: $grey-1; } &:active { background: $grey-2; } } } Why is this button different from the pattern library ones?
38. This is the most flexible way to extend anything. What works
39. What really doesn't 1. The default style could be overridden in unexpected ways. 2. We are creating many variants of the original patterns.
40. - You're too tall.
 - Anybody ever tell you you may be too small? Ad hoc modifiers
41. from: https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c
45. <Dialog className="dialog--register-user"> <!-- [...] --> </Dialog>
46. <Dialog className="dialog--register-user"> <!-- [...] --> </Dialog>
47. //_dialog.scss .dialog { //[...] &--register-user { width: 43.75rem; height: auto; } }
48. //_dialog.scss .dialog { //[...] &--register-user { width: 43.75rem; height: auto; } }
49. //_dialog.scss .dialog { //[...] &--wizard { width: 43.75rem; height: 35rem; } &--register-user { width: 43.75rem; height: auto; } &--save-results { width: 23.75rem; height: auto; } } How many variants do we have to account for?
50. This practice allows for flexibility, giving a reasonable control and keeping all the variants in proximity. What works
51. What really doesn't 1. The generic component style have knowledge of specific implementations. 2. The file size might be effected by unused code. 3. It doesn't scale
52. Specialised patterns I'm special
53. <Dialog className="dialog--prompt"> <!-- [...] --> </Dialog>
54. <Dialog className="dialog--prompt"> <!-- [...] --> </Dialog>
56. //_dialog.scss .dialog { //[...] &--prompt { display: block; overflow: hidden; max-width: map-get($dialog-prompt, max-width); height: auto; margin: map-get($dialog-prompt, margin); padding: 2rem 0 0; border-radius: 3px; } }
57. //_dialog.scss .dialog { //[...] &--prompt { display: block; overflow: hidden; max-width: map-get($dialog-prompt, max-width); height: auto; margin: map-get($dialog-prompt, margin); padding: 2rem 0 0; border-radius: 3px; } } The semantic value 
 of the modifiers is different from the 
 ad-hoc ones.
58. The patterns are at the centre: no special cases, but pre-defined flavours of the basic components. What works
59. What really doesn't 1. It might drive to preemptive abstraction 2. It does account for a finite number of use cases
60. <Dialog type="prompt" /> <Dialog className="dialog--prompt"> <!-- [...] --> </Dialog> <DialogPrompt />
61. I still wish I could sleep A no go: it defies the point of having a pattern library A code smell, it's an hack and it should be treated like one The best approach, even though sometimes Classname 
 injection Ad hoc modifiers Specialised patterns
62. Basically I'm stuck
63. It's not that simple “It isn’t really that simple” Alla Kholmatova · June 2015
64. The issue How do we re-use our patterns in slightly different use cases?
65. What am I trying to solve?
66. Arrangement within parent components
67. <div className="game-intent__dialog"> <Dialog> <!-- [...] --> </Dialog> </div>
68. <div className="game-intent__dialog"> <Dialog> <!-- [...] --> </Dialog> </div>
69. //_dialog.scss .dialog { width: 100%; height: 100%; //[...] } //_game-intent.scss .game-intent { //[...] &__dialog { width: 43.75rem; height: auto; } }
70. //_dialog.scss .dialog { width: 100%; height: 100%; //[...] } //_game-intent.scss .game-intent { //[...] &__dialog { width: 43.75rem; height: auto; } } Each component has its own responsibility
71. This practices defines responsibilities in a neat way and it enables for specific implementations without invalidating patterns. What works
72. <div className="custom-class"> <Dialog> <!-- [...] --> </Dialog> </div> <Dialog className="custom-class"> <!-- [...] --> </Dialog>
73. What really doesn't Potentially you might need a wrapper HTML element that could have been avoided.
74. Space in relation to other components
75. <Dialog className="space-max inner-space-min"> <!-- [...] --> </Dialog>
76. <Dialog className="space-max inner-space-min"> <!-- [...] --> </Dialog>
77. It reduces the need to come up with new class names and it moves the conversation regarding component relationships back to the pattern library. What works
78. from: https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62
79. What really doesn't 1. The positional classes might get stale if not codified properly in the pattern lib. 2. The flexibility of the helper classes is limited
80. "Open" components
81. //_question-content-block.scss .question-content-block { //[...] &__icon-button { //[...] .icon { width: $content-block-icon-large-size; height: $content-block-icon-large-size; } }
82. //_question-content-block.scss .question-content-block { //[...] &__icon-button { //[...] .icon { width: $content-block-icon-large-size; height: $content-block-icon-large-size; } }
83. //_question-content-block.scss .question-content-block { //[...] &__icon-button { //[...] @include icon-size($content-block-icon-medium-size); } } //_icon.scss @mixin icon-size($size) { .icon { width: $size; height: $size; } }
84. //_question-content-block.scss .question-content-block { //[...] &__icon-button { //[...] @include icon-size($content-block-icon-medium-size); } } //_icon.scss @mixin icon-size($size) { .icon { width: $size; height: $size; } }
85. //_question-content-block.scss .question-content-block { //[...] &__icon-button { //[...] @include icon-size($content-block-icon-medium-size); } } //_icon.scss @mixin icon-size($size) { .icon { width: $size; height: $size; } } The responsibility of being flexible it back to the component itself
86. <Icon size={32} />
87. 1. Every base component can be as flexible as it defines itself to be. 2. Developers always have control on what they expose. What works
88. What really doesn't 1. This technique involves more complexity in thinking about the components 2. It's a slippery slope 3. How does an "open" component fit in the patterns?
89. Basically Does it get easier?
91. The more you know who you are and what you want, the less you let things upset you
92. I just don't know what I'm supposed to be
93. “A common language is a first step towards communication across cultural boundaries. ” Ethan Zuckerman
94. The issue How to understand - and convey - the meaning of an exception in our patterns?
95. Learn what the pattern your 
 are building is supposed to be
96. Get involved early
97. Talk to people
98. and remember that…
99. marco@fromthefront.it http://cedmax.com @cedmax You are not hopeless