O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Real-world component libraries at scale

212 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Real-world component libraries at scale

  1. 1. Real-world component libraries at scale ngVikings 2019 @ddprrt @Ka_TriN_F
  2. 2. Slide about usKatrin Freihofner
 @Ka_TriN_F barista.dynatrace.com
  3. 3. Slide about usStefan Baumgartner
 @ddprrt scriptconf.org
  4. 4. Designer : Developer
  5. 5. Designer : Developer
  6. 6. Designer : Developer
  7. 7. Patterns
  8. 8. Barista Design System Angular components
  9. 9. Barista Design System
  10. 10. A collection of reusable components, patterns, and styles. 
  11. 11. Barista Design System
  12. 12. Single source of truth …in code
  13. 13. button
  14. 14. button link
  15. 15. button link toggle
  16. 16. The appearance of a component is coupled to its behaviour and can’t be separated.
  17. 17. Developer experience
  18. 18. Code examples
  19. 19. Do it like Material
  20. 20. Do
  21. 21. it
  22. 22. like
  23. 23. Material
  24. 24. Okay… Let’s look at Material
  25. 25. Component infrastructure and Material Design components for Angular https://github.com/angular/components
  26. 26. Angular Devs know Material
  27. 27. Why not Material directly?
  28. 28. Component Development Kit
  29. 29. Straightforward APIs that don't confuse developers https://github.com/angular/components
  30. 30. $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;
  31. 31. 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); }
  32. 32. Defensive components
  33. 33. Work in any context. Any environment.
  34. 34. Layout vs Styling
  35. 35. Layout defines structure Components are fluid
  36. 36. width: auto; max-width: 100%; text-overflow: ellipsis; Intrinsic width constrained by layout
  37. 37. width: 100%; Set width constrained by layout
  38. 38. Respect HTML elements
  39. 39. .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; }
  40. 40. .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();
  41. 41. Always reset browser defaults
  42. 42. Re-define inheritable properties per component
  43. 43. Your component
  44. 44. Never assume any type
  45. 45. <dt-card headline=“It is beautiful”> </dt-card>
  46. 46. <dt-card headline=“It is beautiful”> </dt-card> Cool! Can you make it bold?
  47. 47. <dt-card headline=“It is beautiful”> </dt-card> .headline { font-weight: bold }
  48. 48. <dt-card headline=“It is beautiful”> </dt-card> .headline { font-weight: bold }
  49. 49. <dt-card headline=“It is beautiful”> </dt-card> .headline { font-weight: bold } No, I meant: Can you make 
 it bold?
  50. 50. !
  51. 51. <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>
  52. 52. Content projection is your friend
  53. 53. View encapsulation
  54. 54. It's "just" a string - Learnings from building a component library 
  55. 55. Design-first vs. Code-first
  56. 56. Design-first
  57. 57. Barista Design System UX + design Angular component lib
  58. 58. Barista Design System UX + design Angular component lib
  59. 59. Barista Design System UX + design Angular component lib
  60. 60. Code-first
  61. 61. Code-first
  62. 62. Barista Design System UX + design Angular component lib
  63. 63. Barista Design System UX + design Angular component lib
  64. 64. Barista Design System UX + design Angular component lib
  65. 65. Design vs. Code-first …it depends
  66. 66. Design-first
  67. 67. Code-first
  68. 68. Behaviour and style go together
  69. 69. Code defensively
  70. 70. Katrin Freihofner
 @Ka_TriN_F Stefan Baumgartner
 @ddprrt Office hours
 14:15

×