3L-Components

Transcript

1. @aziziyazit
   /aziziyazit /ngdesignsystem
   3LC’s
   Compounding
   Implementing
   Configuring
   

   View Slide

2. Auto biography
   PLUGIN MvvM MvC Module Component
   Accordion1
   >
   Content
   Accordion2
   >
   Tab1 Tab2 Tab3
   Content
   Btn Btn
   Card title
   Select
   >
   Option1
   Option2
   Option3
   Widget
   Component
   Library
   Application
   Design
   Tokens
   StyleGuide
   UX
   Design
   System
   

   View Slide

3. Component-Based Architecture Structure
   Component
   Library
   Design System 1
   2
   3
   Component
   Library
   Component
   Library
   Component
   Library
   

   View Slide

4. Material Design
   Consumer Consumer Consumer Consumer
   Design System
   [options]=“itemsA”
   >
   [options]=“itemsB”
   >
   [options]=“itemsC”
   >
   1
   2
   3
   Disclaimer: this is not the actual google component structure. This is just an example
   

   View Slide

5. Why 3LC, why not 2LC?
   Product A
   Design System
   Abstractions
   Product B
   

   View Slide

6. Why 3LC, why not 2LC?
   Design System
   Abstractions
   Product with multiple apps
   Product with multiple apps
   

   View Slide

7. Why 3LC, why not 2LC?
   Design System
   Abstractions
   Product with multiple apps
   Product with multiple apps
   Another level of abstraction
   

   View Slide

8. Why 3LC, why not 4LC?
   Component library - Consumers
   Design System - Provider
   Abstractions
   Abstractions
   Abstractions
   Design System - Consumer
   Component Libraries
   Atomic Components - Across teams
   Base Style-guide
   Base Standards & Conventions
   Team Specific Basic Components
   Team Specific Style-guide
   Team Specific Standards &
   Conventions
   

   View Slide

9. 3 Level Component
   Component
   Library
   Design System
   [options]=“itemsA”
   >
   [options]=“itemsB”
   >
   [options]=“itemsC”
   >
   Abstractions
   Abstractions
   Component
   Library
   Component
   Library
   Component
   Library
   

   View Slide

10. Material Design
    Consumer Consumer Consumer Consumer
    Provider
    Abstractions
    Principle of least power
    Abstractions
    Abstractions is cool but it must
    be balanced with the
    principles of least power
    to avoid wrong abstractions
    

    View Slide

11. CC
    15:01 / 38:46
    duplication is far cheaper
    than the wrong abstraction
    

    View Slide

12. The Sunk Cost Fallacy
    Developer hate to see
    duplications
    Refactor to a new reusable component
    Simple
    Web Page
    Loop until code becomes incomprehensible
    ABC
    XYZ
    DEF
    QWS
    ….
    ….
    ….
    This creates a
    new abstraction.
    New design requirement, new variant added Universal abstraction now behaves
    differently for different cases.
    

    View Slide

13. The Sunk Cost Fallacy
    Developer hate to see
    duplications
    Refactor to a new reusable component
    Simple
    Web Page
    Loop until code becomes incomprehensible
    ABC
    XYZ
    DEF
    QWS
    ….
    ….
    ….
    This creates a
    new abstraction.
    New design requirement, new variant added Universal abstraction now behaves
    differently for different cases.
    Sunk cost fallacy is whereby a person is
    reluctant to abandon a strategy or course
    of action even though the abandonment
    would be more beneficial - as you don’t
    want to lose out on the effort you have
    already sunk (can’t be recovered)
    Simple
    Web Page
    ABC
    XYZ
    DEF
    QWS
    ….
    ….
    ….
    

    View Slide

14. CC
    10:47 / 35:31
    Cheng Lau (FB)
    A lots of problems arise from bad
    understanding where we should be
    in the levels of abstraction
    

    View Slide

15. Consumer Consumer Consumer Consumer
    Provider
    1.
    2.
    3.
    Compounding
    Implementing
    Configuring
    3LC’s techniques
    1
    2
    3
    

    View Slide

16. 3LC’s
    Compounding Configuring
    Implementing
    mindset of “develop once used forever”
    Abstracting away UI Behaviour & UI logics
    Provide very minimal user interface.
    

    View Slide

17. Compounding
    Compound components is a pattern in
    which components are used together such
    that they share an implicit state that let’s
    them communicate with each other in the
    background.
    Parent Component
    Child Component
    1
    Child Component
    2
    Implicit state
    

    View Slide

18. Compounding
    Think of compound components like
    the and elements in HTML.
    Apart they don’t do too much, but together
    they allow you to create the complete
    experience. — Kent C. Dodds
    
    Volvo
    Saab
    
    

    View Slide

19. Compounding
    > components/select
    select.component
    select-top-control.component
    select-placeholder.component
    select-item.component
    select-clear.component
    select-arrow.component
    option.component
    option-item.component
    option-item-group.component
    option-group.component
    option-container.component
    NG-Zorro Select component
    

    View Slide

20. Compounding
    SelectContainer
    Component
    Option-item
    Component 1
    Option-item
    Component 2
    Implicit state
    selected 2 index
    matched add
    bold
    3
    index
    unmatched
    remove bold
    1
    send
    index
    send current state send current state
    

    View Slide

21. 
    *ngTemplateOutlet=“template; context: selectState”>
    
    
    export class SelectContainerComponent {
    @ContentChild(TemplateRef, { static: false })
    template!: TemplateRef;
    state = new BehaviorSubject({ selectedOption: {} });
    optionClick(selectedOption) {
    this.state.next({
    selectedOption
    });
    }
    }
    

    View Slide

