Good component libraries can help your development teams scale. But developers are not the only people involved in the UI component creation process, there’s UX and design folks as well! For them, good component design might look completely different. In this talk we will look at component library architecture and best practices for powerful design systems. See how hundreds of designers and developers contribute to one platform to create one consistent piece of UI. Held together with @Ka_Trin_F

1. Real-world component
libraries at scale
ngVikings 2019
@ddprrt @Ka_TriN_F

2. Slide about usKatrin Freihofner
@Ka_TriN_F
barista.dynatrace.com

3. Slide about usStefan Baumgartner
@ddprrt
scriptconf.org

9. Designer : Developer

10. Designer : Developer

11. Designer : Developer

14. Patterns

15. Barista Design System
Angular components

16. Barista Design System

17. A collection of reusable components,
patterns, and styles.

18. Barista Design System

19. Single source of truth
…in code

22. button

23. button link

24. button link toggle

25. The appearance of a component is
coupled to its behaviour and can’t be
separated.

26. Developer experience

28. Code examples

30. Do it like
Material

31. Do

32. it

33. like

34. Material

35. Okay…
Let’s look at Material

36. Component infrastructure and
Material Design components for Angular
https://github.com/angular/components

37. Angular Devs know Material

39. Why not Material directly?

41. Component Development Kit

42. Straightforward APIs that don't confuse
developers
https://github.com/angular/components

43. $white: #ffffff;
$turquoise-100: #e1f7f9;
$turquoise-200: #aeebf0;
$turquoise-300: #74dee6;
$turquoise-400: #4fd5e0;
$turquoise-500: #00b9cc;
$turquoise-600: #00a1b2;
$turquoise-700: #00848e;
$turquoise-800: #006d75;
$turquoise-900: #005559;
$green-100: #e8f9dc;
$green-200: #d2efbe;
$green-300: #bee5a3;
$green-400: #9cd575;
$green-500: #7dc540;
$green-600: #5ead35;
$green-700: #3f962a;
$green-800: #1f7e1e;
$green-900: #006613;
$blue-100: #e0f4fc;
$blue-200: #b4e5f9;
$blue-300: #74cff7;
$blue-400: #2ab6f4;
$blue-500: #14a8f5;
$blue-600: #008cdb;

44. 900: $yellow-900,
),
'shamrockgreen': (
100: $shamrockgreen-100,
200: $shamrockgreen-200,
300: $shamrockgreen-300,
400: $shamrockgreen-400,
500: $shamrockgreen-500,
600: $shamrockgreen-600,
700: $shamrockgreen-700,
800: $shamrockgreen-800,
900: $shamrockgreen-900,
),
'gray': (
100: $gray-100,
200: $gray-200,
300: $gray-300,
400: $gray-400,
500: $gray-500,
600: $gray-600,
700: $gray-700,
800: $gray-800,
900: $gray-900,
),
);
@function get-color($color, $shade) {
@return map-get(map-get($full-color-palette, $color), $shade);
}

46. Defensive components

47. Work in any context. Any environment.

49. Layout vs Styling

50. Layout defines structure
Components are fluid

51. width: auto;
max-width: 100%;
text-overflow: ellipsis;
Intrinsic width
constrained by layout

52. width: 100%;
Set width
constrained by layout

53. Respect HTML elements

54. .dt-button {
@include main-font(30px);
box-sizing: border-box;
position: relative;
// Reset browser <button> styles.
@include dt-interactive-reset();
// Make anchors render like buttons.
display: inline-block;
white-space: nowrap;
text-decoration: none;
text-align: center;
overflow: hidden;
vertical-align: middle;
height: 32px;
border-style: solid;
border-radius: 3px;
border-width: 1px;
padding-top: 0;
padding-bottom: 0;
padding-left: 15px;
padding-right: 15px;
line-height: -moz-block-height;
background: transparent;
}

55. .dt-button {
box-sizing: border-box;
position: relative;
// Reset browser <button> styles.
// Make anchors render like buttons.
display: inline-block;
white-space: nowrap;
text-decoration: none;
text-align: center;
overflow: hidden;
vertical-align: middle;
height: 32px;
border-style: solid;
border-radius: 3px;
border-width: 1px;
padding-top: 0;
padding-bottom: 0;
padding-left: 15px;
padding-right: 15px;
line-height: -moz-block-height;
background: transparent;
}
@include main-font(30px);
@include dt-interactive-reset();

56. Always reset browser defaults

57. Re-define inheritable properties per
component

62. Your component

63. Never assume any type

64. <dt-card headline=“It is beautiful”>
</dt-card>

65. <dt-card headline=“It is beautiful”>
</dt-card>
Cool! Can you make it bold?

66. <dt-card headline=“It is beautiful”>
</dt-card>
.headline {
font-weight: bold
}

67. <dt-card headline=“It is beautiful”>
</dt-card>
.headline {
font-weight: bold
}

68. <dt-card headline=“It is beautiful”>
</dt-card>
.headline {
font-weight: bold
}
No, I meant: Can you
make
it bold?

69. !

70. <dt-card>
<dt-headline>
<strong>It is bold</strong>
</dt-headline>
</dt-card>
<div class="dt-card-header">
<div class="dt-card-heading">
<ng-content select=“dt-headline"></ng-content>
</div>
<ng-content></ng-content>
</div>

71. Content projection is your friend

72. View encapsulation

73. It's "just" a string - Learnings from building a component library

74. Design-first vs. Code-first

75. Design-first

81. Barista
Design System
UX + design Angular
component lib

82. Barista
Design System
UX + design Angular
component lib

83. Barista
Design System
UX + design Angular
component lib

86. Code-first

87. Code-first

90. Barista
Design System
UX + design Angular
component lib

91. Barista
Design System
UX + design Angular
component lib

92. Barista
Design System
UX + design Angular
component lib

96. Design vs. Code-first
…it depends

97. Design-first

98. Code-first

101. Behaviour and style go together

102. Code defensively

103. Katrin Freihofner
@Ka_TriN_F
Stefan Baumgartner
@ddprrt
Office hours
14:15