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

3L-Components

 3L-Components

Azizi Yazit

June 28, 2021
Tweet

More Decks by Azizi Yazit

Other Decks in Research

Transcript

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide



  25. Please Select…


    Volvo


    Saab




    SelectContainer
    Component
    Option 1
    Option 2
    optionItem
    optionItem











    View full-size slide


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


    Volvo


    Saab




    View full-size slide



  27. Please Select…


    Volvo


    Saab




    Please Select…


    Volvo


    Saab


    View full-size slide

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

    View full-size slide

  29. [options]=“items”
    >
    Implementing


    Please Select…


    Volvo


    Saab




    View full-size slide



  30. Please select…



    *ngTemplateOutlet=“opt.template; context: {
    selectedOption, data: opt
    }”>





    {{opt.label}}






    View full-size 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 full-size slide




  32. Please select…

    ….


    {{opt.label}}


    .org-select {
    &__trigger {
    /* custom style */
    }
    &__opt {
    /* custom style */
    }
    &__opt-icon {
    /* custom style */
    }
    &__opt-label {
    /* custom style */
    }
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide