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

#ngde2019
Thomas Pink @thpnk and Fabian Friedl @fabian_friedl

Transcript

1. Servus Berlin ❤ Julia Solonina unsplash.com
2. Thomas Pink @thpnk Fabian Friedl @fabian_friedl
4. Linz / Austria
5. Sorasak unsplash.com
7. Anton Zellan unspash.com
8. NO kangaroos! Austin Elder unspash.com
9. Linz
10. Linz Munich Vienna
11. Learnings from building a component library a string ‘just’ It's
12. Learnings from building a component library a string <i>just</i> It's
13. Scope & Motivation Why?
14. The Dynatrace component library is used by 300+ Developers in multiple apps, teams and locations around the globe.
15. We want to provide high quality, easy to use and consistent components that scale.
19. Visit barista.dynatrace.com
20. Real world component libraries at scale Katrin Freihofner & Stefan Baumgartner j.mp/component-libraries-at-scale
21. API Design
23. <dt-card title="Some very cool title that is just a string"></dt-card>
24. <dt-card title="Until it's not <strong>just</strong> a string"></dt-card> <dt-card title="Some very cool title that is just a string"></dt-card> Project management UX requirements
25. <dt-card> <dt-card-title>Until it's not <strong>just</strong> a string</dt-card-title> </dt-card>
26. Stick to what devs already know
27. <dt-select [(value)]="selectedValue"> <dt-option value="">--Please choose an option--</dt-option> <dt-option value="Americano">Americano</dt-option> <dt-option value="Caffé Latte">Caffé Latte</dt-option> <dt-option value="Caffé macchiato">Caffé macchiato</dt-option> <dt-option value="Cappuccino ">Cappuccino</dt-option> <dt-option value="Espresso">Espresso</dt-option> </dt-select> <select> <option value="">--Please choose an option--</option> <option value="Americano">Americano</option> <option value="Caffé Latte">Caffé Latte</option> <option value="Caffé macchiato">Caffé macchiato</option> <option value="Cappuccino ">Cappuccino</option> <option value="Espresso">Espresso</option> </select>
28. <dt-select [(value)]="selectedValue"> <dt-option value="">--Please choose an option--</dt-option> <dt-option value="Americano">Americano</dt-option> <dt-option value="Caffé Latte">Caffé Latte</dt-option> <dt-option value="Caffé macchiato">Caffé macchiato</dt-option> <dt-option value="Cappuccino ">Cappuccino</dt-option> <dt-option value="Espresso">Espresso</dt-option> </dt-select> <mat-select [(value)]="selectedValue"> <mat-option value="">--Please choose an option--</mat-option> <mat-option value="Americano">Americano</mat-option> <mat-option value="Caffé Latte">Caffé Latte</mat-option> <mat-option value="Caffé macchiato">Caffé macchi</mat-option> <mat-option value="Cappuccino ">Cappuccino</mat-option> <mat-option value="Espresso">Espresso</mat-option> </mat-select>
29. Keep APIs consistent
30. <dt-card> <dt-card-title>L-W8-64-APMDay3</dt-card-title> <dt-card-subtitle>Linux (x84, 64bit)</dt-card-subtitle> Network traffic </dt-card> <dt-tile> <dt-tile-icon> <dt-icon name="agent"></dt-icon> </dt-tile-icon> <dt-tile-title>L-W8-64-APMDay3</dt-tile-title> <dt-tile-subtitle>Linux (x84, 64bit)</dt-tile-subtitle> Network traffic </dt-tile>
31. Build for the data structure you cannot control
32. options = [{ value: 1, label: 'first'}, { value: 2, label: 'second'}]; <dt-select> <dt-option *ngFor="let option of options” [value]=“option.value"> {{option.label}} </dt-option> </dt-select> <dt-select [options]="options"></dt-select> ✕ ✓
33. Contracts
35. Prefix everything public
36. @Component({ selector: 'dt-select' }) export class DtSelect {} @Component({ selector: ‘dt-filter-field' }) export class DtFilterField {} <div class="dt-filter-field-panel"> <input dtInput [value]="filterValue" /> </div>
37. Mark internals / privates
38. /** Wether the inline editor is required */ @Input() get required(): boolean { return this._required; } set required(value: boolean) { this._required = coerceBooleanProperty(value); } /** @internal Wether the input is focused or not */ _inputFocused = false; private _destroy$ = new Subject<void>();
39. Semantic versioning
41. 1.4.2 patch minor major
42. Deprecations
43. /** * Title of the cta card. * * @deprecated Use `<dt-empty-state>` in combination with * `<dt-card>` instead. * @breaking-change To be removed with 6.0.0. */ @Directive({ selector: 'dt-cta-card-title', exportAs: 'dtCtaCardTitle', host: { class: 'dt-cta-card-title', }, }) export class DtCtaCardTitle {}
44. Schedule your releases Be predictable Estée Janssens unsplash.com
46. Things to be aware of
47. CDK Todd Quackenbush unsplash.com
48. Prepare for the w orst Prepare for the things you can not control
49. Change Detection Raquel Martínez unsplash.com
50. Dale O'Dell / Alamy
51. App Detail Card Button Overview Change Detection CLICK
52. Detail Card Button Overview App Change Detection
53. Detail Card Button Overview App Change Detection
54. Detail Card Button Overview App Change Detection
55. Detail Card Button Overview App Change Detection
56. Detail Card Button Overview App Change Detection
57. Detail Card Button Overview App Change Detection OnPush CLICK
58. Detail Card Button Overview App Change Detection OnPush
59. Detail Card Button Overview App Change Detection OnPush
60. Detail Card Button Overview App Change Detection OnPush
61. Assume nothing, set everything changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, encapsulation: ViewEncapsulation.Emulated
62. Platform independence Markus Spiske unsplash.com
63. Browser Node (Universal) Worker Markus Spiske unsplash.com
64. Avoid direct DOM access Markus Spiske unsplash.com
65. Testing
66. unit e2e universal integration a11y visual
68. unit e2e universal integration a11y visual
69. Community Management
70. Open discussions, welcome contributions Bernard Hermant unsplash.com
72. Guidelines & automation Alex Knight unsplash.com
74. Tooling
75. Ship custom linting rules
76. <dt-card> <dt-card-subtitle>Some subtitle</dt-card-subtitle> <dt-card-title-actions> <button dt-button variant="secondary">Add to dashboard</button> <button dt-button variant="secondary">Edit</button> </dt-card-title-actions> The card is not an interactive element, therefore there are no hover, active or disabled states. </dt-card>
77. Tracking deprecations & usage
79. Key takeaways
80. Provide a good developer experience Program defensively Be open and transparent
81. Thomas Pink @thpnk Fabian Friedl @fabian_friedl