Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ngNeering – Rise of a Component Library

ngNeering – Rise of a Component Library

A lot of larger companies that develop software by themselves have a need to implement company-wide reusable control libraries: Written once and used throughout an entire app landscape. In this session we take a brief look at how to engineer Angular component libraries.

David Würfel

October 17, 2018
Tweet

More Decks by David Würfel

Other Decks in Programming

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. Movie Models Ltd: “We are the ‘shoulder to lean on’

    when CGI sucks.“
  10. None
  11. None
  12. > npm install –g @angular/cli > ng new momo –-prefix

    momo –-style scss
  13. None
  14. “A presentational component, sometimes called dumb component, is responsible for

    presenting its data, it only depends on @Inputs and only communicates to the outer world via @Output events. It has no direct access to domain services.”
  15. “A container component, sometimes called smart component, has knowledge of

    the business domain, has access to services, uses them to handle data and processes information for presentational components to consume.”
  16. MyBackendService DashboardComponent InputFieldComponent ExpanderComponent ComboBoxComponent @Input() title @Input() items @Input()

    value @Output() valueChange @Output() itemSelect @Inject(…) @Input() icon
  17. None
  18. None
  19. ✓ ✓ ✓ ✓ ✓

  20. > ng generate module momo-ui > ng generate component momo-ui/components/expander

  21. None
  22. None
  23. None
  24. • • • • • •

  25. • • • • • • 

  26. > ng generate lib momo-ui --style scss > ng generate

    component components/expander --project momo-ui > ng build momo-ui > ng serve momo
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. > ng add angular-playground > ng generate angular-playground:sandbox --project momo-ui

    components/expander > npm run playground
  34. None
  35. None
  36. None
  37. None
  38. None
  39. • • • • • •

  40. None
  41. None
  42. None
  43. None
  44. “Changing the appearance of graphical elements to customize the look

    and feel of an application at runtime. Theming can be triggered by the user.”
  45. None
  46. • • •

  47. None
  48. None
  49. None
  50. • • •

  51. • • •

  52. > ng add @briebug/jest

  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. “Angular elements are Angular components packaged as custom elements, a

    web standard for defining new HTML elements in a framework- agnostic way.”
  61. • • • • •

  62. None
  63. None
  64. None
  65. None
  66. None
  67. „Thank you.“

  68. None