22. 
    *ngTemplateOutlet=“template; context: selectState”>
    
    
    export class SelectContainerComponent {
    @ContentChild(TemplateRef, { static: false })
    template!: TemplateRef;
    state = new BehaviorSubject({ selectedOption: {} });
    optionClick(selectedOption) {
    this.state.next({
    selectedOption
    });
    }
    }
    SelectContainer
    Component
    Option 1
    Option 2
    optionClick(selectedOption) {
    this.state.next({
    selectedOption
    });
    
    *ngTemplateOutlet=“template; context: selectState”>
    
    
    

    View Slide

23. @Directive({
    selector: “[optionItem]”
    })
    export class OptionDirective
    @Input() data = {};
    constructor(
    private element: ElementRef,
    @Inject(forwardRef(() => SelectContainerComponent))
    private selectContainerComponent: SelectContainerComponent
    ) {}
    ngAfterViewInit() {
    fromEvent(this.element.nativeElement, "click")
    .pipe(takeUntil(this.destroy))
    .subscribe(() => this.selectContainerComponent.optionClick(this.data));
    }
    }
    

    View Slide

24. @Directive({
    selector: “[optionItem]”
    })
    export class OptionDirective
    @Input() data = {};
    constructor(
    private element: ElementRef,
    @Inject(forwardRef(() => ProviderSelectComponent))
    private providerSelectComponent: ProviderSelectComponent
    ) {}
    ngAfterViewInit() {
    fromEvent(this.element.nativeElement, "click")
    .pipe(takeUntil(this.destroy))
    .subscribe(() => this.providerSelectComponent.optionClick(this.data));
    }
    }
    constructor(
    @Inject(forwardRef(() => SelectContainerComponent))
    private SelectContainerComponent: SelectContainerComponent
    )
    fromEvent(this.element.nativeElement, "click")
    .pipe(takeUntil(this.destroy))
    .subscribe(() => this.selectContainerComponent.optionClick(this.data));
    SelectContainer
    Component
    Option 1
    Option 2
    optionItem
    optionItem
    

    View Slide

25. 
    
    Please Select…
    
    
    Volvo
    
    
    Saab
    
    
    
    
    SelectContainer
    Component
    Option 1
    Option 2
    optionItem
    optionItem
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

26. 
    let-isOpen=“isOpen”
    let-selectedOption=“selectedOption”>
    Please Select…
    
    
    Volvo
    
    
    Saab
    
    
    
    
    

    View Slide

27. 
    
    Please Select…
    
    
    Volvo
    
    
    Saab
    
    
    
    
    Please Select…
    
    
    Volvo
    
    
    Saab
    
    
    

    View Slide

28. 3LC’s
    Compounding Configuring
    Implementing
    Implement the Compound Components
    Mindset of “Configuration over code” component
    Prebuilt component with design & styling ready.
    

    View Slide

29. [options]=“items”
    >
    Implementing
    
    
    Please Select…
    
    
    Volvo
    
    
    Saab
    
    
    
    
    

    View Slide

30. 
    
    Please select…
    
    
    
    *ngTemplateOutlet=“opt.template; context: {
    selectedOption, data: opt
    }”>
    
    
    
    
    
    {{opt.label}}
    
    
    
    
    
    
    

    View Slide

31. 
    
    Please select…
    
    
    
    *ngTemplateOutlet=“opt.template; context: {
    selectedOption, data: opt
    }”>
    
    
    
    
    
    {{opt.label}}
    
    
    
    
    
    
    
    *ngTemplateOutlet=“opt.template; context: {
    selectedOption, data: opt
    }”>
    
    
    
    
    
    {{opt.label}}
    
    
    [
    {
    value: ‘v’,
    label: ‘Volvo’
    }, {
    value: ’s’,
    template: this.template
    }
    ]
    

    View Slide

32. 
    …
    
    Please select…
    
    ….
    
    
    {{opt.label}}
    
    
    .org-select {
    &__trigger {
    /* custom style */
    }
    &__opt {
    /* custom style */
    }
    &__opt-icon {
    /* custom style */
    }
    &__opt-label {
    /* custom style */
    }
    }
    

    View Slide

33. Org Component Library
    Consumer A
    Consumer B
    Consumer C
    Provider
    1.
    2.
    Compounding
    Implementing
    

    View Slide

34. 3LC’s
    Compounding Implementing
    Mindset of “Data Driven” Component.
    Focus on data & business logic.
    Configuring
    

    View Slide

35. [options]=“[{
    label: ‘Volvo’,
    value: ‘v’,
    disabled: false,
    italic: false,
    underline: false,
    items: [],
    selected: true,
    selectFn: …,
    hoverFn: …,
    }, {…}, {…}]”
    (valueChanged)=“onValueChange($event)”
    >
    Configurations
    

    View Slide

36. Summary
    1st level component
    2nd level component
    3rd level components
    UI Behaviour and Logics
    Compounding
    Visual & Rendering
    Implementing
    Use-cases
    Configuring
    

    View Slide

37. 15:01 / 38:46
    10:47 / 35:31
    Cheng Lau (FB)
    Cheng Lou - On the
    Spectrum of Abstraction at
    react-europe 2016
    RailsConf 2014 - All the
    Little Things by Sandi Metz
    

    View Slide