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.

Transcript

9. Movie Models Ltd: “We are the ‘shoulder to lean on’ when CGI sucks.“
12. > npm install –g @angular/cli > ng new momo –-prefix momo –-style scss
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
19. ✓ ✓ ✓ ✓ ✓
20. > ng generate module momo-ui > ng generate component momo-ui/components/expander
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
33. > ng add angular-playground > ng generate angular-playground:sandbox --project momo-ui components/expander > npm run playground
39. • • • • • •
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.”
46. • • •
50. • • •
51. • • •
52. > ng add @briebug/jest
60. “Angular elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework- agnostic way.”
61. • • • • •
67. „Thank you.“